echarts-在现实标题中显示百分比

最新推荐文章于 2023-11-20 16:14:49 发布

转载最新推荐文章于 2023-11-20 16:14:49 发布 · 548 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hwaggLee/p/5903383.html

文章标签：

#javascript #ViewUI

本文介绍如何在ECharts中设置饼图的百分比显示，通过调整代码中的formatter参数，实现在图表中直观地展示各部分所占比例。

如图：需要在标题显示所占百分比

使用方式：途中标记部分

    series : [{
                name: '类型',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:valuearray,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    },
                    normal:{ 
                        label:{ 
                            show: true, 
                            formatter: '{b} : {c} ({d}%)' 
                        }, 
                        labelLine :{show:true} 
                    } 
                }
            }
        ]