echart与ajax 获取动态数据-优快云博客

本文详细介绍如何使用ECharts结合Ajax动态加载数据，实现每月订单交易记录的图表展示。通过后端接口获取订单数据，包括所有订单、待付款、已付款状态，并在ECharts中以柱状图形式呈现，同时利用markPoint标记最大值和最小值，提供丰富的图表交互功能。
//引入echart.js
 <script src="assets/dist/echarts.js"></script>
 <div class="t_Record" style="width: 100%;overflow: hidden;">
               <div id="main" style="height:400px; overflow:hidden; width:100%;/*  overflow:auto */" ></div>     
 </div> 
 <script type="text/javascript">
 require.config({
      paths: {
          echarts: './assets/dist'
      }
  });
  require(
      [
          'echarts',
			'echarts/theme/macarons',
          'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
          'echarts/chart/bar'
      ],
      function (ec,theme) {
          var myChart = ec.init(document.getElementById('main'),theme);
         option = {
title : {
  text: '每月订单交易记录',
  subtext: '实时获取用户订单购买记录'
},
tooltip : {
  trigger: 'axis'
},
legend: {
  data:['所有订单','待付款','已付款']
},
toolbox: {
  show : true,
  feature : {
      mark : {show: true},
      dataView : {show: true, readOnly: false},
      magicType : {show: true, type: ['line', 'bar']},
      restore : {show: true},
      saveAsImage : {show: true}
  }
},
calculable : true,
xAxis : [
  {
      type : 'category',
      data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
  }
],
yAxis : [
  {
      type : 'value'
  }
],
series : [
  {
      name:'所有订单',
      type:'bar',
      //[120, 49, 70, 232, 256, 767, 1356, 1622, 326, 200,164, 133]
     // data:[120, 49, 70, 232, 256, 767, 1356, 1622, 326, 200,164, 133],
    data:getData(),
      markPoint : {
          data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
          ]
      }           
  },
  {
      name:'待付款',
      type:'bar',
     // data:[26, 59, 30, 84, 27, 77, 176, 1182, 487, 188, 60, 23],
      data:getStatus(),
      markPoint : {
          data : [
              {type : 'max', name: '最大值'},
              {type : 'min', name: '最小值'}
          ]
      },
     
		
  }
	, {
      name:'已付款',
      type:'bar',
      //data:[26, 59, 60, 264, 287, 77, 176, 122, 247, 148, 60, 23],
      data:getStatus2(),
      markPoint : {
          data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
          ]
      },
     
	}
	/* , {
      name:'代发货',
      type:'bar',
      data:[26, 59, 80, 24, 87, 70, 175, 1072, 48, 18, 69, 63],
      markPoint : {
          data : [
              {name : '年最高', value : 1072, xAxis: 7, yAxis: 1072, symbolSize:18},
              {name : '年最低', value : 22, xAxis: 11, yAxis: 3}
          ]
      },
     
	} */
]
};
              
          myChart.setOption(option);
      }
  );

   function getData(){
  		var jsonstr = [];
  		var dataList
  		 $.ajax({
      		 type:"post",
   	        url:"admin/RecordList",
   	        dataType:"json",
   	       async: false, //设置为同步请求
   			  success: function(d){
   	        	 dataList=d.data
   	        	//console.log(dataList)
   	        	for (var i = 0; i < dataList.length; i++) {
      	
                     var json = {};
				      json = dataList[i];
				     jsonstr.push(json);
			}
   	        	console.log(jsonstr)
   	        	
		}
	})
	return jsonstr;
	
}
   
   function getStatus(){
  	 var jsonstr = [];
		var dataList
		 $.ajax({
   		 type:"post",
	        url:"admin/statusList?rstatus=0",
	        dataType:"json",
	       async: false, //设置为同步请求
			  success: function(d){
	        	 dataList=d.data
	        	//console.log(dataList)
	        	for (var i = 0; i < dataList.length; i++) {
      	
                     var json = {};
				      json = dataList[i];
				     jsonstr.push(json);
			}
	        	console.log(jsonstr)
	        	
		}
	})
	return jsonstr;
   }
   
   function getStatus2(){
  	 var jsonstr = [];
		var dataList
		 $.ajax({
   		 type:"post",
	        url:"admin/statusList?rstatus=1",
	        dataType:"json",
	       async: false, //设置为同步请求
			  success: function(d){
	        	 dataList=d.data
	        	//console.log(dataList)
	        	for (var i = 0; i < dataList.length; i++) {
      	
                     var json = {};
				      json = dataList[i];
				     jsonstr.push(json);
			}
	        	console.log(jsonstr)
	        	
		}
	})
	return jsonstr;
   }
 </script>
 //echart的data引入getStatus()函数，在函数中调用后台接口，从而获取到后台数据，按照echart所需要的格式在sql中查取数据
 echart所要的格式为：[26, 59, 80, 24, 87, 70, 175, 1072, 48, 18, 69, 63]
 后台sql语句的格式必须和echart的格式对应，若某个月份没有收入则默认为0，此时sql语句为：
 SELECT B.temp AS temp
FROM 
(
SELECT month(r_addtime)as months ,sum(r_paid_in) AS temp
FROM record
WHERE r_status=#{rstatus} and shop_id=#{shopId} and year(r_addtime)=2019
group by year(r_addtime), month(r_addtime)
UNION
SELECT '1' as mon,'0' as temp
union  
SELECT '2' as mon,'0' as temp
union  
SELECT '3' as mon,'0' as temp
  union  
SELECT '4' as mon,'0' as temp
  union  
SELECT '5' as mon,'0' as temp 
union  
SELECT '6' as mon,'0' as temp
  union  
SELECT '7' as mon,'0' as temp 
union  
SELECT '8' as mon,'0' as temp
  union  
SELECT '9' as mon,'0' as temp
  union  
SELECT '10' as mon,'0' as temp
  union  
SELECT '11' as mon,'0' as temp
   union  
SELECT '12' as mon,'0' as temp
) B
GROUP BY B.months
ORDER BY B.months
复制代码
效果图如下：