阶梯折线图表

制作阶梯折线图表,如下:

阶梯折线图表(echarts) - 图1

新建JavaScript图表:

阶梯折线图表(echarts) - 图2

进入echarts官网,将JS代码复制粘贴到有数当中,链接如下:

https://echarts.apache.org/examples/zh/editor.html?c=line-step

修改代码:

  1. 添加dataSet方法

阶梯折线图表(echarts) - 图3

修改图表标题:

阶梯折线图表(echarts) - 图4

设置图例名称:

阶梯折线图表(echarts) - 图5

设置X轴的数据:

阶梯折线图表(echarts) - 图6

设置Y轴的数据:

阶梯折线图表(echarts) - 图7
完整代码如下:

// 向右侧数据面板中拖入字段,可在代码中引用dataSet字段获取二维数组数据
dataSet=dataSet.map((data,i)=>dataSet.map(d=>d[i]));
var dataX=dataSet[0];
var dataY=dataSet[1];
var dataY1=dataSet[2];
var dataY2=dataSet[3];
option = {
  title: {
    text: '梯形折线图'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['利润', '折扣', '数量']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
//   toolbox: {
//     feature: {
//       saveAsImage: {}
//     }
//   },
  xAxis: {
    type: 'category',
    data:dataX
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '利润',
      type: 'line',
      step: 'start',
      data: dataY
    },
    {
      name: '折扣',
      type: 'line',
      step: 'middle',
      data: dataY1
    },
    {
      name: '数量',
      type: 'line',
      step: 'end',
      data:dataY2
    }
  ]
};