饼图echarts series.label.formatter自定义html
时间: 2024-11-29 20:37:22 浏览: 28
ECharts是一款常用的JavaScript数据可视化库,其中饼图(pie chart)的series.label.formatter属性允许你对标签内容进行自定义格式化。这个formatter是一个函数,接收当前数据点的信息作为参数,你可以返回HTML字符串来定制显示的内容。
例如,如果你想在饼图每个扇区上添加百分比和文字描述,可以这样做:
```javascript
option = {
series: [{
name: '数据',
type: 'pie',
data: [
{ value: 335, name: 'A' },
{ value: 310, name: 'B' },
{ value: 234, name: 'C' },
{ value: 135, name: 'D' },
{ value: 234, name: 'E' }
],
label: {
formatter: function (params) {
return '<span style="color: #fff;">' + params.name + '</span><br/>' +
'<span style="font-size: 12px;">' + Math.round(params.percent * 100) + '%</span>';
}
}
}]
};
```
在这个例子中,`formatter`函数将数据名称和对应的百分比转换成了HTML格式的文本,显示在饼图的标签上。
阅读全文