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

echarts饼图若何自界说格局化扇区的显示文字 , 显示的数字主动加上百分比?是否需要在数据源入彀算好百分比呢?

需要这些哦
echarts
方式/
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【echarts饼图如何自定义格式化扇区文字与百分比】点窜第五步中的换行符就可以正常显示了 , 并且 , 想要自界说内容 , 都可以在formatter中填写

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

文章插图


以上内容就是echarts饼图如何自定义格式化扇区文字与百分比的内容啦 , 希望对你有所帮助哦!

    推荐阅读