Echarts data 遍历

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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

缘不易

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值