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

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。这里 完整代码链接供参考吧。