制作Evaporation关系图

制作Evaporation关系图，如下（备注：数据采用的是数量、折扣）：

进入echarts官网复制盒须图的JS代码，连接如下：

https://echarts.apache.org/examples/zh/editor.html?c=grid-multiple

有数中新建javaScript图表：

添加代码：

修改标题：

修改X轴Y轴的名称：

修改显示数据：

完整代码如下：

dataSet=dataSet.map((data,i)=>dataSet.map(d=>d[i]));
let timeData = dataSet[0];
let dataX1=dataSet[1];
let dataX2=dataSet[2];
// timeData = timeData.map(function (str) {
//   return str.replace('2009/', '');
// });
option = {
  title: {
    text: '数量折扣 Evaporation关系图',
    left: 'center'
  },
  legend: {
    data: ['数量', '折扣'],
    left: 10
  },
  axisPointer: {
    link: [
      {
        xAxisIndex: 'all'
      }
    ]
  },
  dataZoom: [
    {
      show: true,
      realtime: true,
      start: 30,
      end: 70,
      xAxisIndex: [0, 1]
    },
    {
      type: 'inside',
      realtime: true,
      start: 30,
      end: 70,
      xAxisIndex: [0, 1]
    }
  ],
  grid: [
    {
      left: 60,
      right: 50,
      height: '35%'
    },
    {
      left: 60,
      right: 50,
      top: '55%',
      height: '35%'
    }
  ],
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLine: { onZero: true },
      data: timeData
    },
    {
      gridIndex: 1,
      type: 'category',
      boundaryGap: false,
      axisLine: { onZero: true },
      data: timeData,
      position: 'top'
    }
  ],
  yAxis: [
    {
      name: '数量',
      type: 'value',
      max: 150
    },
    {
      gridIndex: 1,
      name: '折扣',
      type: 'value',
      inverse: true
    }
  ],
  series: [
    {
      name: '数量',
      type: 'line',
      symbolSize: 8,
      // prettier-ignore
      data: dataX2
    },
    {
      name: '折扣',
      type: 'line',
      xAxisIndex: 1,
      yAxisIndex: 1,
      symbolSize: 8,
      // prettier-ignore
      data: dataX1
    }
  ]
};