fix: 移栽分析图表

src/components/Customize/HorizontalHistogram.vue

@@ -59,9 +59,10 @@ export default {
       const data = {
         label: this.area,
         value: this.dataArray.Done,
-        value2: this.dataArray.Percentage,
+        value2: this.dataArray?.Percentage || [],
       }
       this.option = {
+        backgroundColor: `rgb(0,0,0,0.3)`,
         tooltip: {
           trigger: `axis`,
           backgroundColor: `rgba(0, 0, 0, 0.8)`,
@@ -171,9 +172,11 @@ export default {
             axisLabel: {
               margin: 2,
               formatter: function (value) {
-                let k = data.label.indexOf(value)
-                let index = k
-                return `{a|${data.value2[index]} %}`
+                if (data.value2.length > 0) {
+                  let k = data.label.indexOf(value)
+                  let index = k
+                  return `{a|${data.value2[index]} %}`
+                }
               },
               rich: {
                 a: {

src/components/Customize/wavyLineChart.vue

@@ -60,6 +60,7 @@ export default {
     getEchart() {
       let myChart = echarts.init(document.getElementById(this.id))
       this.option = {
+        backgroundColor: `rgb(0,0,0,0.3)`,
         color: [
           `#23CF9C`,
           `#578FFB`,

src/views/page1/index.vue

@@ -37,7 +37,7 @@
       style="position: absolute; right: 50px; top: 430px"
       v-if="isHorizontal"
       id="`移栽情况分析`"
-      title="移栽情况分析"
+      title="移栽情 况分析"
       :area="HorizontalArea"
       :dataArray="HorizontalArray"
     />
@@ -232,7 +232,6 @@ export default {
         })
         this.HorizontalArea = area
         this.HorizontalArray = dataArray
-
         this.isHorizontal = true
       })
     },

src/views/page2/index.vue

@@ -3,6 +3,30 @@
     <bgBox class="bgBox" bgType="g-bg2" :tabChange="tabChange" :tabIndex="1">
       <leftBox class="lefBox" />
       <cmap />
+      <HorizontalHistogram
+        style="position: absolute; right: 50px; top: 115px; z-index: 10"
+        v-if="isHorizontal"
+        id="`各区域移栽面积1`"
+        title="各区域移栽面积"
+        :area="HorizontalArea"
+        :dataArray="HorizontalArray"
+      />
+      <wavyLineChart
+        id="`本月移栽数量趋势`"
+        style="position: absolute; right: 50px; top: 460px; z-index: 10"
+        v-if="isWavyLine"
+        title="本月移栽数量趋势"
+        :area.sync="trendarea"
+        :dataArray.sync="trendDataArray"
+      />
+      <wavyLineChart
+        id="`本年移栽数量趋势`"
+        style="position: absolute; right: 50px; top: 760px; z-index: 10"
+        v-if="isWavyLine"
+        title="本年移栽数量趋势"
+        :area.sync="trendarea"
+        :dataArray.sync="trendDataArray"
+      />
     </bgBox>
   </div>
 </template>
@@ -11,7 +35,8 @@
 import bgBox from '@/components/bgBox/index.vue'
 import cmap from './cmap.vue'
 import leftBox from './leftBox.vue'
-
+import HorizontalHistogram from '@/components/Customize/HorizontalHistogram'
+import wavyLineChart from '@/components/Customize/wavyLineChart'
 window.map = {}
 
 export default {
@@ -19,12 +44,40 @@ export default {
     bgBox,
     leftBox,
     cmap,
+    wavyLineChart,
+    HorizontalHistogram,
   },
   data() {
-    return {}
+    return {
+      HorizontalArea: [],
+      HorizontalArray: {
+        Done: [],
+      },
+      isHorizontal: true,
+      trendarea: [],
+      trendDataArray: {
+        LastYear: [],
+        thisYear: [],
+      },
+      isWavyLine: true,
+    }
   },
   computed: {},
-  async created() {},
+  async created() {
+    this.$util.autoVueFn(
+      [
+        {
+          time: 1000 * 5,
+          fn: this.getAnalysisOfTransplantingSituation,
+        },
+        {
+          time: 1000 * 5,
+          fn: this.getTrendAnalysis,
+        },
+      ],
+      this
+    )
+  },
   mounted() {},
   unmounted() {
     window.map.destroy()
@@ -36,6 +89,40 @@ export default {
       }
       console.log(`val`, val)
     },
+    getTrendAnalysis() {
+      this.$http.get(`/api/transplantTrendAnalysis`).then((res) => {
+        const area = []
+        const dataArray = {
+          LastYear: [],
+          thisYear: [],
+        }
+        res.forEach((element) => {
+          area.push(element.时间)
+          dataArray.LastYear.push(element.去年)
+          dataArray.thisYear.push(element.今年)
+        })
+        this.trendarea = area
+        this.trendDataArray = dataArray
+        this.isTrend = true
+      })
+    },
+    getAnalysisOfTransplantingSituation() {
+      this.$http.get(`/api/analysisOfTransplantingSituation`).then((res) => {
+        const area = []
+        const dataArray = {
+          Done: [],
+          Percentage: [],
+        }
+        const date = res.sort((a, b) => b.已移载 - a.已移载)
+        date.forEach((element) => {
+          area.push(element.名称.slice(0, 2))
+          dataArray.Done.push(element.已移载)
+        })
+        this.HorizontalArea = area
+        this.HorizontalArray = dataArray
+        this.isHorizontal = true
+      })
+    },
   },
 }
 </script>