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方法
  • 热门搜索
    脚垫怎么治 电脑ip地址怎么查 营业利润怎么算 电脑加密怎么设置 你怎么舍得我难过歌词 怎么治疗打嗝 爱字怎么写 微信怎么加人快又多 肾结石怎么排出 怎么看手机型号