echarts做后台报表

有不足之处请指出，谢谢！可添加联系方式：微信号：qsx_1996

html：

首先需要创建显示报表的区域：<div id="main" style="width: 100%;height:400px;"></div>  

需要填写id来与echarts联系

js：

首先引入js文件<script src="js/echarts.js"></script>

贴上代码：

function MA(daycount, data) {
       var result = [];
       for (var i = 0; i < data.length; i++) {
           var sum = 0;
//            for (var j = i - daycount, m = 1; m <= daycount; j++, m++) {   //不包括今天
           for (var j = i - daycount +1, m = 1; m <= daycount; j++, m++) {    //包括今天
               if (j < 0) {
                   sum += 0;
               } else {
                   sum += data[j];
               }
           }

           result.push((sum / daycount).toFixed(2));
       }
       return result;
   }

   //调用ajax来实现异步的加载数据
   function getusers(type) {
       $.post("action.php",
           {
               action: 'getinfo',
               Type:type,
               Start:'<?php echo $start?>',
               End:'<?php echo $end?>',
               UserType:'<?php echo $usertype?>'
           },
           function (response) {
           if(response == 0){
               $('#main').html('<h1 style="text-align: center">当前阶段无数据！</h1>');
               return;
           }
           if(type == 'change' || type == 'hour'){
               for (var j = 0; j < 24; j++) {
                   date.push(j+'时');
                   total.push('');
               }
               for (var m = 0; m < JSON.parse(response).length; m++) {
                   var n =(JSON.parse(response)[m].date);
                   total[~~n] = JSON.parse(response)[m].Total / 100;

               }
           }else{
               for (var i = 0; i < JSON.parse(response).length; i++) {
                   date.push(JSON.parse(response)[i].date);
                   Total.push(JSON.parse(response)[i].Total / 100);

                   var dt = new Date(JSON.parse(response)[i].date);

//这里就是区分周末与非周末的颜色  判断为周末的话就push一个二维数组，value 和 itemstyle
                   if (dt.getDay() == 0 || dt.getDay() == 6)
                   {
                       total.push({value:JSON.parse(response)[i].Total / 100,itemStyle:{color:'#ff9a02'}});
                   }else{
                       total.push(JSON.parse(response)[i].Total / 100);
                   }
               }
               MA7 = MA(7,Total);
               MA14 = MA(14,Total);
               MA28 = MA(28,Total);

           }
               // 基于准备好的dom，初始化echarts实例
               var myChart = echarts.init(document.getElementById('main'));

               // 指定图表的配置项和数据
               var option = {
                   title: {
                       <?php
                           if($type=='change' && $start == $end){
                               echo "text: '".$start." 订单金额报表（单位：元）',";
                           }elseif ($type=='change' && $start != $end){
                               echo "text: '".$start."到".$end." 订单金额报表（单位：元）',";
                           } elseif($type =='hour'){
                               echo "text: '".date('Y-m-d', time())." 订单金额报表（单位：元）',";
                           }
                       ?>

                       textStyle:{
                           fontSize:15
                       },
                       left:'center',
                       top:'top'
                   },
                   tooltip: {
                       trigger: 'axis',
                       axisPointer: {
                           type: 'cross',
                           crossStyle: {
                               color: '#999'
                           }
                       }
                   },
                   legend: {
                       data: ['金额', 'MA7', 'MA14','MA28'],
                       left:'10%'
                   },
                   toolbox: {
                       show: true,
                       feature: {
                           dataView: {show: true, readOnly: false},
                           magicType: {show: true, type: ['line', 'bar']},
                           restore: {show: true},
                           saveAsImage: {show: true}
                       }
                   },
                   calculable: true,
                   xAxis: [
                       {
                           type: 'category',
                           name:'时间',
                           data: date
                       }
                   ],
                   yAxis: [
                       {
                           type: 'value',
                           name:'金额(元)'
                       }
                   ],
                   dataZoom: [
                       {
                           show: true
                           <?php
                               if($type == 'hour' || $type == 'change'){
                                   echo ",start: 0,
                                          end: 100";
                               }else{
                                   echo ",start: 20,
                                          end: 100";
                               }
                           ?>

                       },
                       {
                           type: 'inside',
                           start: 94,
                           end: 100
                       },
                       {
                           show: true,
                           yAxisIndex: 0,
                           filterMode: 'empty',
                           width: 30,
                           height: '80%',
                           showDataShadow: false,
                           left: '93%'
                       }
                   ],
                   series: [
                       {
                           name: '金额',
                           type: 'bar',
                           color:['#cc0000'],
                           data: total,
                           label: {
                               normal: {
                                   show: true
                               }
                           },
                           markPoint: {
                               data: [
                                   {type: 'max', name: '最大值'},
                                   {type: 'min', name: '最小值'}
                               ]
                           },
                           markLine: {
                               data: [
                                   {type: 'average', name: '平均值'}
                               ]
                           },
                           barWidth:"50%"
                       }
                       <?php
                       if($type != 'hour' && $type != 'change'){
                           echo " , {
                           name: 'MA7',
                           type: 'line',
                           data: MA7,
                           smooth: true,
                           showSymbol: false,
                           itemStyle: {
                               normal: {
                                   width: 1,
                                   color:'green'
                               }
                           }
                       }, {
                           name: 'MA14',
                           type: 'line',
                           data: MA14,
                           smooth: true,
                           showSymbol: false,
                           itemStyle: {
                               normal: {
                                   width: 1,
                                   color:'blue'
                               }
                           }
                       }, {
                           name: 'MA28',
                           type: 'line',
                           data: MA28,
                           smooth: true,
                           showSymbol: false,
                           itemStyle: {
                               normal: {
                                   width: 1,
                                   color:'black'
                               }
                           }
                       }";
                       }
                       ?>
                   ]
               };

               // 使用刚指定的配置项和数据显示图表。
               myChart.setOption(option);
           }
       );

   }

   // 执行异步请求
   getusers(<?php echo "'".$type."'"?>);