使用echarts插件画半环形图，并保证百分比之和为100%

最新推荐文章于 2025-07-07 10:39:44 发布

原创最新推荐文章于 2025-07-07 10:39:44 发布 · 1.3w 阅读

5 ·

CC 4.0 BY-SA版权

Echarts 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种通过修改formatter方法实现数据百分比正确显示在半环状图上的方法。通过对formatter函数进行调整，实现了百分比数值的准确计算与显示。此外，还详细介绍了具体的代码实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有需求将使用半环状图展示数据百分比，搜索后发现大部分改成半环状图后，百分比相加为50%，本来考虑修改自带的js文件中formatter方法，但是因为找不到怎么改。

后搜索文章http://blog.youkuaiyun.com/aa97257540/article/details/52101652的半环状图后，有了修改formatter方法的想法。

在http://blog.youkuaiyun.com/yanmh007/article/details/72235253文章的基础上，对formatter方法进行了修改。

修改的代码为：

        formatter: function(param){
                    var str = '<style>td{padding:5px;}</style><table>';
                     var c = (param['value']/a)*100;
                    c = c.toFixed(2);  
                   str  = str + c + "%";
                    return str 
        }

全部代码为：

var data=[{value:335, name:'直接访问'},

		  {value:310, name:'邮件营销'},]


//计算data中value的总和
var a=0;
for(var i=0; i<data.length; i++)
{
  a+=data[i].value;
}

//添加新的元素到data中，并设置其颜色样式为白色

data.push({value:a, name:'__other', itemStyle:{normal:{color:'rgba(0,0,0,0)'}}});
console.log(data);
option = {

    tooltip : {
        trigger: 'item',
        formatter: function(param){
                    var str = '<style>td{padding:5px;}</style><table>';
                     var c = (param['value']/a)*100;
                    c = c.toFixed(2);  
                   str  = str + c + "%";
                    return str 
        }
      
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            startAngle:180,
            radius :  ['50%', '60%'],
            center: ['50%', '60%'],
            data:data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

结果如下图：