阶梯折线图表

制作阶梯折线图表，如下：

新建JavaScript图表：

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

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

修改代码：

1. 添加dataSet方法

修改图表标题：

设置图例名称：

设置X轴的数据：

设置Y轴的数据：

完整代码如下：

// 向右侧数据面板中拖入字段，可在代码中引用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
    }
  ]
};