制作Evaporation关系图

制作Evaporation关系图,如下(备注:数据采用的是数量、折扣):

动画

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

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

有数中新建javaScript图表:

Evaporation关系图(echarts) - 图2

添加代码:

Evaporation关系图(echarts) - 图3

修改标题:

Evaporation关系图(echarts) - 图4

修改X轴Y轴的名称:

Evaporation关系图(echarts) - 图5

修改显示数据:

Evaporation关系图(echarts) - 图6
完整代码如下:


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
    }
  ]
};