Echarts data Visualization: Chart Part 2 — Line chart, stack area line chart

The project address

introduce

A line chart is a chart that connects data points with broken lines to show the trend of data changes.

The region map is based on the line map, the specified region will be filled with color

Through the realization of line chart, stacked area line chart of the two charts. We will learn the following

• The line chart
  • Title setting
  • Chart custom components (Toolbox, dataZoom, visualMap)
• Stack area line diagram
  • BoundaryGap strategy
  • Area Area Setting

Line chart analysis

Line chart drawing sequence

1. Set X and Y axes and their corresponding dimension and metric data
2. Set the title
3. Set the toolbar components
4. Sets the region scaling component
5. Set up the visual mapping component

Line chart drawing unit configuration table

The X and Y axes have been learned in the bar chart. In this example, the steps for setting the X and Y axes are the same

Line chart drawing unit configuration table analysis

The title component contains the main title and subtitle, which describe the basic information of the chart. The common attributes are described as follows:

The toolbar component has some built-in operations on charts, including export image, data view, dynamic type switch, data area scaling, and reset. The common attributes are described as follows:

A region scaling component that focuses on a specified range of data. Expands the visual range of the chart. The common attributes are described as follows:

A visual mapping component that maps data to visual elements (meta graphics categories, colors, sizes…) . The common attributes are described as follows:

Line chart sample code analysis

let chart = echarts.init(this.$refs.chart);
let option = {
    title: {
        text: 'Beijing AQI'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        data: lineData.map(function (item) {
            return item[0];
        })
    },
    yAxis: {
        splitLine: {
            show: false
        }
    },
    toolbox: {
        left: 'center',
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    dataZoom: [{
        startValue: '2014-06-01'
    }, {
        type: 'inside'
    }],
    visualMap: {
        pieces: [{
            gt: 0,
            lte: 50,
            color: '# 096'
        }, {
            gt: 50,
            lte: 100,
            color: '#ffde33'
        }, {
            gt: 100,
            lte: 150,
            color: '#ff9933'
        }, {
            gt: 150,
            lte: 200,
            color: '#cc0033'
        }, {
            gt: 200,
            lte: 300,
            color: '# 660099'
        }, {
            gt: 300,
            color: '#7e0023'
        }],
        outOfRange: {
            color: '# 999'
        }
    },
    series: {
        name: 'Beijing AQI'.type: 'line',
        data: lineData.map(function (item) {
            return item[1];
        })
    }
}
chart.setOption(option);
Copy the code

Title: title.text Sets the content to Beijing AQI without setting the title location and other style information. The default is displayed in the upper left corner

Tooltip: Tooltip. Trigger is set to Axis and displays the default tooltip when the mouse hovers over the axis area

The X and Y axes are the same as the previous chart without additional analysis

Toolbar: Toolbox. left is set to Center, indicating that the display position of the toolbar is in the center of the horizontal direction. Toolbox. feature contains the Restore and saveAsImage options, which provide the ability to reset a chart and save it as an image

Area scaling: dataZoom[0]. StartValue is set to 2014-06-01, which sets the starting value of the chart range. DataZoom [1]. Type set to Inside means that the chart can be scaled directly using the mouse/trackpad

Visual mapping: VisualMap. pieces sets the pieces array. The current mapping component type is segmented. Each item in the array sets the range of each segment. Gt and LTE are greater than and less than or equal to, respectively. In the current example, five ranges are set respectively. Visualmap. outOfRange sets the out-of-range visual color to #999.

Line chart effect

Stack area line chart analysis

Stacking area line chart drawing sequence

1. Set title
2. Setting prompt (Tooltip)
3. Set legend
4. Setting up the Toolbox
5. Set up the grid
6. Set X and Y dimensions and metrics
7. Set area fill
8. I’m gonna set it to smooth
9. Set the coordinate axes to a boundaryGap

Stack area line chart drawing unit configuration table

1-6 have been studied in the bar chart and line chart respectively, so it will not be repeated. Mainly study 7-9

Stack area line chart Unit configuration table analysis

A region fill is used as a style supplement to a line chart, which can be set to a fill color. The instructions are as follows:

Smooth curve is a special attribute in line graph, which can be adjusted to smooth curve. The instructions are as follows:

White space on the axis represents the white space policy at both ends of the axis. The dimension axis and the metric axis are represented differently. The instructions are as follows:

Stack area line chart sample code analysis

In xAixs, the boundaryGap property is set to ture and Type is category. Note If the object for setting the coordinate whitespace policy is the dimension axis, blank areas exist at both ends of the X axis

An areaStyle object exists in series[I], indicating that the line graph is set to a region fill graph. If smooth is set to true, the polyline is represented as a smooth curve

Stack area line diagram effect

Think & Practice

1. How do I customize the toolbar
2. The visual mapping component is switched to continuous
3. Region scaling is set to built-in
4. How to set the measurement axis range blank policy