echarts饼图怎么添加高光
时间: 2025-02-01 20:09:47 浏览: 30
### 如何在 ECharts 饼图中实现高光显示
为了实现在 ECharts 中对饼图特定扇区的高亮展示,可以利用 `emphasis` 属性来设置当鼠标悬停于某部分时所应用的效果[^1]。
对于希望默认即处于被强调状态的部分,则可以通过配置项中的 `selectedMode` 和 `selectedOffset` 来达成目的。下面给出一段简单的 JavaScript 实现代码用于创建一个具有预选中(也就是常说的“高光”)功能的饼状图表:
```javascript
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: [
{
text: 'ECharts Pie Chart with Highlight',
left: 'center'
}
],
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{value: 1048, name: 'Search Engine'},
{value: 735, name: 'Direct', selected: true}, // 设置此条目为初始选中态
{value: 580, name: 'Email'},
{value: 484, name: 'Union Ads'},
{value: 300, name: 'Video Ads'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
selectedMode: 'single' // 单选模式下点击其他区域会取消当前的选择
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
```
上述脚本定义了一个名为 "Direct" 的数据点作为初始化状态下就被突出显示出来的元素;同时设置了 `series.emphasis.itemStyle` 对象来自定义悬浮样式,包括阴影效果等视觉增强特性[^2]。
阅读全文
相关推荐













