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'+' '+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);
}
});
最终效果如下：
