【echarts】各式各样的折线图

这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战

大数据的折线图，可以鼠标滚动的折线图。主要是使用了echarts的里面的dataZoom一个内置型数据区域缩放组件。可以实现在坐标轴里面进行滑动拖拽进行数据的区域平移；同时也可以鼠标在坐标系里面进行滚轮的滑动，来实现图表的缩放。

使用xAxisIndex和yAxisIndex来控制多个x轴和y轴的里面的数据。根据官网的提示，最好不要使用默认值，最好是使用自定义的设置来进行操作。

option: {
    yAxis: [
        {...}, // 第一个 yAxis
        {...}, // 第二个 yAxis
        {...}, // 第三个 yAxis
        {...}  // 第四个 yAxis
    ],
    dataZoom: [
        { // 第一个 dataZoom 组件
            yAxisIndex: [0, 2] // 表示这个 dataZoom 组件控制 第一个 和 第三个 yAxis
        },
        { // 第二个 dataZoom 组件
            yAxisIndex: 3      // 表示这个 dataZoom 组件控制 第四个 yAxis
        }
    ]
}

使用数据窗口的时候需要我们通过start和end来控制窗口的起始位置，来进行自定义数据窗口的范围。使用的是百分比来做单位0~100表示百分比例。

dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 10
    },
    {
      start: 0,
      end: 10
    }
  ],

完整的代码案例，也可以查看官网的案例代码，地址：echarts.apache.org/examples/zh…

折线图--带面积的折线图叠加堆积图与非叠加。设置折线的面积图，而且还是渐变色的背景色。

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);

非叠加

实现以上效果，只需要把series里面的stack属性即可

数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。