Echarts quick start line chart

Basic line chart

Simple line chart

If we want to create a line chart with category abscissa and value ordinate, we can use this method:

option = {
  xAxis: {
    type: "category",
    data: ["a", "b", "c"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      type: "line",
      data: [1, 2, 3],
    },
  ],
};

Just set the type to line

Here, the type attribute of xAxis and yAxis can be hidden. Because the default type of coordinate axis is numeric, and xAxis specifies the data of category type, ECharts can also recognize that this is the coordinate axis of category type.

In order to make it easier for everyone to understand, we specially wrote type. In practical applications, if it is of type 'value', it can also be omitted.

Line graph of Cartesian coordinate system

If we want the broken line graph to be continuous in the abscissa and ordinate, that is, in the Cartesian coordinate system, we just need to represent each data of the series with an array containing two elements.

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      data: [
        [1, 2],
        [2, 1],
        [3, 4],
      ],
      type: "line",
    },
  ],
};

Line chart style settings

Line chart style

The style of line in line chart can be set through lineStyle. You can specify color, line width, polyline type, shadow, opacity, etc. for details, refer to the configuration item manual series.lineStyle Yes.

Here, we take setting color, width, and polyline type as examples.

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: {
    data: [1, 2, 3, 4, 5, 6],
    type: "line",
    lineStyle: {
      normal: {
        color: "red",
        width: 3,
        type: "dashed",
      },
    },
  },
};

Data point style

The style of data points can be series.itemStyle Specify fill color, borderColor, borderWidth, borderType, shadowColor, opacity, and so on.

Case:

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: {
    data: [1, 2, 3, 4, 5, 6],
    type: "line",
    lineStyle: {
      normal: {
        opacity: 0,
      },
    },
  },
};

Display values at data points

In the series, the label of this data point passes through series.label Property.

If show under label is specified as true, it means that the value will be displayed by default;

If false, and series.emphasis.label.show If it is true, it means that the value is displayed only when the mouse moves to the data.

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: {
    data: [1, 2, 3, 4, 5, 6],
    type: "line",
    label: {
      show: false,
      position: "top",
      textStyle: {
        fontSize: 20,
      },
    },
    emphasis: {
      label: {
        show: true,
      },
    },
  },
};

Null data

In a series, the value corresponding to an abscissa may be "empty", and setting it to 0 sometimes does not meet our expectations - empty data should not be connected by the data around it.

In ECharts, we use the string '-' to represent empty data, which is also applicable to other series of data.

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: {
    data: [1, 2, '-', 4, 5, 6],
    type: "line",
  },
};

Stacked line chart

Similar to the stacked bar chart, the stacked line chart also uses the stack of series to set which series are stacked together.

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: [
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      stack: "x",
    },
    {
      data: [6, 5, 4, 3, 2, 1],
      type: "line",
      stack: "x",
    },
  ],
};

However, the difference is that it is difficult to judge whether this is a stacked line graph or an ordinary line graph without explanation.

Therefore, for stacked line charts, it is generally recommended to use area fill color to indicate stacking.

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: [
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      stack: "x",
      areaStyle: {},
    },
    {
      data: [6, 5, 4, 3, 2, 1],
      type: "line",
      stack: "x",
      areaStyle: {},
    },
  ],
};

Area map

Of course, you can also not stack, which is more suitable for comparison

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: [
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      stack: "x",
    },
    {
      data: [6, 5, 4, 3, 2, 1],
      type: "line",
      stack: "y",
    },
  ],
};

The area map sets the background color of the space from the polyline to the coordinate axis, and uses the area to express the data.

Compared with the ordinary line chart, the visual effect of area chart is fuller and richer, especially suitable for a few scenes.

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: [
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      areaStyle: {},
    },
    {
      data: [6, 5, 4, 3, 2, 1],
      type: "line",
      areaStyle: {
        opacity: 0.5,
      },
    },
  ],
};

adopt areaStyle Set the filled area style of the line chart. Setting it to {} means that the default style is used, that is, the area is filled with a series of colors in a translucent manner.

If you want to specify a specific style, you can override it by setting the configuration item under areaStyle. For example, in the second series, set the color of the filled area to yellow with an opacity of 0.5.

In addition to opacity, it can also be achieved by adjusting the transparency of ` ` rgba ` ` color in color


Smooth curve

Smooth curve chart is also a deformation of line chart, and this softer style is also a good visual choice. When using, you only need to set the smooth property of the line chart series to true.

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: [
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      smooth: true,
    },
  ],
};

Step line diagram

Ladder line graph, also known as square wave graph, uses horizontal and vertical lines to connect two data points, while ordinary line graph directly connects the two points.

The step line graph can well express the mutation of data.

In ECharts, the step attribute of the series is used to represent the connection type of the ladder line graph. It has three values: 'start', 'middle' and 'end', which respectively represent the current point, the middle point between the current point and the next point, and the next point turning.

option = {
  xAxis: {
    data: ["a", "b", "c", "d", "e", "f"],
  },
  yAxis: {},
  series: [
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      step: "start",
      smooth: true,
    },
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      step: "middle",
      smooth: true,
    },
    {
      data: [1, 2, 3, 4, 5, 10],
      type: "line",
      step: "end",
      smooth: true,
    },
  ],
};

Please note the difference between data points and connections corresponding to different step values in this example.
: [
{
data: [1, 2, 3, 4, 5, 10],
type: "line",
step: "start",
smooth: true,
},
{
data: [1, 2, 3, 4, 5, 10],
type: "line",
step: "middle",
smooth: true,
},
{
data: [1, 2, 3, 4, 5, 10],
type: "line",
step: "end",
smooth: true,
},
],
};

> Notice the different in this example `step` The difference between the data point corresponding to the value and the connection.

Tags: Front-end Web Development data visualization echarts

Posted on Wed, 24 Nov 2021 08:39:47 -0500 by lavender