模擬返回的後臺數據實現統計圖

1 <div id="vmchart">
2     <div id="chart" style="width: 600px;height: 400px;"></div>
3 </div>

引用的框架有：

邏輯部分：

 

  1 var vm = new Vue({
  2 
  3     el: '#vmchart',
  4 
  5     data: {
  6 
  7         // 繪製統計圖（橫縱座標，數據從後臺會返回一個數組，數組由對象組成）
  8         // 統計圖數據（timeline：時間軸x）(datanum：數據y)
  9         chartData: [
 10             { timeline: "2018-02-01", datanum: "1" },
 11             { timeline: "2018-02-03", datanum: "2" },
 12             { timeline: "2018-02-04", datanum: "5" },
 13             { timeline: "2018-02-06", datanum: "8" }
 14         ],
 15 
 16         timeline: [],
 17 
 18         datanum: []
 19 
 20     },
 21 
 22     methods: {
 23 
 24         /**
 25          * [將時間轉換爲標準]
 26          * @param  {[String]} datestr [2018-01-02]
 27          * @return {[Object]}         [Fri Feb 02 2018 00:00:00 GMT+0800 (中國標準時間)]
 28          */
 29         timeDate: function(datestr) {
 30 
 31             var temp = datestr.split("-"); //["2018","01","02"]
 32 
 33             var date = new Date(temp[0], temp[1], temp[2]); // 年月日
 34 
 35             return date;
 36 
 37         },
 38 
 39         /**
 40          * [給出開始日期和結束日期計算天天日期]
 41          * @param {[String]} [st] [開始時間]
 42          *        {[String]} [et] [結束時間]
 43          *        {[Array]}  [receive] [接收參數]
 44          * @return {[Array]} [日期數組]
 45          */
 46         timer: function(st,et,receive) {
 47             
 48             // 開始和結束時間
 49             var start = st; // 開始時間軸
 50             
 51             var end = et; // 結束時間軸
 52             
 53             var startTime = this.timeDate(start);
 54             
 55             var endTime = this.timeDate(end);
 56             
 57             // 判斷循環
 58             while ((endTime.getTime() - startTime.getTime()) >= 0) {
 59             
 60                 var year = startTime.getFullYear();
 61             
 62                 var month = startTime.getMonth().toString().length == 1 ? "0" + startTime.getMonth().toString() : startTime.getMonth();
 63             
 64                 var day = startTime.getDate().toString().length == 1 ? "0" + startTime.getDate() : startTime.getDate();
 65             
 66                 receive.push(year + "-" + month + "-" + day);
 67             
 68                 startTime.setDate(startTime.getDate() + 1);
 69             
 70             }
 71             
 72             return receive;
 73         },
 74 
 75     }
 76 
 77 });
 78 
 79 // 執行函數
 80 vm.timer(vm.chartData[0].timeline,vm.chartData[vm.chartData.length - 1].timeline,vm.timeline);
 81 
 82 // 定義一個空數組用於存放閱讀數
 83 var timeObj = {};
 84 
 85 // 先定義新的時間數組 設置默認閱讀數爲0（數組去重思想）
 86 $.each(vm.timeline,function(i,v){
 87 
 88     timeObj[v] = "0";
 89 
 90 });
 91 
 92 // 在定義後臺返回的數組，賦值到對象中以取代應該不爲0的數組
 93 $.each(vm.chartData,function(i,v){
 94 
 95     timeObj[v.timeline] = v.datanum;
 96 
 97 });
 98 
 99 // 將對象的value值（閱讀數）拿出來組成數組
100 for (var index in timeObj) {
101 
102     vm.datanum.push(timeObj[index]);
103 
104 }
105 
106 /**
107  * 統計圖
108  */
109 // 基於準備好的dom，初始化echarts實例
110 var myChart = echarts.init(document.getElementById('chart'));
111 
112 // 指定圖表的配置項和數據
113 var option = {
114     title: {
115         text: '例：文章閱讀數'
116     },
117     tooltip: {},
118     legend: {
119         data: ['閱讀量']
120     },
121     xAxis: {
122         data: vm.timeline //timeline
123     },
124     yAxis: {},
125     series: [{
126         name: '閱讀量',
127         type: 'line',
128         data: vm.datanum // datanum
129     }]
130 };
131 
132 // 使用剛指定的配置項和數據顯示圖表。
133 myChart.setOption(option);