ECharts教程：绘制双Y轴折线图

ECharts教程：绘制双Y轴折线图

引用

CSDN

1.

https://blog.csdn.net/m0_52912501/article/details/139461226

前言

在数据可视化项目中，双Y轴折线图常用于同时展示具有不同单位的数据，例如水位（米）和流量（立方米/秒）。本文将详细介绍如何使用ECharts绘制此类图表。

1. 如何绘制双Y轴

要实现双Y轴，需要将yAxis属性设置为一个数组，并在数组中添加两个axis对象。每个对象分别定义不同单位的坐标轴。

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

2. 如何让系列选择对应的Y轴

默认情况下，所有系列都会使用第一个Y轴。要让不同的系列使用不同的Y轴，可以通过yAxisIndex属性来指定。

将yAxisIndex属性值设置为0，则系列使用第一条Y轴；设置为1，则使用第二条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轴，ECharts还支持添加更多Y轴。如果需要了解如何在图表中添加两个以上的Y轴，可以参考相关文档。

参考资料

• series-line.yAxisIndex - Apache ECharts