【echart】饼图 legend tooltip格式化比例为0不显示

格式化legend和tooltip

饼图

实现效果

/**
* 关键点：
* 1、格式化图例，显示对应饼图占比
* 2、格式化提示框，添加数量单位
* 3、占比为0的数据不显示在图表上
*/

// data写在图形配置项外面，legend和series就都可以获取的到
data =  [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 10, name: 'Video Ads' },
        { value: 20, name: 'mdeo Ads' },
        { value: 10, name: 'myjkdfkVideo Ads' },
        { value:5, name: 'jd05768 Ads' }
      ],

option = {
  // 提示框
  tooltip: {
    // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
    trigger: 'item',
    // '{a} <br/>{b}: {d}' 这种格式化没有小圆点
    // formatter: '{a} <br/>{b}: {d}',
    // 自定义
    formatter: function (params) {
      console.log('params', params)
       let result = '';
       result = params.marker + params.name + ': ' + params.value + '条'
       return result
    },
    // 设置提示框的边框、背景色、文字颜色
    borderColor:"#ccc",
    backgroundColor:"rgba(0,0,0,0.5)",
    textStyle:{
      color:'#fff'
    }
  },
  legend: {
    top: '5%',
    left: 'center',
    formatter: function(name){
          // 打印出来的name：Search Engine Direct Email Union Ads Video Ads
          console.log('name', name)
          var total = 0;
          var target;
          // 因为把初始数据进行了加工，调用方法获取下加工后的数据
          newdata = getsData(data)
          console.log('处理过的数据', newdata)
          for (var i = 0, l = newdata.length; i < l; i++) {
          total += newdata[i].value;
          if (newdata[i].name == name) {
              target = newdata[i].value;
              }
          }
          // rich格式设置图例样式myStyle
          return '{myStyle|' + name  +  Math.round((target / total) * 100) + '%' + '}';
      },
  },
  // 设置echart图表颜色
  color:['#45b97c','#6950a1','#d93a49','yellow','red','bule'],
  textStyle: {
        rich: {
          myStyle: {
            align: 'left',
            width:120,
            // textStyle一定要加上backgroundColor: "transparent", 不加会出现legend对不齐的情况
            backgroundColor: "transparent", 
          },
        },
      },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      // 饼图内半径、外半径
      radius: ['30%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        // 不在扇形中心显示图表名称
        show: false,
        position: 'center',
      },
      // 高亮的图形样式和标签样式
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      // 调用自己写的方法，去掉
      data:getsData(data)
    }
  ]
};
// getsData方法写在option上面就报错找不到getsData方法，放在option下面才能正常显示数据
function getsData(_rowData){
    var rowData=JSON.parse(JSON.stringify(_rowData))
    var sum=rowData.reduce(function(o,v,i){
        o+=parseFloat(v.value);
        return o;
    },0)
    if(isNaN(sum)||sum==0){return []}
    rowData.sort(function(a,b){
        return a.value-b.value;
    }).reverse();
    var val=0;//其他的相加
    for(var i=rowData.length-1;i>0;i--){
        var _row=rowData[i],sub;
        sub=_row.value/sum;
        //如果为0或者小于.05的比例就将此元素移除
        if(sub<0.005){
            rowData.length=i;//去掉最后一个
            val+=parseFloat(_row.value);
        }
    }
    // //在后面追加一个其他的项
    if(val>0){
     rowData.push({value: val, name:'其他'})
    }
    return rowData;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133