巧用 ECharts：两个折线图共用 X 轴并合并 Tooltip 功能

2024-01-05 16:25:09

在数据可视化领域，ECharts 以其简洁、高效的特点深受开发者喜爱。而当我们需要展示两条折线图，且需要共用 X 轴并合并 Tooltip 功能时，如何实现呢？本文将带你一探究竟。

前期准备

在开始编码之前，我们需要引入 ECharts 库和相关的 CSS 文件：

<script src="echarts.min.js"></script>
<link href="echarts.css" rel="stylesheet">

共用 X 轴

为了让两条折线图共用 X 轴，需要在 ECharts 选项中配置 xAxis.axisLabel.interval 选项，指定 X 轴刻度的间隔，从而保证两条折线图的 X 轴刻度一致。

xAxis: {
    axisLabel: {
        interval: 0
    }
}

合并 Tooltip

要合并两条折线图的 Tooltip，我们需要在 ECharts 选项中配置 tooltip 选项，并设置 showContent 为 true。这样，当鼠标悬停在折线图上时，将同时显示两条折线图的数据。

tooltip: {
    showContent: true
}

示例代码

以下是实现两个折线图共用 X 轴并合并 Tooltip 功能的示例代码：

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

var option = {
    xAxis: {
        axisLabel: {
            interval: 0
        }
    },
    tooltip: {
        showContent: true
    },
    series: [{
        type: 'line',
        data: [1, 2, 3, 4, 5],
        name: '折线图 1'
    }, {
        type: 'line',
        data: [6, 7, 8, 9, 10],
        name: '折线图 2'
    }]
};

myChart.setOption(option);