在echarts中如何在环形饼图的中心显示合计总数值,方法有哪些,范例,各字段的含义与作用
时间: 2024-10-13 11:13:58 浏览: 105
echarts实现3D环装饼图带引导线效果
在ECharts中创建环形饼图并在其中显示合计总数值,可以利用`tooltip`配置和`series`内的特定属性。以下是一个基本的示例,展示了如何设置:
```javascript
option = {
tooltip: {
trigger: 'item', // 设置提示框触发方式为点击数据项
axisPointer: { // 引擎指示器
type: 'shadow' // 默认为直线指示器,这里是阴影效果
},
formatter: function(param) { // 定义提示框的内容格式
var total = param.series.data.reduce((sum, item) => sum + item.value, 0); // 计算总和
return `${param.series.name}: ${param.name}<br/>value: ${param.value} (${(param.value / total * 100).toFixed(2)}%)<br/>Total: ${total}`;
}
},
series: [
{
name: '总和',
type: 'pie', // 环形饼图
radius: '55%', // 内径半径占容器宽高的比例
center: ['50%', '60%'], // 图表圆心位置
data: [ // 数据集,包含name和value属性
{ value: 总数, name: '总计' }, // 假设总数已知
{ value: 分割后的各项数据... }, // 具体数据项
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
```
**各字段含义与作用:**
1. `trigger: 'item'`: 指定当鼠标悬停在数据项上时显示提示信息。
2. `axisPointer`: 控制提示框箭头的样式,这里使用的是阴影效果。
3. `formatter`: 自定义提示框的数据显示格式,包括了每个数据项的名称、值以及与总和的比例。
4. `type: 'pie'`: 确定series的类型为饼状图。
5. `radius` 和 `center`: 分别设置了饼图的大小和圆心位置。
6. `data`: 各项数据项,包括名称(name)和数值(value),最后一个数据项表示总的合计。
7. `itemStyle` 里的 `emphasis` 用于高亮显示选中的数据项。
阅读全文