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

 时间:2026-02-15 23:09:48

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方法
  • 热门搜索
    尼康相机怎么样 如何保养子宫 win7怎么安装打印机 怎么修改群名片 怎么快速的减肥 手机怎么做系统 维盟路由器 链家中介怎么样 巴宝莉手表怎么样 怎么看自己电脑的ip