echarts 弹出放大_echarts 如何让饼图hover放大效果一直显示
时间: 2023-08-15 20:07:13 浏览: 191
要让饼图hover放大效果一直显示,可以使用echarts中的emphasis配置项来实现:
1. 在series中添加emphasis配置项,设置emphasis为true,表示开启强调样式。
2. 在emphasis中添加itemStyle配置项,设置itemStyle.normal为原始样式,itemStyle.emphasis为强调样式。
3. 在emphasis中添加label配置项,设置label.normal为原始样式,label.emphasis为强调样式。
下面是一个示例代码:
```
option = {
series: [{
type: 'pie',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
emphasis: {
itemStyle: {
normal: {},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {},
emphasis: {
fontSize: '20'
}
}
}
}]
};
```
在上面的代码中,当鼠标悬停在饼图上时,会出现放大的阴影效果和字体变大的效果,这个效果会一直保持直到鼠标移开。
阅读全文