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

青旅半醒 2022-05-29 09:56 600阅读 0赞

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

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

在http://blog.csdn.net/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)'
                    }
                }
            }
        ]
    };

结果如下图：

![Image 1][]

![Image 1][]

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，600人围观）

还没有评论，来说两句吧...

相关阅读

相关使用echarts画树图，并设置节点为不同的图片

先看一下效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubm

刺骨的言语ヽ痛彻心扉/ 2023年06月23日 07:57/ 0 赞/ 175 阅读

相关 Echarts 之pie 环形图

实现步骤：一、引入Echars > npm install echarts 二、main.js中导入 // 图表--插件 import e

朴灿烈づ我的快乐病毒、/ 2023年01月19日 11:50/ 0 赞/ 120 阅读

相关手把手教你用ECharts画饼图和环形图

![format_png][] 导读：饼图也是一种常用的基本图表，主要用来展示各项的比重。作者：王大伟来源：大数据DT（ID：hzdashuju）下面制作一

蔚落/ 2023年01月12日 04:27/ 0 赞/ 312 阅读

相关用echarts画的百分比圆

用echarts画的百分比圆   <view class=

待我称王封你为后i/ 2022年12月20日 03:26/ 0 赞/ 335 阅读

相关 vue2+ts+vue-echarts 画环形图

注意一下各位看清一下，是`vue-echarts`呀。这里是个坑，因为还是有v-echarts、vue-echarts-ts 等等，他们竟然不是一个东西。使用过程

小咪咪/ 2022年11月12日 08:25/ 0 赞/ 452 阅读

相关 chart.js环形图插件

[下载地址][Link 1]简单的chart.js统计环形图表插件调用示例，这个是环形图Demo。chart.js是一款很强大的图表插件，有各种各样的统计图表。 ![1630

妖狐艹你老母/ 2022年09月10日 03:28/ 0 赞/ 147 阅读

相关 echarts-环形图

![这里写图片描述][SouthEast] <!DOCTYPE html> <html lang="en"> <head> <meta

我不是女神ヾ/ 2022年06月08日 09:41/ 0 赞/ 394 阅读

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

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

青旅半醒/ 2022年05月29日 09:56/ 0 赞/ 601 阅读

相关 ECharts之横向百分比柱状图

效果图 ![在这里插入图片描述][20191015094349429.gif] 背景图片 ![20190725170845879.png][] 下载EChar

古城微笑少年丶/ 2021年08月13日 12:40/ 0 赞/ 1498 阅读

相关 echart双环形图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIw

àì夳堔傛蜴生んèń/ 2021年07月26日 23:24/ 0 赞/ 1367 阅读