This is the 25th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Big data line chart, can mouse scroll line chart. The main use of echarts inside the dataZoom a built-in data area scaling component. You can slide and drag data in the coordinate axis for the region translation; At the same time, you can also slide the mouse wheel in the coordinate system to achieve the scale of the chart.

Use xAxisIndex and yAxisIndex to control data inside multiple X and Y axes. According to the website, it is better not to use the default value, but to use custom Settings.

option: {
    yAxis: [{...}.// First yAxis{... },// Second yAxis{... },// the third yAxis{... }// fourth yAxis].dataZoom: [{// The first dataZoom component
            yAxisIndex: [0.2] // Indicates that the dataZoom component controls the first and third yAxis
        },
        { // Second dataZoom component
            yAxisIndex: 3      // Indicates that the dataZoom component controls the fourth yAxis}}]Copy the code

When using the data window, we need to control the starting position of the window through start and end to customize the scope of the data window. It’s a percentage. 0 to 100 is a percentage.

dataZoom: [
    {
      type: 'inside'.start: 0.end: 10
    },
    {
      start: 0.end: 10}].Copy the code

The complete code case, you can also view the example code, the club’s official website address: echarts.apache.org/examples/zh…

Line chart – Line chart with area stacking stacking and non-stacking. Sets the area diagram of the broken line, and also the gradient background color.

import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom, 'dark'); var option; option = { title: { text: 'Stacked Area Chart' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [ { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] } ], yAxis: [ { type: 'value' } ], series: [ { name: 'Email', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'Union Ads', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [220, 182, 191, 234, 290, 330, 310] }, { name: 'Video Ads', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [150, 232, 201, 154, 190, 330, 410] }, { name: 'Direct', type: 'line', stack: 'Total', areaStyle: {}, emphasis: { focus: 'series' }, data: [320, 332, 301, 334, 390, 330, 320] }, { name: 'Search Engine', type: 'line', stack: 'Total', label: { show: true, position: 'top' }, areaStyle: {}, emphasis: { focus: 'series' }, data: [820, 932, 901, 934, 1290, 1330, 1320]}; option && myChart.setOption(option);Copy the code

The superposition

To achieve the above effect, just add the stack property in series

Stack data. After the series on the same category axis are configured with the same stack value, the values of the later series are added to the values of the previous series.