echarts 饼图hover放大效果
时间: 2023-07-13 20:35:37 浏览: 144
要实现ECharts饼图hover放大效果,可以使用ECharts的emphasis属性,对饼图的hover状态进行定制化设置。具体实现方法如下:
1. 在series中添加emphasis属性,设置itemStyle的emphasis属性,这里可以设置hover时的颜色、阴影、边框等样式。
```
series: [{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
borderColor: '#fff',
borderWidth: 2
}
}
}]
```
2. 在tooltip中添加extraCssText属性,设置transform的scale值,这里可以设置hover时的放大倍数。
```
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
extraCssText: 'transform: scale(1.2);'
},
```
综上所述,以上代码即可实现ECharts饼图hover放大效果。当鼠标移动到饼图时,会出现阴影和边框,同时会放大1.2倍。具体效果可参考以下示例代码:
```
option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
extraCssText: 'transform: scale(1.2);'
},
series: [{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
borderColor: '#fff',
borderWidth: 2
}
}
}]
};
```