echarts两条y轴

ECharts可以实现两条Y轴的功能。当只有一个Y轴时，可以使用yAxis为对象的方式定义，如下所示：

yAxis: {
  type: 'value',
  name: 'Y轴名称'
}

当需要两个Y轴时，可以使用yAxis为数组的方式定义，如下所示：

Axis: [{
  type: 'value',
  name: '左侧Y轴名称',
  min: 0,
  max: 5,
  interval: 1,
  splitNumber: 6
}, {
  type: 'value',
  name: '右侧Y轴名称',
  min: 0,
  max: 125,
  interval: 25,
  splitNumber: 6
}]

以上代码片段展示了如何在ECharts中实现双Y轴功能。左侧Y轴的范围是0到5，间隔为1，分割段数为6；右侧Y轴的范围是0到125，间隔为25，分割段数为6。这样就可以实现左右两个Y轴的刻度线一致显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

相关问题

echarts两条y轴错乱

在ECharts中，如果两条y轴的最大最小值绝对值一致，就可以保证0刻度线会在同一水平线上，避免数据错乱的问题。这样可以实现双Y轴左右刻度线一致的效果。 例如，如果一条y轴的范围是-10到10，另一条y轴的范围也是-10到10，那么它们的0刻度线就会在同一水平线上，数据显示也会更加准确。这个方法可以解决echarts两条y轴错乱的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>

echarts两个y轴，如何保证y轴刻度与数据相对应

在 ECharts 中，可以通过使用 `grid` 和 `yAxis` 属性来创建多个 y 轴。为了保证 y 轴刻度与数据相对应，可以通过设置 `yAxis` 的 `min` 和 `max` 属性来手动设定 y 轴的取值范围。这样可以确保 y 轴的刻度与数据一一对应。

例如，如果有两个 y 轴，我们可以分别设置它们的取值范围：

option = {
  grid: [
    {
        left: '10%',
        right: '10%',
        bottom: 30
    }
  ],
  xAxis: [
    {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
        type: 'value',
        name: 'y1',
        axisLabel: {
            formatter: '{value}'
        },
        min: 0,
        max: 100
    },
    {
        type: 'value',
        name: 'y2',
        axisLabel: {
            formatter: '{value}'
        },
        min: 0,
        max: 1000
    }
  ],
  series: [
    {
        name:'series1',
        type:'bar',
        data:[12, 24, 36, 48, 60, 72, 84],
        yAxisIndex: 0
    },
    {
        name:'series2',
        type:'line',
        data:[120, 240, 360, 480, 600, 720, 840],
        yAxisIndex: 1
    }
  ]
};

在上面的例子中，我们创建了一个柱状图和一条折线图，分别对应两个 y 轴。在 `yAxis` 中，我们手动设置了两个 y 轴的取值范围，确保了它们的刻度与对应的数据一一对应。