首先找一个echarts实例
然后自己搭建环境运行
var lineChart = echarts.init(document.getElementById('event_pandect'),'macarons');(添加)
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:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
lineChart.setOption(linechart,true); (添加)
这时候需要ajax从后端获取数据填充到图标中,我最开始的想法是直接将ajax嵌入到echarts代码中,然后在success中再将返回值data写入到echarts需要填充数据处。实践证明这样是不行的,解决:
我先贴出正确运行源码,然后讲下修改的地方。
var option = {
title : {
text: '二级类型故障',
subtext: '第'+week_num+'周数据',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
}
};
var names=[];
$.ajax({
type : "post",
async : true,
url : "/statistic/getNowEvents",
data :{dept_id:dept_id,cmp_id:cmp_id,week_num:week_num},
dataType : "json", //返回数据形式为json
success : function(data) {
for(var i=0;i<data.length;i++){
names.push(data[i].name); //挨个取出类别并填入类别数组
}
pieChart.hideLoading(); //隐藏加载动画
pieChart.setOption({ //加载数据图表
legend: {
orient: 'vertical',
left: 'left',
data:names
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
},
error : function(errorMsg) {
}
});
pieChart.setOption(option);
下方是需要动态添加数据的地方,将其抽离option中,然后使用后面代码进行包裹
然后调整前面代码:
最后的代码结构为:标记处为重点
+