echarts学习: 绘制双y轴折线图

前言

我们公司项目中的折线图大都是双y轴的，因为这些图表往往需要同时展示水位和流量这两种不同单位的数据，因此如何绘制双y轴折线图就是就是我所面临的首要问题。

1.如何绘制双y轴

将yAxis属性的值设置为一个数组，并在数组中添加两个axis对象，就能实现双y轴。

{
    {
      type: 'value',
      name: '水位(m)',
      axisLine: {
        show: true,
        symbol: ['none', 'arrow'],
      },
    },
    {
      type: 'value',
      name: '流量(m³/s)',
      axisLine: {
        show: true,
        symbol: ['none', 'arrow'],
      },
    },
  ],
}

2.如何让serie选择对应的y轴

从上面的图中可以看到，虽然我们现在已经添加了两条y轴，但两个系列 “xxx水位”和“xxx流量”都还使用的是第一条y轴（水位）。我希望呈现的效果是“xxx水位”使用第一条y轴（水位），xxx流量”使用第二条y轴（流量）。

可以借助series的yAxisIndex属性来实现我想要的效果。

将yAxisIndex属性值设置为0，则serie就使用第一条y轴；将yAxisIndex属性值设置为1，则serie就使用第二条y轴。

{
  series: [
    {
      name: 'xxx水位',
      type: 'line',
      yAxisIndex: 0,
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: 'xxx流量',
      type: 'line',
      yAxisIndex: 1,
      data: [220, 182, 191, 234, 290, 330, 310],
    },
  ]
}

3.多y轴的可能性

当写到这里的时候，我突然萌生出了一个想法，如果给图表添加两个以上的y轴会怎么样呢?

不过这就就是另一篇文章中要讲的故事了。

想要了解给图表添加两个以上y轴的方法，可以浏览我文章在图表中添加多条y轴会怎么样？

参考资料

series-line.yAxisIndex - Apache ECharts