echarts双y轴

echarts双Y轴是指在echarts图表中同时显示两个Y轴，分别位于左侧和右侧。实现这个功能的方法如下：
1. 当只有一个Y轴时，设置yAxis为一个对象，其中type为'value'表示数值轴，name为Y轴的名称。
2. 当有两个Y轴时，设置yAxis为一个数组，数组中的每个元素都是一个对象，表示一个Y轴。其中，type为'value'表示数值轴，name为Y轴的名称，min和max分别表示该Y轴的最小值和最大值，interval表示坐标轴刻度的间隔，splitNumber表示坐标轴的分割段数。

关于echarts双Y轴左右刻度线一致的问题，可以通过以下方法实现：
1. 设置两个Y轴的min和max属性相同，确保两个Y轴的刻度范围一致。
2. 设置两个Y轴的interval属性相同，确保两个Y轴的刻度间隔一致。

相关问题

echarts双Y轴

### 如何在ECharts中创建双Y轴图表

为了实现在ECharts中的双Y轴图表，可以配置两个`yAxis`对象，并分别为它们指定不同的名称和位置。下面是一个具体的例子来展示如何设置这种类型的图表。

#### 配置项说明

- `grid`: 定义绘图区域的位置以及大小，对于拥有多个坐标系的情况尤为重要。
- `legend`: 显示系列名的列表，方便用户识别不同数据集。
- `toolbox`: 提供一些工具按钮给用户操作图形，比如保存图片等。
- `tooltip`: 当鼠标悬停于某个点上时显示提示框的内容样式。
- `xAxis/yAxis`: 坐标轴的相关属性定义，在此案例中有两条垂直方向上的Y轴被声明出来并赋予各自的特点[^1]。

#### 实现代码示例

// 初始化echarts实例
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

var option;

option = {
    title: {
        text: 'ECharts Dual Y Axis Example'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data: ['Series A', 'Series B']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        }
    ],
    yAxis: [
        {
            name: 'Value A (%)',
            type: 'value'
        },
        {
            name: 'Value B (units)',
            type: 'value',
            inverse: false,
            offset: 80 // 调整第二个Y轴距离左侧的距离
        }
    ],
    series: [
        {
            name: 'Series A',
            type: 'line',
            data: [120, 132, 101, 134, 90, 230, 210],
            yAxisIndex: 0 // 关联到第一个Y轴
        },
        {
            name: 'Series B',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6],
            yAxisIndex: 1 // 关联到第二个Y轴
        }
    ]
};

if (option && typeof option === 'object') {
    myChart.setOption(option);
}

上述代码展示了怎样在一个页面内绘制带有两组不同类型数值（百分比 vs 单位数量）的数据序列，并让这些数据显示在同一张图表的不同侧边栏里。每一条数据线都指定了它所对应的Y轴索引号以便正确映射其值域范围[^2]。

echarts双y轴折线图

要实现echarts双y轴折线图，需要在option中设置两个yAxis和两个series，分别对应左右两个y轴和两条折线。示例代码如下：

option = {
    yAxis: [
        {
            type: 'value',
            name: '左侧Y轴'
        },
        {
            type: 'value',
            name: '右侧Y轴'
        }
    ],
    series: [
        {
            name: '折线1',
            type: 'line',
            data: [10, 20, 30, 40, 50],
            yAxisIndex: 0
        },
        {
            name: '折线2',
            type: 'line',
            data: [5, 15, 25, 35, 45],
            yAxisIndex: 1
        }
    ]
};

其中，yAxis中的name属性可以设置y轴的名称，series中的yAxisIndex属性可以指定该系列使用哪个y轴。