echarts饼图怎么实现在中心添加一行文字,文字显示不同的颜色
时间: 2024-10-19 18:08:57 浏览: 90
ECharts多行文字两端对齐饼图.zip
在ECharts中,要在饼图的中心区域添加一行文字,并且每个字的颜色不同,可以利用`title`属性和自定义渲染函数`tooltip formatter`。首先,你需要设置标题(`title`),然后在`formatter`中获取当前数据项的信息并控制文本和颜色。
以下是一个简单的示例:
```javascript
// 创建饼图实例
var myChart = echarts.init(document.getElementById('main'));
// 配置选项
var option = {
title: { // 设置标题
text: '我的标题', // 中心的文字内容
position: 'center', // 文本位置为中心
rich: { // 使用rich对象处理富文本
centerText: { // 内部的中心文字
color: 'red', // 颜色,这里设置为红色
fontSize: 18,
align: 'center', // 文字居中对齐
},
}
},
tooltip: {
trigger: 'item',
formatter: function(params) { // 自定义提示框格式化
return '<span style="color:' + params.color + '">' + params.name + '</span>: ' + params.value + '%';
},
},
series: [{
type: 'pie',
data: yourDataArray, // 你的数据数组
label: {
normal: {
show: true, // 显示标签
position: 'inner', // 标签位于内部
}
},
emphasis: {
itemStyle: {
shadowBlur: 10, // 阴影模糊程度
}
}
}]
};
// 绑定数据并展示图表
myChart.setOption(option);
```
在这个例子中,`rich.centerText`用于设置中心文本样式,`tooltip.formatter`则会在鼠标悬停在各个区块时显示带颜色的文字。
阅读全文