Echart统计图异步获取json数据

通过Echarts官方下载Echarts.js文件
引用:<script src="echarts.js"></script>

//json数据
{
  "code":"200","data":[{
   "name":"xx店铺",
   "sales_size":200
},{
   "name":"aa店铺",
   "sales_size":300
},{
   "name":"bb店铺",
   "sales_size":400
}]
}
<div id="sales_report_chart"></div>
<script>
//销量统计图
var sales_report_chart= echarts.init(document.getElementById('sales_report_chart'));
        var option = {
            title: {
                text: '销售统计'
            },
            tooltip: {},
            legend: {
                data:['销售统计']
            },
		    toolbox:
		    {
		        show:true,
		        feature:
		        {
		            dataView:{show:true},//显示数据视图
		            restore:{},//显示重载按钮
		            saveAsImage : {show: true},//显示下载按钮
		        }
		    },
            xAxis: {
                name:'销售统计',
                data: []
            },
            yAxis: {},
            series: [{
                name:'销售金额:元',
                type:'bar',
                data:[],
            }]
        };
  sales_report_chart.showLoading();//echart图加载
  //ajax请求远程数据 
  jQuery.ajax({
    type : "POST",
    async : true,
    url : "../table_after_statistics.json",//api
    dataType:"json",
    success:function(result) {
        //接收json数据
        var data=result.data;
        if(data)
        {
           sales_report_chart.hideLoading();
            //店铺名称
            var name=[];
            //销售量
            var price=[];
             jQuery.each(data,function(index,obj){//遍历json中的相关字段
                 //销售日期将数据中的字符串拼接成json数组
                 name.push(obj['name']);
                 //销售量
                 price.push(obj['price']);
                 
             });
               sales_report_chart.setOption({
                 xAxis:{  
                     data:name
                 },
                 series:[
                 {  
                     data:price
                 }]    
             });
        }           
   },
    error : function(errorMsg) {
      //请求失败时执行该函数
      alert("请求数据失败!");
      sales_report_chart.hideLoading();
    }
}); 
sales_report_chart.setOption(option);
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值