更新

src/App.vue

@@ -2,6 +2,9 @@
   <div id="app">
     <transition name="custom-classes-transition" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
       <router-view :key="$route.fullPath"/>
+      <!-- <keep-alive>
+        <router-view></router-view>
+      </keep-alive> -->
     </transition>
   </div>
 </template>
@@ -19,7 +22,10 @@ export default {
     }
   },
   mounted() {
-    this.$router.push({
+    // this.$router.push({
+    //   name: this.routes[this.cur]
+    // })
+    this.$router.replace({
       name: this.routes[this.cur]
     })
     this.setTimer()
@@ -27,6 +33,7 @@ export default {
   },
   beforeDestroy() {
     clearInterval(this.timer)
+    document.body.removeEventListener('mousemove')
   },
   methods: {
     setTimer() {

src/components/MonitorChart/monitor-chart.vue

@@ -59,7 +59,13 @@ export default {
         options.legend.data = this.data.map(item => item.name)
       }
       options.xAxis = Object.assign(this.defaultOptions.xAxis, this.options.xAxis)
-      options.yAxis = Object.assign(this.defaultOptions.yAxis, this.options.yAxis)
+      if(Array.isArray(this.options.yAxis) && this.options.yAxis.length > 0) {
+        options.yAxis = this.options.yAxis.map((item, index) => {
+          return Object.assign(this.defaultOptions.yAxis, item)
+        })
+      } else {
+        options.yAxis = Object.assign(this.defaultOptions.yAxis, this.options.yAxis || {})
+      }
       options.series = this.data.map((item, index) => {
         let color = colors[index]
         let shadow = {}
@@ -80,8 +86,23 @@ export default {
           itemStyle: { color, ...shadow },
           data: item.data || []
         }
-        if (this.options.series) {
-          return Object.assign(result, this.options.series)
+        if (Array.isArray(this.options.series) && this.options.series.length > 0) {
+          // 双y轴设置一样的间隔
+          const y1 = [], y2 = []
+          this.options.series.forEach((el, i) => {
+            if (el.yAxisIndex) {
+              y2.push(...this.data[i].data)
+            } else {
+              y1.push(...this.data[i].data)
+            }
+            const y1Max = Math.max.apply(null, y1)
+            const y2Max = Math.max.apply(null, y2)
+            options.yAxis[0] = Object.assign({...options.yAxis[0]}, {min:0, max: y1Max, interval:y1Max / 5})
+            options.yAxis[1] = Object.assign({...options.yAxis[1]}, {min:0, max: y2Max, interval:y2Max / 5})
+          })
+          return Object.assign(result, this.options.series[index])
+        } else {
+          return Object.assign(result, this.options.series || {})
         }
         return result
       })

src/views/china-farming.vue

@@ -58,6 +58,7 @@ export default {
       primaryYear: 2018,
       secondaryYear: 2017,
       curCardIndex: null,
+      curProvinceData: null,
       area: 0,
       waterProduction: 0,
       farmProduction: 0,
@@ -111,14 +112,28 @@ export default {
           itemWidth: 10,
           itemHeight: 10,
         },
+        yAxis: [{},{}],
         xAxis: {
           data: [],
         },
-        series: {
-          type: 'bar',
-          barGap: 0,
-          barWidth: '20%',
-        }
+        series: [
+          {
+            type: 'bar',
+            barGap: 0,
+            barWidth: '20%',
+          },
+          {
+            type: 'bar',
+            barGap: 0,
+            barWidth: '20%',
+          },
+          {
+            type: 'bar',
+            barGap: 0,
+            barWidth: '20%',
+            yAxisIndex: 1,
+          },
+        ]
       },
       data3: [],
       visualConfig: {
@@ -160,7 +175,7 @@ export default {
     },
     handleYearChange(val, type) {
       this[type] = val
-      this.transformChartData()
+      this.transformChartData(this.curProvinceData || this.nation)
       this.transformProvinceData()
     },
     calcYearLabel() {
@@ -217,12 +232,14 @@ export default {
     },
     handleMapSelect(name) {
       this.curCardIndex = this.mapData.findIndex(item => item.name == name)
+      this.curProvinceData = null
       this.setChartData()
       this.$refs.areaCard.handleSelect(this.curCardIndex)
     },
     handleCardSelect(index) {
       if (this.curCardIndex == index) return
       this.curCardIndex = index
+      this.curProvinceData = null
       this.setChartData()
       if (!index && index != 0) {
         this.$refs.map.setRegions(index)
@@ -236,8 +253,8 @@ export default {
         return
       }
       const curProvince = this.mapData[this.curCardIndex].name
-      const provinceData = this.province.find(item => item.name == curProvince)
-      this.transformChartData(provinceData)
+      this.curProvinceData = this.province.find(item => item.name == curProvince)
+      this.transformChartData(this.curProvinceData)
     },
   },
 }

src/views/china-fishing.vue

@@ -86,6 +86,7 @@ export default {
       primaryYear: 2018,
       secondaryYear: 2017,
       curCardIndex: null,
+      curProvinceData: null,
       total: 0,
       mapData: [],
       totalData: [],
@@ -125,7 +126,8 @@ export default {
     },
     handleYearChange(val, type) {
       this[type] = val
-      this.transformChartData()
+      const data = this.curProvinceData ? [this.curProvinceData.value, this.curProvinceData.total] : [this.nation]
+      this.transformChartData(...data)
       this.transformProvinceData()
     },
     transformChartData(flag = this.nation, provinceTotal = null) {
@@ -179,12 +181,14 @@ export default {
     },
     handleMapSelect(name) {
       this.curCardIndex = this.mapData.findIndex(item => item.name == name)
+      this.curProvinceData = null
       this.setChartData()
       this.$refs.areaCard.handleSelect(this.curCardIndex)
     },
     handleCardSelect(index) {
       if (this.curCardIndex == index) return
       this.curCardIndex = index
+      this.curProvinceData = null
       this.setChartData()
       if (!index && index != 0) {
         this.$refs.map.setRegions(index)
@@ -198,8 +202,8 @@ export default {
         return
       }
       const curProvince = this.mapData[this.curCardIndex].name
-      const provinceData = this.province.find(item => item.name == curProvince)
-      this.transformChartData(provinceData.value, provinceData.total)
+      this.curProvinceData = this.province.find(item => item.name == curProvince)
+      this.transformChartData(this.curProvinceData.value, this.curProvinceData.total)
     },
   },
   computed: {