手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

echarts饼图如何自定义格式化扇区文字与百分比

时间:2024-10-14 00:18:51

1、打开任一浏览器,进入echarts官网的实例界面,点击左侧的饼图菜单,再点击右边的【Referer of a website】饼图实例

echarts饼图如何自定义格式化扇区文字与百分比

2、打开饼图实例后,可以看到左侧是配置项,右侧是图形实例。将鼠标移到右侧图形上,就可以看到提示信息中已经有数字,还有百分比了,只是扇区的文字没有数字和百分比

echarts饼图如何自定义格式化扇区文字与百分比

3、仔细观察左侧的配置项,你会发现,series范围内的data数据中,并没有提供百分比的值

echarts饼图如何自定义格式化扇区文字与百分比

4、那么,提示信息中的百分比是如何出现的呢?烂瘀佐栾这个时候就需要关注option配置项中的tooltip范围中的formatter信息,从这里可以看到,这个地方将提示信息格式化显示了,这里带上了百分号

echarts饼图如何自定义格式化扇区文字与百分比

5、如果要格式化扇区文字,是不是也可以参考tooltip中的格式化方法呢?在series的data前面添加如下的信息,formatter后面的内容完全使用tooltip中的formatter内容: label: { normal: { show: true, formatter: "{a} <br/>{b} : {c} ({d}%)" } }

echarts饼图如何自定义格式化扇区文字与百分比

6、此时,观察右侧的图形,可以看到扇区的百分比已经有了,只不过换行符没有正常显示

echarts饼图如何自定义格式化扇区文字与百分比

7、修改第五步中的换行符就可以正常显示了,而且,想要自定义内容,都可以在formatter中填写

echarts饼图如何自定义格式化扇区文字与百分比
© 手抄报圈