正文

轻松掌握ECharts：如何实现两个饼状图联动展示，数据一目了然

/0 浏览量
0721

在数据可视化领域，ECharts 是一款功能强大、易于使用的 JavaScript 图表库。它可以帮助我们轻松地将数据以图表的形式展示出来，让复杂的数据变得直观易懂。今天，我们就来探讨如何使用 ECharts 实现两个饼状图的联动展示，让数据一目了然。

一、ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以用于在网页中生成各种图表。它具有以下特点：

  • 丰富的图表类型：包括折线图、柱状图、饼图、散点图、地图等。
  • 高度可定制：支持自定义颜色、字体、标签等。
  • 响应式设计：支持响应式布局，适应不同屏幕尺寸。
  • 丰富的交互功能：支持鼠标悬停、点击等交互操作。

二、两个饼状图联动展示的实现步骤

1. 准备工作

首先，确保你的项目中已经引入了 ECharts 库。可以通过以下方式引入：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

2. 创建 HTML 结构

在 HTML 文件中，创建一个用于展示图表的容器：

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

3. 初始化 ECharts 实例

在 JavaScript 中，初始化 ECharts 实例并设置图表的配置项：

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

4. 设置图表配置项

接下来，设置两个饼状图的配置项。这里以两个饼状图分别展示不同维度的数据为例：

var option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '维度一',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '类别 A'},
                {value: 735, name: '类别 B'},
                {value: 580, name: '类别 C'},
                {value: 484, name: '类别 D'},
                {value: 300, name: '类别 E'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        {
            name: '维度二',
            type: 'pie',
            radius: ['40%', '50%'],
            center: ['75%', '50%'],
            data: [
                {value: 1048, name: '类别 A'},
                {value: 735, name: '类别 B'},
                {value: 580, name: '类别 C'},
                {value: 484, name: '类别 D'},
                {value: 300, name: '类别 E'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

5. 设置联动效果

为了让两个饼状图联动，我们需要设置它们的 seriesIndex 属性，使其指向同一维度：

option.series[0].seriesIndex = 1;
option.series[1].seriesIndex = 0;

6. 渲染图表

最后，使用 setOption 方法将配置项应用到 ECharts 实例上：

myChart.setOption(option);

三、总结

通过以上步骤，我们可以轻松地使用 ECharts 实现两个饼状图的联动展示。在实际应用中，可以根据具体需求调整图表的样式、颜色、数据等。希望这篇文章能帮助你更好地掌握 ECharts，将数据可视化得更加生动形象。

-- 展开阅读全文 --