echarts环形图中间默认显示数值移入图例时,中间显示对应的数据,移出时还原总数
时间: 2024-09-20 15:11:20 浏览: 45
ECharts是一个强大的JavaScript数据可视化库,其环形图(Polar Chart)可以创建饼状图或者仪表盘效果。如果你想在环形图中心显示数值,并且当用户鼠标移到图例上时,中间显示对应分类的具体数值,而在鼠标移开时又显示出总和,你可以通过设置`series`配置项的`data`部分以及`label`属性来实现。
首先,在`data`数组中存储每个分段的数据,例如:
```json
{
series: [
{
type: 'polar',
radius: '55%', // 设置半径范围
center: ['50%', '60%'], // 中心位置
data: [
{ value: 335, name: '销售部' },
{ value: 310, name: '市场部' },
{ value: 234, name: '技术部' },
{ value: 135, name: '产品部' }
],
label: { // 标签配置
show: true,
position: 'center',
formatter: function (params) { // 格式化函数,动态显示值
return params.data.name + ':' + params.value;
}
},
tooltip: { // 鼠标悬停提示框
trigger: 'item', // 指定触发类型为点击事件
formatter: '{a} <br/>{b}: {c} ({d}%)'
}
}
]
}
```
当鼠标移动到某个扇区时,ECharts会根据`formatter`函数显示对应的数值;如果鼠标离开,tooltip会自动关闭,图表恢复到默认显示总和的状态。
阅读全文