update

src/views/bz/consume/index.vue

@@ -4,39 +4,39 @@
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/api/docs`)">
           <div class="card-panel-icon-wrapper icon-people">
-            <el-image src="/images/016537@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/016537@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               月消费总额（元）
             </div>
-            <count-to :start-val="0" :end-val="78956" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="78956" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/appKey/index`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/016535@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/016535@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               月消费次数
             </div>
-            <count-to :start-val="0" :end-val="15462" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="15462" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/place/baseInfo`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/016536@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/016536@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               人均消费（元）
             </div>
-            <count-to :start-val="0" :end-val="2036" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="2036" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
@@ -49,6 +49,7 @@
             <div slot="header" class="clearfix">
               <span>消费监测</span>
             </div>
+            <div id="chart1" style="height: 150px;width: 100%"></div>
           </el-card>
         </div>
       </el-col>
@@ -59,6 +60,7 @@
             <div slot="header" class="clearfix">
               <span>舆情监测</span>
             </div>
+            <div id="chart2" style="height: 150px;width: 100%"></div>
           </el-card>
         </div>
       </el-col>
@@ -69,16 +71,18 @@
             <div slot="header" class="clearfix">
               <span>应急指挥调度</span>
             </div>
+            <div id="chart3" style="height: 150px;width: 100%"></div>
           </el-card>
         </div>
       </el-col>
     </el-row>
-    <div style="height: 32px" />
+    <div style="height: 32px"/>
     <div class="bz-card">
       <el-card shadow="never">
         <div slot="header" class="clearfix">
           <span>消费监测</span>
         </div>
+        <div id="chart4" style="height: 150px;width: 100%"></div>
       </el-card>
     </div>
   </div>
@@ -86,6 +90,7 @@
 
 <script>
 import CountTo from 'vue-count-to'
+import * as echarts from 'echarts'
 
 export default {
   components: { CountTo },
@@ -96,7 +101,45 @@ export default {
   created() {
   },
   mounted() {
+    const xAxis = []
+    for (let i = 7; i > 0; i--) {
+      console.log(this.addDays(new Date(), i * -1))
+      xAxis.push(this.addDays(new Date(), i * -1))
+    }
+    this.buildBar('chart1', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
+    this.buildBar('chart2', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
+    this.buildBar('chart3', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
+    this.buildBar('chart4', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
   },
-  methods: {}
+  methods: {
+    addDays(nd, days) {
+      nd = nd.valueOf()
+      nd = nd + days * 24 * 60 * 60 * 1000
+      nd = new Date(nd)
+      var y = nd.getFullYear()
+      var m = nd.getMonth() + 1
+      var d = nd.getDate()
+      if (m <= 9) m = '0' + m
+      if (d <= 9) d = '0' + d
+      return y + '-' + m + '-' + d
+    },
+    buildBar(elementId, xAxis, seriesData) {
+
+      const chart = echarts.init(document.getElementById(elementId))
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: { top: '0', right: '1%' },
+        grid: { left: 25, right: 0, bottom: 35, top: 25 },
+        xAxis: { type: 'category', data: xAxis },
+        yAxis: { type: 'value' },
+        series: seriesData
+      })
+    }
+  }
 }
 </script>

src/views/bz/monitor/index.vue

@@ -4,52 +4,52 @@
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/api/docs`)">
           <div class="card-panel-icon-wrapper icon-people">
-            <el-image src="/images/16527@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/16527@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               昨日进入访客数量（人）
             </div>
-            <count-to :start-val="0" :end-val="100" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="100" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/appKey/index`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/16528@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/16528@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               今日景区累计游客数（人）
             </div>
-            <count-to :start-val="0" :end-val="100" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="100" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/place/baseInfo`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/16530@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/16530@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               实时客流（人）
             </div>
-            <count-to :start-val="0" :end-val="100" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="100" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/statistics/file`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/16529@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/16529@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               实时车流（辆）
             </div>
-            <count-to :start-val="0" :end-val="100" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="100" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
@@ -58,11 +58,14 @@
       <el-col :xs="24" :sm="24" :lg="18">
         <div class="bz-card">
           <el-card shadow="never">
-            <el-tabs v-model="activeName">
-              <el-tab-pane label="游客来源地" name="first" />
-              <el-tab-pane label="客流趋势" name="second" />
-              <el-tab-pane label="车流趋势" name="third" />
+            <el-tabs v-model="activeName" @tab-click="handleClick">
+              <el-tab-pane label="游客来源地" name="first"/>
+              <el-tab-pane label="客流趋势" name="second"/>
+              <el-tab-pane label="车流趋势" name="third"/>
             </el-tabs>
+            <div v-if="activeName==='first'" id="chart-first" style="height: 200px;width: 100%"></div>
+            <div v-if="activeName==='second'" id="chart-second" style="height: 200px;width: 100%"></div>
+            <div v-if="activeName==='third'" id="chart-third" style="height: 200px;width: 100%"></div>
           </el-card>
         </div>
       </el-col>
@@ -72,11 +75,12 @@
             <div slot="header" class="clearfix">
               <span>交通监测</span>
             </div>
+            <div id="chart1" style="height: 200px;width: 100%"></div>
           </el-card>
         </div>
       </el-col>
     </el-row>
-    <div style="height: 32px" />
+    <div style="height: 32px"/>
     <el-row :gutter="40">
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="bz-card">
@@ -85,23 +89,23 @@
               <span>消费监测</span>
             </div>
             <el-row>
-              <el-col span="12">
+              <el-col :span="12">
                 <el-row>
-                  <el-col span="10">
-                    <el-image src="/images/16531@2x.png" class="image" />
+                  <el-col :span="10">
+                    <el-image src="/images/16531@2x.png" class="image"/>
                   </el-col>
-                  <el-col span="14">
+                  <el-col :span="14">
                     <p>￥25863.50</p>
                     <p>景区消费</p>
                   </el-col>
                 </el-row>
               </el-col>
-              <el-col span="12">
+              <el-col :span="12">
                 <el-row>
-                  <el-col span="10">
-                    <el-image src="/images/16536@2x.png" class="image" />
+                  <el-col :span="10">
+                    <el-image src="/images/16536@2x.png" class="image"/>
                   </el-col>
-                  <el-col span="14">
+                  <el-col :span="14">
                     <p>￥25863.50</p>
                     <p>文化场馆</p>
                   </el-col>
@@ -109,23 +113,23 @@
               </el-col>
             </el-row>
             <el-row>
-              <el-col span="12">
+              <el-col :span="12">
                 <el-row>
-                  <el-col span="10">
-                    <el-image src="/images/16537@2x.png" class="image" />
+                  <el-col :span="10">
+                    <el-image src="/images/16537@2x.png" class="image"/>
                   </el-col>
-                  <el-col span="14">
+                  <el-col :span="14">
                     <p>￥25863.50</p>
                     <p>餐馆消费</p>
                   </el-col>
                 </el-row>
               </el-col>
-              <el-col span="12">
+              <el-col :span="12">
                 <el-row>
-                  <el-col span="10">
-                    <el-image src="/images/16538@2x.png" class="image" />
+                  <el-col :span="10">
+                    <el-image src="/images/16538@2x.png" class="image"/>
                   </el-col>
-                  <el-col span="14">
+                  <el-col :span="14">
                     <p>￥25863.50</p>
                     <p>体育场馆消费</p>
                   </el-col>
@@ -143,23 +147,23 @@
               <span>舆情监测</span>
             </div>
             <el-row>
-              <el-col span="12">
+              <el-col :span="12">
                 <el-row>
-                  <el-col span="10">
-                    <el-image src="/images/16541@2x.png" class="image" />
+                  <el-col :span="10">
+                    <el-image src="/images/16541@2x.png" class="image"/>
                   </el-col>
-                  <el-col span="14">
+                  <el-col :span="14">
                     <p>24685</p>
                     <p>好评</p>
                   </el-col>
                 </el-row>
               </el-col>
-              <el-col span="12">
+              <el-col :span="12">
                 <el-row>
-                  <el-col span="10">
-                    <el-image src="/images/16542@2x.png" class="image" />
+                  <el-col :span="10">
+                    <el-image src="/images/16542@2x.png" class="image"/>
                   </el-col>
-                  <el-col span="14">
+                  <el-col :span="14">
                     <p>23</p>
                     <p>差评</p>
                   </el-col>
@@ -167,23 +171,23 @@
               </el-col>
             </el-row>
             <el-row>
-              <el-col span="12">
+              <el-col :span="12">
                 <el-row>
-                  <el-col span="10">
-                    <el-image src="/images/16540@2x.png" class="image" />
+                  <el-col :span="10">
+                    <el-image src="/images/16540@2x.png" class="image"/>
                   </el-col>
-                  <el-col span="14">
+                  <el-col :span="14">
                     <p>12</p>
                     <p>五星餐厅</p>
                   </el-col>
                 </el-row>
               </el-col>
-              <el-col span="12">
+              <el-col :span="12">
                 <el-row>
-                  <el-col span="10">
-                    <el-image src="/images/16539@2x.png" class="image" />
+                  <el-col :span="10">
+                    <el-image src="/images/16539@2x.png" class="image"/>
                   </el-col>
-                  <el-col span="14">
+                  <el-col :span="14">
                     <p>256</p>
                     <p>四星餐厅</p>
                   </el-col>
@@ -202,23 +206,23 @@
               <span>应急指挥调度</span>
             </div>
             <el-row>
-              <el-col span="12">
+              <el-col :span="12">
                 <el-row>
-                  <el-col span="10">
-                    <el-image src="/images/16546@2x.png" class="image" />
+                  <el-col :span="10">
+                    <el-image src="/images/16546@2x.png" class="image"/>
                   </el-col>
-                  <el-col span="14">
+                  <el-col :span="14">
                     <p>24685</p>
                     <p>应急事件</p>
                   </el-col>
                 </el-row>
               </el-col>
-              <el-col span="12">
+              <el-col :span="12">
                 <el-row>
-                  <el-col span="10">
-                    <el-image src="/images/16547@2x.png" class="image" />
+                  <el-col :span="10">
+                    <el-image src="/images/16547@2x.png" class="image"/>
                   </el-col>
-                  <el-col span="14">
+                  <el-col :span="14">
                     <p>23</p>
                     <p>应急预案</p>
                   </el-col>
@@ -226,12 +230,12 @@
               </el-col>
             </el-row>
             <el-row>
-              <el-col span="12">
+              <el-col :span="12">
                 <el-row>
-                  <el-col span="10">
-                    <el-image src="/images/16545@2x.png" class="image" />
+                  <el-col :span="10">
+                    <el-image src="/images/16545@2x.png" class="image"/>
                   </el-col>
-                  <el-col span="14">
+                  <el-col :span="14">
                     <p>12</p>
                     <p>已处理应急事件</p>
                   </el-col>
@@ -247,6 +251,7 @@
 
 <script>
 import CountTo from 'vue-count-to'
+import * as echarts from 'echarts'
 
 export default {
   components: { CountTo },
@@ -259,7 +264,52 @@ export default {
   created() {
   },
   mounted() {
+    const xAxis = []
+    for (let i = 7; i > 0; i--) {
+      console.log(this.addDays(new Date(), i * -1))
+      xAxis.push(this.addDays(new Date(), i * -1))
+    }
+    this.buildBar('chart-first', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
+    this.buildBar('chart1', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
+    // this.buildBar('chart3', xAxis, [{ name: '客流量', type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
   },
-  methods: {}
+  methods: {
+    handleClick(tab) {
+      const xAxis = []
+      for (let i = 7; i > 0; i--) {
+        console.log(this.addDays(new Date(), i * -1))
+        xAxis.push(this.addDays(new Date(), i * -1))
+      }
+      this.buildBar('chart-' + tab.name, xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
+    },
+    addDays(nd, days) {
+      nd = nd.valueOf()
+      nd = nd + days * 24 * 60 * 60 * 1000
+      nd = new Date(nd)
+      var y = nd.getFullYear()
+      var m = nd.getMonth() + 1
+      var d = nd.getDate()
+      if (m <= 9) m = '0' + m
+      if (d <= 9) d = '0' + d
+      return y + '-' + m + '-' + d
+    },
+    buildBar(elementId, xAxis, seriesData) {
+
+      const chart = echarts.init(document.getElementById(elementId))
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: { top: '0', right: '1%' },
+        grid: { left: 25, right: 0, bottom: 35, top: 25 },
+        xAxis: { type: 'category', data: xAxis },
+        yAxis: { type: 'value' },
+        series: seriesData
+      })
+    }
+  }
 }
 </script>

src/views/bz/resourceAnalysis/index.vue

@@ -4,52 +4,52 @@
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/api/docs`)">
           <div class="card-panel-icon-wrapper icon-people">
-            <el-image src="/images/16505@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/16505@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               景点数量
             </div>
-            <count-to :start-val="0" :end-val="60" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="60" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/appKey/index`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/16506@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/16506@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               文旅线路
             </div>
-            <count-to :start-val="0" :end-val="185" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="185" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/place/baseInfo`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/16507@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/16507@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               酒店
             </div>
-            <count-to :start-val="0" :end-val="326" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="326" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/statistics/file`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/16508@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/16508@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               停车位
             </div>
-            <count-to :start-val="0" :end-val="4416" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="4416" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
@@ -59,52 +59,52 @@
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/api/docs`)">
           <div class="card-panel-icon-wrapper icon-people">
-            <el-image src="/images/16510@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/16510@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               体育馆
             </div>
-            <count-to :start-val="0" :end-val="5" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="5" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/appKey/index`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/16509@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/16509@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               餐馆
             </div>
-            <count-to :start-val="0" :end-val="1586" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="1586" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/place/baseInfo`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/16511@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/16511@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               娱乐场所
             </div>
-            <count-to :start-val="0" :end-val="18" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="18" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/statistics/file`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/16529@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/16529@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               非物质文化遗产
             </div>
-            <count-to :start-val="0" :end-val="4" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="4" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
@@ -112,13 +112,15 @@
 
     <div class="bz-card">
       <el-card shadow="never">
-        <el-tabs v-model="activeName">
-          <el-tab-pane label="景点访客量" name="first" />
-          <el-tab-pane label="客流趋势" name="second" />
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="景点访客量" name="first"/>
+          <el-tab-pane label="客流趋势" name="second"/>
         </el-tabs>
+        <div v-if="activeName==='first'" id="chart-first" style="height: 200px;width: 100%"></div>
+        <div v-if="activeName==='second'" id="chart-second" style="height: 200px;width: 100%"></div>
       </el-card>
     </div>
-    <div style="height: 32px" />
+    <div style="height: 32px"/>
     <el-row :gutter="40">
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="bz-card">
@@ -126,6 +128,7 @@
             <div slot="header" class="clearfix">
               <span>酒店访客量统计</span>
             </div>
+            <div id="chart1" style="height: 200px;width: 100%"></div>
           </el-card>
         </div>
       </el-col>
@@ -136,6 +139,7 @@
             <div slot="header" class="clearfix">
               <span>餐馆访客量统计</span>
             </div>
+            <div id="chart2" style="height: 200px;width: 100%"></div>
           </el-card>
         </div>
       </el-col>
@@ -147,6 +151,7 @@
             <div slot="header" class="clearfix">
               <span>各景点访客量排行</span>
             </div>
+            <div id="chart3" style="height: 200px;width: 100%"></div>
           </el-card>
         </div>
       </el-col>
@@ -157,6 +162,7 @@
 
 <script>
 import CountTo from 'vue-count-to'
+import * as echarts from 'echarts'
 
 export default {
   components: { CountTo },
@@ -169,7 +175,53 @@ export default {
   created() {
   },
   mounted() {
+    const xAxis = []
+    for (let i = 7; i > 0; i--) {
+      console.log(this.addDays(new Date(), i * -1))
+      xAxis.push(this.addDays(new Date(), i * -1))
+    }
+    this.buildBar('chart-first', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
+    this.buildBar('chart1', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
+    this.buildBar('chart2', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
+    this.buildBar('chart3', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
   },
-  methods: {}
+
+  methods: {
+    handleClick(tab) {
+      const xAxis = []
+      for (let i = 7; i > 0; i--) {
+        console.log(this.addDays(new Date(), i * -1))
+        xAxis.push(this.addDays(new Date(), i * -1))
+      }
+      this.buildBar('chart-' + tab.name, xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
+    },
+    addDays(nd, days) {
+      nd = nd.valueOf()
+      nd = nd + days * 24 * 60 * 60 * 1000
+      nd = new Date(nd)
+      var y = nd.getFullYear()
+      var m = nd.getMonth() + 1
+      var d = nd.getDate()
+      if (m <= 9) m = '0' + m
+      if (d <= 9) d = '0' + d
+      return y + '-' + m + '-' + d
+    },
+    buildBar(elementId, xAxis, seriesData) {
+      const chart = echarts.init(document.getElementById(elementId))
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: { top: '0', right: '1%' },
+        grid: { left: 25, right: 0, bottom: 35, top: 25 },
+        xAxis: { type: 'category', data: xAxis },
+        yAxis: { type: 'value' },
+        series: seriesData
+      })
+    }
+  }
 }
 </script>

src/views/bz/touristAnalysis/index.vue

@@ -4,52 +4,52 @@
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/api/docs`)">
           <div class="card-panel-icon-wrapper icon-people">
-            <el-image src="/images/016527@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/016527@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               累计访客人数
             </div>
-            <count-to :start-val="0" :end-val="2854247" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="2854247" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/appKey/index`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/016528@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/016528@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               省内访客人数
             </div>
-            <count-to :start-val="0" :end-val="762084" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="762084" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/place/baseInfo`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/016529@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/016529@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               省外访客人数
             </div>
-            <count-to :start-val="0" :end-val="2090736" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="2090736" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
       <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
         <div class="card-panel" @click="gotoPage(`/statistics/file`)">
           <div class="card-panel-icon-wrapper icon-message">
-            <el-image src="/images/016530@2x.png" class="card-panel-icon" style="height: 60px" />
+            <el-image src="/images/016530@2x.png" class="card-panel-icon" style="height: 60px"/>
           </div>
           <div class="card-panel-description">
             <div class="card-panel-text">
               境外访客人数
             </div>
-            <count-to :start-val="0" :end-val="4416" :duration="2600" class="card-panel-num" />
+            <count-to :start-val="0" :end-val="4416" :duration="2600" class="card-panel-num"/>
           </div>
         </div>
       </el-col>
@@ -62,6 +62,7 @@
             <div slot="header" class="clearfix">
               <span>访客来源省份TOP10</span>
             </div>
+            <div id="chart1" style="height: 200px;width: 100%"></div>
           </el-card>
         </div>
       </el-col>
@@ -72,6 +73,7 @@
             <div slot="header" class="clearfix">
               <span>访客来源城市TOP10</span>
             </div>
+            <div id="chart2" style="height: 200px;width: 100%"></div>
           </el-card>
         </div>
       </el-col>
@@ -81,6 +83,7 @@
 
 <script>
 import CountTo from 'vue-count-to'
+import * as echarts from 'echarts'
 
 export default {
   components: { CountTo },
@@ -91,7 +94,41 @@ export default {
   created() {
   },
   mounted() {
+    const xAxis = []
+    for (let i = 7; i > 0; i--) {
+      xAxis.push(this.addDays(new Date(), i * -1))
+    }
+    this.buildBar('chart1', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
+    this.buildBar('chart2', xAxis, [{ type: 'line', stack: 'Total', data: [0, 0, 0, 0, 0, 0, 0] }])
   },
-  methods: {}
+  methods: {
+    addDays(nd, days) {
+      nd = nd.valueOf()
+      nd = nd + days * 24 * 60 * 60 * 1000
+      nd = new Date(nd)
+      var y = nd.getFullYear()
+      var m = nd.getMonth() + 1
+      var d = nd.getDate()
+      if (m <= 9) m = '0' + m
+      if (d <= 9) d = '0' + d
+      return y + '-' + m + '-' + d
+    },
+    buildBar(elementId, xAxis, seriesData) {
+      const chart = echarts.init(document.getElementById(elementId))
+      chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        legend: { top: '0', right: '1%' },
+        grid: { left: 25, right: 0, bottom: 35, top: 25 },
+        xAxis: { type: 'category', data: xAxis },
+        yAxis: { type: 'value' },
+        series: seriesData
+      })
+    }
+  }
 }
 </script>