引言：ECharts 环图交互的重要性
在数据可视化领域，ECharts 作为一款功能强大的开源 JavaScript 图表库，以其丰富的图表类型和灵活的交互能力而广受欢迎。其中，环图（Donut Chart）作为饼图的一种变体，因其简洁美观、易于展示比例关系而被广泛应用于各类报表和仪表盘中。然而，静态的环图往往难以吸引用户的注意力，特别是在数据量较大或需要突出关键信息时。通过交互设计，如点击事件触发环形变宽效果，可以有效提升用户体验，实现视觉突出展示，帮助用户快速聚焦核心数据。
本文将深入探讨如何在 ECharts 中实现环图的点击交互，具体包括环形变宽效果的实现原理、代码示例、以及视觉突出的优化技巧。我们将从基础概念入手，逐步构建一个完整的交互式环图示例，确保内容详尽、逻辑清晰，并提供可直接运行的代码。无论你是 ECharts 新手还是有经验的开发者，都能从中获得实用指导。
ECharts 环图基础回顾
环图的基本概念
环图本质上是饼图的变形，通过在中心挖空形成环形结构，常用于展示分类数据的占比关系。相比饼图，环图的优势在于中心空间可用于放置标签或总计值，视觉上更简洁。在 ECharts 中，环图通过
pie
系列类型实现，只需设置
radius
属性为数组形式（如
[‘40%’, ‘70%’]
）即可定义内半径和外半径，形成环形。
例如，一个简单的环图配置如下：
// 基础环图示例
var chartDom = document.getElementById(‘main’);
var myChart = echarts.init(chartDom);
var option = {
tooltip: {
trigger: ‘item’
},
legend: {
top: ‘5%’,
left: ‘center’
},
series: [
{
name: ‘访问来源’,
type: ‘pie’,
radius: [‘40%’, ‘70%’], // 内半径40%，外半径70%，形成环形
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10, // 可选：添加圆角效果
borderColor: ‘#fff’,
borderWidth: 2
},
label: {
show: false,
position: ‘center’
},
emphasis: {
label: {
show: true,
fontSize: ’40’,
fontWeight: ‘bold’
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: ‘搜索引擎’ },
{ value: 735, name: ‘直接访问’ },
{ value: 580, name: ‘邮件营销’ },
{ value: 484, name: ‘联盟广告’ },
{ value: 300, name: ‘视频广告’ }
]
}
]
};
myChart.setOption(option);
这段代码创建了一个标准的环图，其中
radius
是关键：
[‘40%’, ‘70%’]
表示内半径占容器的 40%，外半径占 70%。
emphasis
部分定义了鼠标悬停时的高亮效果，但我们需要进一步扩展它以支持点击事件的环形变宽。
为什么需要交互：环形变宽与视觉突出
静态环图在数据密集时容易导致视觉疲劳。点击事件允许用户主动选择感兴趣的扇区，通过动态调整环的宽度（即增大外半径或减小内半径）来“放大”该扇区，同时应用颜色、阴影或标签突出显示。这不仅增强了互动性，还能引导用户关注关键数据，例如在电商仪表盘中突出高销量产品类别。
点击事件的实现原理
ECharts 提供了丰富的事件监听机制，通过
myChart.on(‘click’, callback)
可以捕获用户点击。事件回调函数接收一个参数
params
，包含被点击扇区的详细信息，如
dataIndex
（数据索引）、
name
（名称）和
value
（值）。
核心思路：动态更新 series
要实现环形变宽效果，我们需要在点击时：
捕获事件
：监听
click
事件。
识别扇区
：判断点击的是哪个数据项。
更新配置
：修改
series
的
radius
属性，使被点击扇区的环形变宽（例如，外半径增大到 80%，内半径减小到 30%），同时可选地调整其他扇区的宽度以形成对比。
视觉突出
：结合
itemStyle
（如颜色、阴影）和
label
（显示详细信息）来增强突出效果。
重绘图表
：使用
setOption
更新配置，ECharts 会自动动画过渡。
注意：ECharts 的
pie
系列不支持直接为单个扇区设置独立半径，但我们可以通过以下技巧模拟：
使用多个
series
（每个扇区一个），但这会复杂化代码。
更简单的方法：在点击时，更新整个
series
的
radius
，并结合
selected
状态或自定义动画来突出特定扇区。或者，使用 ECharts 的
graphic
组件添加自定义图形元素来“加宽”特定区域。
为了保持简单且高效，我们将采用更新
radius
和
itemStyle
的方法，并通过
selectedMode
启用选中状态来模拟变宽效果。如果需要更精细的单扇区控制，可以结合
emphasis
和
normal
状态切换。
潜在挑战与解决方案
动画平滑
：ECharts 默认支持
animationDuration
，确保变宽过程流畅。
多点击处理
：添加重置机制，避免多次点击导致环形过度变形。
兼容性
：确保代码在现代浏览器中运行，无特殊依赖。
实战代码：实现点击环形变宽与视觉突出
下面是一个完整的、可运行的示例。我们将构建一个环图，点击某个扇区时：
该扇区的外半径增大，内半径减小，形成“变宽”效果。
扇区颜色变亮，并添加阴影。
中心显示被点击扇区的详细信息。
其他扇区略微缩小，形成视觉对比。
HTML 结构
首先，准备一个容器：
JavaScript 实现
我们将逐步解释代码，并提供完整示例。
步骤 1: 初始化图表和基础配置
var chartDom = document.getElementById(‘main’);
var myChart = echarts.init(chartDom);
// 基础数据
var data = [
{ value: 1048, name: ‘搜索引擎’ },
{ value: 735, name: ‘直接访问’ },
{ value: 580, name: ‘邮件营销’ },
{ value: 484, name: ‘联盟广告’ },
{ value: 300, name: ‘视频广告’ }
];
// 基础 option
var option = {
tooltip: {
trigger: ‘item’,
formatter: ‘{b}: {c} ({d}%)’
},
legend: {
top: ‘5%’,
left: ‘center’
},
series: [
{
name: ‘访问来源’,
type: ‘pie’,
radius: [‘40%’, ‘70%’], // 默认环形宽度
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 5,
borderColor: ‘#fff’,
borderWidth: 2,
shadowBlur: 0, // 默认无阴影
shadowColor: ‘rgba(0, 0, 0, 0.5)’
},
label: {
show: false,
position: ‘center’
},
emphasis: {
scale: true, // 启用缩放强调
scaleSize: 10,
label: {
show: true,
fontSize: ’20’,
fontWeight: ‘bold’,
formatter: ‘{b}\n{c}’
}
},
labelLine: {
show: false
},
data: data,
// 启用选中模式，支持点击高亮
selectedMode: ‘single’,
selectedOffset: 10 // 选中时偏移，模拟变宽
}
],
// 中心文本，用于显示点击信息
graphic: [
{
type: ‘text’,
left: ‘center’,
top: ‘center’,
style: {
text: ‘点击扇区查看详情’,
fill: ‘#333’,
fontSize: 16,
fontWeight: ‘bold’
},
id: ‘centerText’
}
],
animationDuration: 500 // 动画时长
};
myChart.setOption(option);
解释
：
radius: [‘40%’, ‘70%’]
定义了默认环形。
selectedMode: ‘single’
允许单选，
selectedOffset: 10
在选中时让扇区向外偏移，模拟变宽。
graphic
用于在中心动态显示文本。
emphasis
处理悬停，但我们将在点击中覆盖它。
步骤 2: 添加点击事件监听
// 存储当前选中索引，用于重置
var selectedIndex = null;
// 点击事件处理
myChart.on(‘click’, function(params) {
if (params.componentType === ‘series’) {
var dataIndex = params.dataIndex;
var clickedData = data[dataIndex];
// 如果点击同一扇区，则重置
if (selectedIndex === dataIndex) {
resetChart();
return;
}
selectedIndex = dataIndex;
// 更新 series 配置：为被点击扇区“变宽”
// 由于 ECharts 不支持单扇区半径，我们通过更新整个 radius 并结合 selected 状态
// 更精细控制：使用 graphic 添加自定义“加宽”图形（模拟效果）
// 更新 option
var newOption = {
series: [
{
// 保持基础 radius，但通过 selected 状态突出
selected: {
// 仅选中当前索引
0: [dataIndex] // 系列 0 的选中数据索引
},
itemStyle: {
// 被点击扇区：变宽（通过 shadowBlur 模拟深度）
// 其他扇区：略微缩小（通过 opacity）
// 这里我们用一个技巧：动态调整 radius 为 [‘35%’, ‘75%’] 整体变宽，但结合 emphasis
}
}
],
graphic: [
{
type: ‘text’,
left: ‘center’,
top: ‘center’,
style: {
text: `${clickedData.name}\n${clickedData.value}\n占比: ${(clickedData.value / data.reduce((a,b)=>a+b.value,0) * 100).toFixed(1)}%`,
fill: ‘#000’,
fontSize: 18,
fontWeight: ‘bold’
},
id: ‘centerText’
}
]
};
// 为了实现真正的“环形变宽”，我们自定义一个更新函数
updateForClick(dataIndex, clickedData);
}
});
// 自定义更新函数：实现环形变宽和视觉突出
function updateForClick(index, item) {
// 计算总和
var total = data.reduce((a, b) => a + b.value, 0);
var percentage = (item.value / total * 100).toFixed(1);
// 更新 option：使用 graphic 绘制一个“加宽”的环形覆盖层（模拟效果）
// 同时更新 series 的 itemStyle
var newOption = {
series: [
{
data: data.map((d, i) => {
if (i === index) {
return {
…d,
itemStyle: {
color: ‘#ff6b6b’, // 突出颜色
shadowBlur: 20, // 阴影突出
shadowColor: ‘rgba(255, 107, 107, 0.8)’,
borderRadius: 10
},
label: {
show: true,
position: ‘outside’,
formatter: ‘{b}: {c}’
}
};
} else {
return {
…d,
itemStyle: {
opacity: 0.5 // 其他扇区变淡
}
};
}
}),
// 动态调整 radius：整体略微变宽，但通过 data 的 itemStyle 模拟单扇区加宽
radius: [‘35%’, ‘75%’], // 变宽效果
selectedMode: false // 禁用默认选中，使用自定义
}
],
graphic: [
{
type: ‘text’,
left: ‘center’,
top: ‘center’,
style: {
text: `${item.name}\n${item.value}\n占比: ${percentage}%`,
fill: ‘#333’,
fontSize: 18,
fontWeight: ‘bold’
},
id: ‘centerText’
}
]
};
myChart.setOption(newOption, true); // true 表示 notMerge，避免累积
}
// 重置函数
function resetChart() {
selectedIndex = null;
var resetOption = {
series: [
{
data: data,
radius: [‘40%’, ‘70%’],
itemStyle: {
color: null, // 重置颜色
shadowBlur: 0,
opacity: 1
},
label: {
show: false
}
}
],
graphic: [
{
type: ‘text’,
left: ‘center’,
top: ‘center’,
style: {
text: ‘点击扇区查看详情’,
fill: ‘#333’,
fontSize: 16,
fontWeight: ‘bold’
},
id: ‘centerText’
}
]
};
myChart.setOption(resetOption, true);
}
// 监听双击重置（可选）
myChart.on(‘dblclick’, resetChart);
代码详细说明
：
点击逻辑
：
myChart.on(‘click’, …)
捕获事件，检查
componentType
确保是系列数据。使用
dataIndex
识别扇区。
环形变宽
：通过
radius: [‘35%’, ‘75%’]
增大整体环宽，同时在
data
中为被点击项设置
itemStyle
（颜色、阴影），其他项设置
opacity: 0.5
模拟“缩小”对比。这创造出视觉上的“变宽突出”。
视觉突出
：
颜色与阴影
：被点击扇区变为红色 (
#ff6b6b
)，添加
shadowBlur: 20
制造发光效果。
标签
：为被点击扇区启用
label: { show: true, position: ‘outside’ }
显示名称和值。
中心文本
：使用
graphic
动态更新中心，显示详细信息，包括占比计算。
重置机制
：
resetChart()
恢复默认配置。双击也可重置，提升用户体验。
动画
：
animationDuration
确保平滑过渡。
setOption(…, true)
的
notMerge
参数防止配置冲突。
为什么这样设计
：ECharts 的
pie
系列不原生支持单扇区独立半径，因此我们结合
data
的
itemStyle
和整体
radius
调整来模拟效果。这比使用多个
series
更高效，且保持代码简洁。
运行与测试
将以上代码复制到 HTML 文件中，在浏览器打开。点击“搜索引擎”扇区，你会看到：
环形整体变宽（外半径从 70% 到 75%）。
该扇区变红、发光、显示标签。
中心显示详细信息。
其他扇区变淡。
再次点击同一扇区或双击重置。
高级优化与扩展
1. 多扇区支持与动画增强
如果需要支持多选，修改
selectedMode
为
‘multiple’
，并在
updateForClick
中累积选中索引。添加 CSS 动画或 ECharts 的
animationEasing
（如
‘elasticOut’
）使变宽更生动：
animationEasing: ‘elasticOut’,
animationDurationUpdate: 600
2. 响应式设计
在窗口大小变化时，调用
myChart.resize()
：
window.addEventListener(‘resize’, function() {
myChart.resize();
});
3. 性能考虑
对于大数据集（>100 项），避免频繁
setOption
。可以使用
update
方法仅更新变化的部分，或预计算总和以减少实时计算。
4. 与其他交互结合
悬停预览
：在
emphasis
中添加
scale
，让鼠标悬停时轻微放大。
数据下钻
：点击后加载新数据集，更新
series.data
。
导出功能
：结合
getDataURL
导出图表截图。
5. 常见问题排查
事件不触发
：确保
series
的
type: ‘pie’
，且点击在扇区内。
动画卡顿
：在低端设备上，减少
shadowBlur
值。
半径计算
：使用百分比而非固定值，确保响应式。
结论
通过 ECharts 的事件监听和动态配置更新，我们可以轻松实现环图的点击交互：环形变宽效果通过调整
radius
和
itemStyle
模拟，视觉突出则依赖颜色、阴影和标签。本文提供的代码是可直接使用的模板，你可以根据实际需求扩展，例如集成到 React/Vue 项目中。这种交互不仅提升了数据的可读性，还增强了用户的参与感。如果你有特定数据集或额外需求，欢迎进一步讨论！