正文

如何用 ECharts 实现同一 y 轴展示多个图表，轻松比较数据变化

/0 浏览量
0515

在数据可视化领域，ECharts 是一款功能强大、灵活多样的图表库。它允许开发者通过丰富的配置项创建各种图表，并提供了在同一 y 轴上展示多个图表的功能，使得数据比较变得直观而便捷。以下是如何使用 ECharts 实现这一功能的详细步骤和说明。

1. 准备工作

首先，确保你的项目中已经引入了 ECharts。你可以从 ECharts 的官方网站下载或通过 CDN 引入。

<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

2. 基础配置

在 ECharts 中，要在同一 y 轴上展示多个图表，我们需要对图表的配置对象进行一些特别的设置。

2.1 基本配置

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

var option = {
    title: {
        text: '同一 y 轴上的多个图表'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2']
    },
    xAxis: {
        data: ["A", "B", "C", "D", "E", "F", "G"]
    },
    yAxis: {},
    series: [
        {
            name: '系列1',
            type: 'line',
            data: [10, 20, 30, 40, 50, 60, 70]
        },
        {
            name: '系列2',
            type: 'line',
            data: [50, 60, 70, 80, 90, 100, 110]
        }
    ]
};

myChart.setOption(option);

2.2 重要配置项说明

  • xAxis.data: 横坐标的标签数据。
  • series: 图表的系列列表。每个系列代表一个图表。
  • type: 图表类型，如 'line'、'bar'、'pie' 等。
  • data: 系列的数据。

3. 高级配置

为了更好地展示数据，你可能需要对图表进行一些高级配置，如调整线型、颜色、阴影等。

{
    // ...其他配置...
    series: [
        {
            name: '系列1',
            type: 'line',
            data: [10, 20, 30, 40, 50, 60, 70],
            smooth: true, // 平滑曲线
            itemStyle: {
                color: '#ff7f50' // 线条颜色
            }
        },
        {
            name: '系列2',
            type: 'line',
            data: [50, 60, 70, 80, 90, 100, 110],
            smooth: true,
            itemStyle: {
                color: '#87cefa' // 线条颜色
            }
        }
    ]
}

4. 总结

通过以上步骤，你可以在 ECharts 中轻松实现同一 y 轴展示多个图表。这种方式不仅便于数据比较，还可以通过不同的图表类型和样式，让你的可视化作品更加丰富多彩。希望这篇指南能帮助你更好地使用 ECharts。

-- 展开阅读全文 --