关于Echarts的formatter函数的自定义（饼图为例）

来源：互联网发布：上海软件定制开发编辑：程序博客网时间：2024/06/07 10:37

1，最终效果图如下：

2，json文件：

{  "data": [           {          "free_space": 2.94,          "sum_blocks": 3080,          "sum_space": 313.13,          "tablespace_name": "EXAMPLE",          "used_rate": 99.06,          "used_space": 310.19          },          {          "free_space": 9501,          "sum_blocks": 2621440,          "sum_space": 20480,          "tablespace_name": "SLOB",          "used_rate": 12.11,          "used_space": 10979          },          {          "free_space": 1205,          "sum_blocks": 5445655,          "sum_space": 15353,          "tablespace_name": "teaB",          "used_rate": 53.61,          "used_space": 13959          },          {          "free_space": 6225,          "sum_blocks": 262789,          "sum_space": 35888,          "tablespace_name": "hahahaha",          "used_rate": 2.61,          "used_space": 16879          },          {          "free_space": 7582,          "sum_blocks": 94720,          "sum_space": 740,          "tablespace_name": "SYSAUX",          "used_rate": 94.68,          "used_space": 700.62          },          {          "free_space": 6684,          "sum_blocks": 85647,          "sum_space": 510,          "tablespace_name": "DFHTGJ",          "used_rate": 85.28,          "used_space": 582.14          },          {          "free_space": 2855,          "sum_blocks": 62487,          "sum_space": 380,          "tablespace_name": "HIASD",          "used_rate": 68.24,          "used_space": 358.56          }  ],  "status": "ok"  }

3，传入的data进行处理

function analysis(data) {    var end_obj = [];    for (var i in data) {        var obj = {name: '', datas: []};        obj.name = data[i].tablespace_name;        obj.value = data[i]['used_rate'];        obj.datas[0] = data[i]['free_space'];        obj.datas[1] = data[i]['sum_blocks'];        obj.datas[2] = data[i]['sum_space'];        obj.datas[3] = data[i]['used_space'];        end_obj.push(obj);    }    return end_obj;}

4，formatter处理

tooltip: {                   trigger: 'item',   formatter: function(a){                        return ('tablespace_name:'+a['name']                               +'</br>used_rate(%):'+a['value']                               +'<br>free_space:'+a['data'].datas[0]                               +'<br>sum_blocks:'+a['data'].datas[1]                               +'<br>sum_space:'+a['data'].datas[2]                               +'<br>used_space:'+a['data'].datas[3]);                              }                },

5，标识位置

legend: {   orient: 'vertical',   left: 'left',   x : 'left',   y : 'top'   },

6，颜色和位置

series: [                    {                        name: '数据来源',                        type:'pie',radius : '55%',center: ['50%', '60%'],                        data:[],                        itemStyle: {                            normal: {                                label:{show:true,position : 'insideRight',formatter:function(a){return ('used_rate(%):'+a['value']);  }},labelLine:{show:true,length: 10}                            },emphasis: {   show : true,               position : 'center',               textStyle : {fontSize : '18',fontWeight : 'bold'},   shadowBlur: 10,   shadowOffsetX: 0,   shadowColor: 'rgba(0, 0, 0, 0.5)'   }                        }                    }                ],color: ['rgb(254,67,101)','rgb(252,157,154)','rgb(249,205,173)','rgb(200,200,169)','rgb(131,175,155)']            };

7，函数执行

 $.getJSON("index.json").done(function(res){          var data = res.data;              var name = [];              for(i in data){                name.push(data[i].tablespace_name);              }          option.series[0].data = analysis(res.data);          option.legend.data = name;          db_chart.setOption(option);        });

这里参考了另一位同学的柱状图范例：http://blog.csdn.net/qingfeng_or_qinfeng/article/details/53665267。这里完整代码链接供参考吧。

阅读全文

0 0