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饼图如何自定义格式化扇区文字与百分比
  • css3过渡效果怎么用,怎样设置div的过渡效果
  • Android Studio怎么导入OkHttp
  • Navicat 如何设置外键约束
  • thinkphp如何在html页面输出数据库数据
  • PowerDesigner使用教程之-导出SQL方法
  • 热门搜索
    喝酒不醉的方法 葡萄干怎么洗 北京有什么好吃的 汽车打蜡的正确方法 什么方法可以祛斑 空调加氟方法 怎么打开u盘 鱼缸水浑浊怎么处理 去黑痣最有效的方法 香椿怎么做好吃