Echarts中option里一些数据是从后台拿到的,就需要遍历输出。我使用的是ajax去后台异步获取到值,然后通过each遍历结果,将结果放到数组里。最后放到data里。后台必须要用返回json格式。
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));//main是<div id="main" style="width: 600px;height:400px;"></div>的id
// 指定图表的配置项和数据
//用来存数据的数组
var res=[];
var option = {
title : {
text: '爱淘二手网站用户浏览记录实时统计',
subtext: '商品分类访问次数',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ${viewcatelogName}
//['闲置数码','校园代步','电器日用','图书教材','美妆衣物','运动棋牌','票券小物']
},
series : [
{
name: '访问次数',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data: res
/* [
{value:3350, name:'闲置数码'},
{value:3100, name:'校园代步'},
{value:2340, name:'电器日用'},
{value:1350, name:'图书教材'},
{value:1548, name:'美妆衣物'},
{value:1548, name:'运动棋牌'},
{value:1548, name:'票券小物'}
]*/,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//页面加载完毕时获取数据
$(function(){
$.ajax({
url:"路径",
dataType:"json",
type:"post",
success:function(data){
debugger
//把后台返回的数据给数组赋值
$.each(data,function(key,v){
res.push({
value:v.num,
name:v.name
});
})
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
})
})
</script>