正文

学会echarts折线图双Y轴：清晰对比不同数据，步骤详解

/0 浏览量
0414

在数据可视化领域，ECharts 是一个非常流行的 JavaScript 库，它可以帮助我们创建各种图表，包括折线图。特别是当需要对比两种或多种不同类型的数据时，双 Y 轴折线图是非常实用的。下面，我将详细讲解如何使用 ECharts 创建一个双 Y 轴折线图，以便你能够清晰地对比不同数据。

准备工作

在开始之前，请确保你的项目中已经引入了 ECharts 库。你可以在 ECharts 的官方网站下载并引入，或者使用 CDN 链接。

<!-- 引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script>

步骤一：创建基本图表结构

首先，我们需要在 HTML 中创建一个用于显示图表的容器。

<div id="main" style="width: 600px;height:400px;"></div>

步骤二：初始化图表实例

在 JavaScript 中，我们使用 echarts.init() 方法来初始化一个图表实例。

var myChart = echarts.init(document.getElementById('main'));

步骤三：配置图表选项

接下来，我们需要配置图表的选项。对于双 Y 轴折线图，我们需要定义两个 Y 轴，并设置相应的折线数据。

var option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['数据系列 1', '数据系列 2']
    },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: [
        {
            type: 'value',
            name: 'Y轴 1',
            position: 'left'
        },
        {
            type: 'value',
            name: 'Y轴 2',
            position: 'right'
        }
    ],
    series: [
        {
            name: '数据系列 1',
            type: 'line',
            yAxisIndex: 0,
            data: [120, 200, 150, 80, 70, 110, 130, 150, 90, 130, 160, 170]
        },
        {
            name: '数据系列 2',
            type: 'line',
            yAxisIndex: 1,
            data: [60, 90, 120, 50, 70, 110, 130, 60, 100, 120, 130, 150]
        }
    ]
};

在这个配置中，我们定义了两个 Y 轴，并通过 yAxisIndex 指定了每个系列使用哪个 Y 轴。position: 'left' 和 position: 'right' 用于设置 Y 轴的位置。

步骤四：设置图表

最后，我们将配置好的选项设置到图表实例中。

myChart.setOption(option);

完成效果

完成以上步骤后，你将得到一个带有双 Y 轴的折线图，可以清晰地对比两个数据系列。

ECharts 双 Y 轴折线图

通过这个例子，你学会了如何使用 ECharts 创建一个双 Y 轴折线图。这样的图表对于展示和对比不同类型的数据非常有用。如果你有其他需求或者遇到问题，可以继续探索 ECharts 的文档和示例。

-- 展开阅读全文 --