当前位置：首页 > article >正文

ECharts中yAxisIndex的作用

article 2025/3/15 14:36:14

yAxisIndex 通常在数据可视化库（如 ECharts 等）中使用，用于指定系列数据对应的 Y 轴索引。下面为你详细介绍其作用和使用场景：

作用

在一个图表中，可能会有多个 Y 轴（比如双 Y 轴图表），每个 Y 轴都有其对应的索引，yAxisIndex 就是用来告诉图表，当前系列的数据应该关联到哪个 Y 轴上进行展示。这样可以在一个图表中同时展示不同量级、不同单位的数据，方便进行对比分析。

使用场景

1. 双 Y 轴图表

当需要在同一个图表中展示两组具有不同量级或不同单位的数据时，就可以使用双 Y 轴。例如，在一个图表中同时展示销售额（单位：元）和销售量（单位：件），由于销售额和销售量的量级和单位不同，使用双 Y 轴可以更清晰地展示数据。

以下是一个使用 ECharts 实现双 Y 轴图表的示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双 Y 轴图表示例</title>
    <!-- 引入 ECharts 库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>

<body>
    <!-- 定义图表容器 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        // 获取图表容器元素
        var myChart = echarts.init(document.getElementById('main'));

        // 配置项
        var option = {
            // X 轴配置
            xAxis: {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月']
            },
            // Y 轴配置，包含两个 Y 轴
            yAxis: [
                {
                    type: 'value',
                    name: '销售额（元）'
                },
                {
                    type: 'value',
                    name: '销售量（件）',
                    // 第二个 Y 轴显示在右侧
                    position: 'right'
                }
            ],
            // 系列数据配置
            series: [
                {
                    name: '销售额',
                    type: 'bar',
                    data: [20000, 25000, 30000, 35000, 40000],
                    // 指定该系列数据关联到第一个 Y 轴（索引为 0）
                    yAxisIndex: 0
                },
                {
                    name: '销售量',
                    type: 'line',
                    data: [100, 120, 150, 180, 200],
                    // 指定该系列数据关联到第二个 Y 轴（索引为 1）
                    yAxisIndex: 1
                }
            ]
        };

        // 使用配置项显示图表
        myChart.setOption(option);
    </script>
</body>

</html>

代码解释：

yAxis 数组中定义了两个 Y 轴，第一个 Y 轴用于显示销售额，第二个 Y 轴用于显示销售量。
在 series 数组中，每个系列都有一个 yAxisIndex 属性，yAxisIndex: 0 表示该系列的数据关联到第一个 Y 轴，yAxisIndex: 1 表示该系列的数据关联到第二个 Y 轴。