echarts 中graphic 使用formatter的案例
时间: 2023-06-23 09:56:09 浏览: 199
echarts使用示例
以下是一个ECharts Graphic Formatter的示例代码,可以实现在饼图中添加自定义的文本标签:
```javascript
option = {
series: [{
type: 'pie',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
graphic: {
type: 'text',
left: 'center',
top: 'center',
style: {
fill: '#000',
text: '总计:\n{a|310}',
rich: {
a: {
fontSize: 18,
fontWeight: 'bold',
lineHeight: 28
}
}
},
formatter: function (params) {
return '总计:\n' + params.value;
}
}
}]
};
```
在这个示例中,我们通过`graphic`属性定义了一个文本类型的图形,并通过`style`属性设置了文本的颜色、内容和格式。在`style`属性中,我们使用了ECharts的富文本语法,通过`rich`属性定义了名为`a`的富文本样式。在`formatter`属性中,我们使用了一个自定义的函数来动态生成文本内容,其中`params`参数包含了当前图形的相关信息,如图形的位置、大小、数值等。通过这些设置,我们可以在饼图中添加自定义的文本标签,增强数据的可读性和可视化效果。
阅读全文