$(function(){
var xlm = {
arr : [],
init : function(){
//ajax 调用
$.ajax({
type:"GET",
url:'1.json',
dataType:"json",
success:function(datas){
$.each(datas.data,function(i,n){
console.log(datas.data[i].title)
})
}
});
}
};
xlm.init();
//图形
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: []
},
series: [{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
if(option && typeof option === "object") {
myChart.setOption(option, true);
}
})
1.json值
{
"code": 0,
"msg": "OK",
"data": [
{
"title": "a",
"value": "72"
},
{
"title": "b",
"value": "11"
},
{
"title": "c",
"value": "1"
},
{
"title": "d",
"value": "4"
},
{
"title": "e",
"value": "6"
},
{
"title": "f",
"value": "0"
},
{
"title": "g",
"value": "3"
},
{
"title": "h",
"value": "3"
}
]
}
var obj = new Array();
var xObj = new Array();
for(var a of data){
xObj.push = a.title;
obj.push = a.value;
}
然后在option里面
x轴的 data:xObj,
数据 data:obj,
ajax 语句如果用默认的异步的话,那么需要将 echarts 绘图的代码放在回调函数中。
ajax 响应的数据如果是标准的 echarts 图数据,可以直接将结果赋值给 echarts 的 series 属性,都在按规则手动转换。
将后端返回的json数据封装成echarts中 series的data要求的数据结构,然后将值赋给这个data就可以了。 option.series.data=parseResult(data);
定义一个parseResult方法,解析返回的json数据。echarts图表只要按照要显示的效果填充数据就可以的,官方有很多示例,示例里面有对应的格式
显示的效果。之前不是声明了一个option吗,在myChart.setOption(option, true)之前把数据给到data就可以了