ajax获取json数据并显示_ajax请求echarts圆饼图动态显示数据方法

在最近项目中有个需求是统计出所有文件占比并用圆饼图展示。后台提供接口返回数据是这样的：

返回的简单粗暴，key和value直接这样返回，前端接收。

在绘制饼状图时需要把这些数据动态加载出来。首先cdn引入echarts。

<script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>

//饼状图数据

var myChart = echarts.init(document.getElementById('ring'));

$.ajax({

url:'spaceComFile',

type:'post',

dataType:'json',

success:function(data){

console.log(data);

var option = {

tooltip : {

trigger : 'item',

// formatter : "{a} <br/>{b} : {c} ({d}%)"//默认是这种方式显示，也可以自定义

formatter: function(params) {

var res =params.seriesName+'<br/>'+params.name+':';

var num=parseInt(params.value / 1024);

var val=Number(num/1024).toFixed(2);

res+=val+'M'+'&nbsp'+params.percent+'%';

return res;

}

},

legend: {

orient: 'vertical',

left: '0', //图例距离左

y: 'center', //图例上下居中

formatter: function (params) {

/* for (var i = 0; i < option.series[0].data.length; i++) {

if (option.series[0].data[i].name == params) {

return params +":"+ option.series[0].data[i].value+"M";

}

}*/这种方法适用于有属性命名的数据

for(var key in data.result){

var num=parseInt(data.result[key]/ 1024);

var val=Number(num/1024).toFixed(2);

if (key== params) {

return params +":"+val+"M";

}

}

},

data:(function(){

var res=[];

for(var key in data.result){

res.push({

name:key

})

}

return res;

})(),

},

series : [

{

name : '文件管理',

type : 'pie',

data:(function(){

var res=[];

for(var key in data.result){

res.push({

name:key,

value:data.result[key]

})

}

return res;

})(),

itemStyle : {

emphasis : {

shadowBlur : 10,

shadowOffsetX : 0,

shadowColor : 'rgba(0, 0, 0, 0.5)'

}

},

center : [ '50%', '50%' ],

}

]

};

myChart.setOption(option);

}

});

最终效果如下：