feat: 图表数据动态显示

mm/mm.config.js

@@ -51,7 +51,7 @@ module.exports = async (util) => {
                   目标完成率: `@integer(0, 100)`,
                   年移栽数量: `@integer(9, 9e4)`,
                   年移栽面积: `@integer(9, 9e4)`,
-                  移载区域数: `@integer(9, 9e4)`,
+                  移栽区域数: `@integer(9, 9e4)`,
                   烟农数量: `@integer(9, 9e4)`,
                 },
               })

src/components/Customize/HorizontalHistogram.vue

@@ -48,6 +48,11 @@ export default {
   mounted() {
     this.getEchart()
   },
+  watch: {
+    area() {
+      this.getEchart()
+    },
+  },
   methods: {
     getEchart() {
       let myChart = echarts.init(document.getElementById(`Horizontal`))

src/components/Customize/cake.vue

@@ -0,0 +1,301 @@
+<!-- 地图 -->
+<template>
+  <div class="wrap-container sn-container">
+    <div class="sn-content">
+      <div class="sn-title title">
+        <div class="titleZn">{{ title }}</div>
+        <div class="titleEn">{{ titleEn }}</div>
+      </div>
+      <div class="sn-body">
+        <div class="wrap-container flex">
+          <div class="chartsdom" id="cake"></div>
+          <div class="panel">
+            <div class="panelitem flex space_around">
+              <div>
+                <div class="number">{{ data.年移栽数量 }}</div>
+                <div class="text">
+                  <img
+                    class="img1"
+                    src="../../assets/img/rectangle.png"
+                    alt=""
+                  />
+                  年移栽数量
+                </div>
+              </div>
+              <div>
+                <div class="number">{{ data.年移栽面积 }}</div>
+                <div class="text">
+                  <img
+                    class="img1"
+                    src="../../assets/img/rectangle.png"
+                    alt=""
+                  />年移栽面积
+                </div>
+              </div>
+            </div>
+            <div class="panelitem">
+              <div class="flex space_between secondItem">
+                <img class="img" src="../../assets/img/tree.png" alt="" />
+                <div>移栽区域数</div>
+                <div>{{ data.移栽区域数 }}</div>
+              </div>
+              <div class="flex space_between secondItem">
+                <img class="img" src="../../assets/img/head.png" alt="" />
+                <div>烟农数量</div>
+                <div>{{ data.烟农数量 }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      option: null,
+      information: {},
+    }
+  },
+  props: {
+    data: {
+      type: Object,
+    },
+    title: {
+      type: String,
+      default: ``,
+    },
+    titleEn: {
+      type: String,
+      default: `Tongren Tobacco Planting Digital Management Platform`,
+    },
+  },
+  async mounted() {
+    this.getEchart()
+  },
+  watch: {
+    data() {
+      this.getEchart()
+    },
+  },
+  methods: {
+    getEchart() {
+      let myChart = echarts.init(document.getElementById(`cake`))
+      const title = `目标完成率`
+      const value = this.data.目标完成率
+      const splitLineLength = `19%`
+      const splitLineDistance = -5
+      const splitLineWidth = 2
+      const int = value.toFixed(1).split(`.`)[0]
+      const float = value.toFixed(1).split(`.`)[1]
+      this.option = {
+        title: {
+          text: `{a|` + int + `}{b|.` + float + `%}\n{c|` + title + `}`,
+          x: `center`,
+          y: `center`,
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 42,
+                color: `#fff`,
+              },
+              b: {
+                fontSize: 20,
+                color: `#96A2BC`,
+                padding: [2, 0, 0, 0],
+              },
+              c: {
+                fontSize: 16,
+                color: `#96A2BC`,
+                padding: [2, 0, 0, 0],
+              },
+            },
+          },
+        },
+
+        series: [
+          {
+            type: `pie`,
+            radius: [`84%`, `70%`],
+            silent: true,
+            clockwise: true,
+            startAngle: -35,
+            z: 0,
+            zlevel: 0,
+            data: [
+              {
+                value: value,
+                itemStyle: {
+                  color: {
+                    type: `linear`,
+                    x: 1,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: `#DFFFFF`, // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: `#0E7E7D`, // 100% 处的颜色
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                label: {
+                  show: false,
+                },
+              },
+              {
+                value: 100 - value,
+                label: {
+                  show: false,
+                },
+                itemStyle: {
+                  normal: {
+                    color: `rgba(15, 31, 52,1)`,
+                  },
+                },
+              },
+            ],
+          },
+          {
+            name: ``,
+            type: `gauge`,
+            radius: `88%`,
+            center: [`50%`, `50%`],
+            startAngle: 0,
+            endAngle: 360,
+            splitNumber: 100,
+            hoverAnimation: true,
+            axisTick: {
+              show: false,
+            },
+            splitLine: {
+              length: splitLineLength,
+              distance: splitLineDistance,
+              lineStyle: {
+                width: splitLineWidth,
+                color: `#000`,
+              },
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+          },
+          {
+            name: `外边框`,
+            type: `pie`,
+            clockwise: false, // 顺时加载
+            emphasis: {
+              scale: false, // 鼠标移入变大
+            },
+            center: [`50%`, `50%`],
+            radius: [`88%`, `88%`],
+            label: {
+              show: false,
+            },
+            data: [
+              {
+                value: 0,
+                name: ``,
+                itemStyle: {
+                  borderWidth: 2,
+                  borderColor: `#24FFFD`,
+                },
+              },
+            ],
+          },
+        ],
+      }
+      myChart.setOption(this.option)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.sn-container {
+  width: 401px;
+  height: 300px;
+  .title {
+    display: flex;
+    justify-content: space-between;
+    .titleEn {
+      width: 120px;
+      font-size: 8px;
+      text-align: right;
+      word-break: break-all;
+      line-height: 1;
+    }
+  }
+  .chartsdom {
+    width: 80%;
+    height: 80%;
+  }
+  .flex {
+    display: flex;
+    .panel {
+      width: 80%;
+      height: 80%;
+
+      .panelitem {
+        border-top: 2px solid #646464;
+        box-sizing: border-box;
+        height: 50%;
+        margin: 0 10px;
+        .secondItem {
+          margin: 21px 0;
+        }
+      }
+    }
+  }
+  .img {
+    height: 25px;
+    margin-right: 3px;
+  }
+  .img1 {
+    height: 17px;
+    width: 3px;
+    margin-right: 3px;
+  }
+  .l-height {
+    line-height: 100%;
+  }
+  .space_around {
+    justify-content: space-around;
+    align-items: center;
+  }
+  .space_between {
+    justify-content: space-between;
+    align-items: center;
+  }
+  .number {
+    font-size: 22px;
+    padding: 4px 0;
+    margin: 3px 0;
+  }
+  .text {
+    font-size: 14px;
+    color: #888888;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .column_reverse {
+    flex-direction: column-reverse;
+  }
+}
+</style>

src/components/Customize/cylindricalHistogram.vue

@@ -48,6 +48,11 @@ export default {
   mounted() {
     this.getEchart()
   },
+  watch: {
+    dataArray() {
+      this.getEchart()
+    },
+  },
   methods: {
     getEchart() {
       let myChart = echarts.init(document.getElementById(`cylindrical`))
@@ -57,7 +62,7 @@ export default {
           lineColor: `rgba(199,214,242, 0.2)`,
           labelColor: ` #c7d6f2`,
         },
-        unit: `公斤/产量`,
+        unit: this.unit,
         area: this.area,
         dataArray: this.dataArray,
       }

src/components/Customize/map/index.vue

@@ -1,4 +1,4 @@
-<!-- 圆柱柱状图 -->
+<!-- 地图 -->
 <template>
   <div class="wrap-container sn-container">
     <div class="sn-content">
@@ -21,7 +21,7 @@ export default {
   },
   props: {
     getJson: {
-      type: String,
+      type: Object,
     },
   },
   async mounted() {
@@ -34,22 +34,15 @@ export default {
       let uploadedDataURL = this.getJson
       let geoCoordMap = {
         印江土家族苗族自治县: [108.405517, 27.997976],
-        信阳市: [114.085490993, 32.1285823075],
-        南阳市: [112.542841901, 33.0114195691],
-        周口市: [114.654101942, 33.6237408181],
-        商丘市: [115.641885688, 34.4385886402],
-        安阳市: [114.351806508, 36.1102667222],
-        平顶山市: [113.300848978, 33.7453014565],
-        开封市: [114.351642118, 34.8018541758],
-        新乡市: [113.912690161, 35.3072575577],
-        洛阳市: [112.147524769, 34.2873678177],
-        漯河市: [114.0460614, 33.5762786885],
-        濮阳市: [115.026627441, 35.7532978882],
-        焦作市: [113.211835885, 35.234607555],
-        许昌市: [113.83531246, 34.0267395887],
-        郑州市: [113.64964385, 34.7566100641],
-        驻马店市: [114.049153547, 32.9831581541],
-        鹤壁市: [114.297769838, 35.7554258742],
+        石阡县: [108.229854, 27.519386],
+        江口县: [108.848427, 27.691904],
+        玉屏侗族自治县: [108.917882, 27.238024],
+        思南县: [108.255827, 27.941331],
+        德江县: [108.117317, 28.26094],
+        沿河土家族自治县: [108.495746, 28.560487],
+        松桃苗族自治县: [109.202627, 28.165419],
+        碧江区: [109.192117, 27.718745],
+        万山区: [109.21199, 27.51903],
       }
       let customerBatteryCityData = [
         {
@@ -59,22 +52,15 @@ export default {
           tds: 1,
           fds: 101,
         },
-        { name: `信阳市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `南阳市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `周口市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `商丘市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `安阳市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `平顶山市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `开封市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `新乡市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `洛阳市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `漯河市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `濮阳市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `焦作市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `许昌市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `郑州市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `驻马店市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
-        { name: `鹤壁市`, value: 1, fdl: `99%`, tds: 1, fds: 101 },
+        { name: `石阡县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
+        { name: `江口县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
+        { name: `玉屏侗族自治县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
+        { name: `思南县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
+        { name: `德江县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
+        { name: `沿河土家族自治县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
+        { name: `松桃苗族自治县`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
+        { name: `碧江区`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
+        { name: `万山区`, value: 0.5, fdl: `99%`, tds: 1, fds: 101 },
       ]
       echarts.registerMap(`guangdong`, uploadedDataURL, {})
       this.option = {
@@ -264,7 +250,7 @@ export default {
                 formatter: function (params) {
                   let name = params.data[2].name
                   let value = params.data[2].fdl
-                  let text = `{tline|复电率}:{fline|${value}}`
+                  let text = `{fline|${name.slice(0, 2)}}`
                   return text
                 },
                 color: `#fff`,
@@ -287,7 +273,7 @@ export default {
               },
             },
             itemStyle: {
-              color: `#00FFF6`,
+              color: `#000FFF`,
               opacity: 1,
             },
             symbol: img2,
@@ -406,12 +392,17 @@ export default {
       function scatterData2() {
         return customerBatteryCityData.map((item) => {
           return {
-            name: item.name,
+            // name: item.name,
             value: geoCoordMap[item.name],
           }
         })
       }
       myChart.setOption(this.option)
+      myChart.on(`click`, function (params) {
+        const idx = params.dataIndex
+        console.log(idx, params.name, params.value)
+        // to do
+      })
     },
   },
 }
@@ -421,9 +412,7 @@ export default {
 .sn-container {
   width: 980px;
   height: 760px;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
+
   .title {
     display: flex;
     justify-content: space-between;

src/components/Customize/wavyLineChart.vue

@@ -49,11 +49,18 @@ export default {
       type: String,
       default: `Tongren Tobacco Planting Digital Management Platform`,
     },
+    unit: {
+      type: String,
+      default: ``,
+    },
   },
   mounted() {
     this.getEchart()
-    console.log(this.smooth, `丝滑过渡`)
-    console.log(this.id, `标题`)
+  },
+  watch: {
+    area() {
+      this.getEchart()
+    },
   },
   methods: {
     getEchart() {
@@ -113,7 +120,7 @@ export default {
         yAxis: [
           {
             type: `value`,
-            name: `平方米/面积`,
+            name: this.unit,
             axisLabel: {
               textStyle: {
                 color: `#65ABE7`,

src/components/Customize/weatherForecast.vue

@@ -24,9 +24,6 @@ export default {
     }
   },
   props: {
-    barWidth: {
-      type: Number,
-    },
     area: {
       type: Array,
     },
@@ -52,6 +49,11 @@ export default {
   mounted() {
     this.getEchart()
   },
+  watch: {
+    dataArray() {
+      this.getEchart()
+    },
+  },
   methods: {
     getEchart() {
       let myChart = echarts.init(document.getElementById(`weather`))
@@ -108,11 +110,12 @@ export default {
         xAxis: {
           type: `category`,
           axisLabel: {
-            formatter: `{value}`,
+            formatter: `{value}ri`,
             color: `#c7d6f2`,
             fontSize: `12px`,
             fontFamily: `Microsoft YaHei`,
           },
+
           boundaryGap: false,
           data: this.area,
           axisTick: {
@@ -122,7 +125,7 @@ export default {
         // y轴
         yAxis: {
           type: `value`,
-          name: `摄氏度`,
+          name: this.unit,
           axisLabel: {
             textStyle: {
               color: `#65ABE7`,

src/http/index.js

@@ -73,6 +73,42 @@ const apiObj = {
     },
     time: 1000,
   },
+  variousRegions: {
+    api: `/api/analysisOfTransplantYieldInVariousRegions`,
+    // 1小时
+    // time: 1000 * 60 * 60,
+    time: 1000 * 5,
+  },
+  weatherForecast: {
+    api: `/api/weatherForecast`,
+    // 1小时
+    // time: 1000 * 60 * 60,
+    time: 1000 * 5,
+  },
+  eachRegion: {
+    api: `/api/transplantAreaInEachRegion`,
+    // 1小时
+    // time: 1000 * 60 * 60,
+    time: 1000 * 5,
+  },
+  situation: {
+    api: `/api/analysisOfTransplantingSituation`,
+    // 1小时
+    // time: 1000 * 60 * 60,
+    time: 1000 * 5,
+  },
+  statistics: {
+    api: `/api/realTimeStatistics`,
+    // 1小时
+    // time: 1000 * 60 * 60,
+    time: 1000 * 5,
+  },
+  trendAnalysis: {
+    api: `/api/transplantTrendAnalysis`,
+    // 1小时
+    // time: 1000 * 60 * 60,
+    time: 1000 * 5,
+  },
 }
 
 export default {

src/views/page1/index.vue

@@ -1,15 +1,17 @@
 <template>
-  <bgBox :tabChange="tabChange">
+  <bgBox :tabChange="tabChange" :tabIndex="0">
     <cylindricalHistogram
-      style="left: 50px; top: 425px"
+      style="left: 50px; top: 345px"
       v-if="isGetData"
+      :unit="`公斤/产量`"
       title="各区域移栽产量分析"
       titleEn="Tongren Tobacco Planting Digital Management Platform"
       :area="Transplantarea"
       :dataArray="TransplantdataArray"
     ></cylindricalHistogram>
     <weatherForecast
-      style="left: 50px; top: 750px"
+      :unit="`摄氏度`"
+      style="left: 50px; top: 670px"
       v-if="isWeather"
       title="天气预报"
       titleEn="Tongren Tobacco Planting Digital Management Platform"
@@ -19,17 +21,18 @@
     >
     </weatherForecast>
     <wavyLineChart
+      :unit="`平方米/面积`"
       id="`wavyLineChart`"
-      style="left: 1470px; top: 105px"
+      style="left: 1470px; top: 25px"
       v-if="isWavyLine"
       title="各区域移栽面积"
-      :area="wavyLineArea"
-      :dataArray="wavyLinedataArray"
+      :area.sync="wavyLineArea"
+      :dataArray.sync="wavyLinedataArray"
       smooth="true"
     >
     </wavyLineChart>
     <HorizontalHistogram
-      style="left: 1470px; top: 425px"
+      style="left: 1470px; top: 345px"
       v-if="isHorizontal"
       title="移栽情况分析"
       :area="HorizontalArea"
@@ -37,25 +40,134 @@
     ></HorizontalHistogram>
     <wavyLineChart
       id="`移栽趋势分析`"
-      style="left: 1470px; top: 750px"
+      style="left: 1470px; top: 670px"
       v-if="isWavyLine"
       title="移栽趋势分析"
-      :area="wavyLineArea"
-      :dataArray="wavyLinedataArray"
+      :area="trendarea"
+      :dataArray="trendDataArray"
     >
     </wavyLineChart>
-    <threeMap v-if="hasGetJson" :getJson="getJson"></threeMap>
+    <threeMap
+      style="
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, 0%);
+      "
+      v-if="hasGetJson"
+      :getJson="getJson"
+    ></threeMap>
+    <cake
+      title="实时统计"
+      :data="statisticsData"
+      style="left: 50px; top: 25px"
+    ></cake>
   </bgBox>
 </template>
 
 <script>
 import bgBox from '@/components/bgBox/index.vue'
 import { screenSize } from '@/assets/js/utils'
+import cake from '@/components/Customize/cake'
 import cylindricalHistogram from '@/components/Customize/cylindricalHistogram'
 import weatherForecast from '@/components/Customize/weatherForecast'
 import wavyLineChart from '@/components/Customize/wavyLineChart'
 import HorizontalHistogram from '@/components/Customize/HorizontalHistogram'
 import threeMap from '@/components/Customize/map/index'
+
+const apiLists = [
+  {
+    key: `weatherForecast`,
+    fn(data, arg) {
+      const area = []
+      const dataArray = []
+      data.forEach((element) => {
+        area.push(element.时间)
+        dataArray.push(element.温度)
+      })
+      this.Weatherarea = area
+      this.WeatherdataArray = dataArray
+      this.isWeather = true
+    },
+  },
+  {
+    key: `eachRegion`,
+    fn(data, arg) {
+      const area = []
+      const dataArray = {
+        LastYear: [],
+        thisYear: [],
+      }
+      data.forEach((element) => {
+        area.push(element.名称.slice(0, 2))
+        dataArray.LastYear.push(element.去年)
+        dataArray.thisYear.push(element.今年)
+      })
+      this.wavyLineArea = area
+      this.wavyLinedataArray = dataArray
+      this.isWavyLine = true
+    },
+  },
+  {
+    key: `variousRegions`,
+    fn(data, arg) {
+      const area = []
+      const dataArray = []
+      data.forEach((element) => {
+        area.push(element.名称.slice(0, 2))
+        dataArray.push(element.值)
+      })
+      this.Transplantarea = area
+      this.TransplantdataArray = dataArray
+      this.isGetData = true
+    },
+  },
+  {
+    key: `situation`,
+    fn(data, arg) {
+      const area = []
+      const dataArray = {
+        Done: [],
+        Percentage: [],
+      }
+      const date = data.sort((a, b) => b.已移载 - a.已移载)
+      date.forEach((element) => {
+        area.push(element.名称.slice(0, 2))
+        dataArray.Done.push(element.已移载)
+        dataArray.Percentage.push(element.比率.toFixed(0))
+      })
+      this.HorizontalArea = area
+      this.HorizontalArray = dataArray
+
+      this.isHorizontal = true
+    },
+  },
+  {
+    key: `statistics`,
+    fn(data, arg) {
+      this.statisticsData = data
+    },
+  },
+  {
+    key: `trendAnalysis`,
+    fn(data, arg) {
+      const area = []
+      const dataArray = {
+        LastYear: [],
+        thisYear: [],
+      }
+      data.forEach((element) => {
+        area.push(element.时间)
+        dataArray.LastYear.push(element.去年)
+        dataArray.thisYear.push(element.今年)
+      })
+      this.trendarea = area
+      this.trendDataArray = dataArray
+      this.isTrend = true
+    },
+  },
+]
+
 export default {
   name: `Home`,
   components: {
@@ -65,9 +177,11 @@ export default {
     HorizontalHistogram,
     bgBox,
     threeMap,
+    cake,
   },
   data() {
     return {
+      statisticsData: {},
       TransplantdataArray: [],
       Transplantarea: [],
       Weatherarea: [],
@@ -77,33 +191,58 @@ export default {
         LastYear: [],
         thisYear: [],
       },
+      trendarea: [],
+      trendDataArray: {
+        LastYear: [],
+        thisYear: [],
+      },
       HorizontalArea: [],
       HorizontalArray: {
         Done: [],
         Percentage: [],
       },
-      getJson: ``,
+      getJson: {},
       isGetData: false,
       isWeather: false,
       isWavyLine: false,
       isHorizontal: false,
+      isTrend: false,
       hasGetJson: false,
     }
   },
   computed: {},
   created() {
+    console.log(`开始`)
+    apiLists.forEach((item) => {
+      this.$bus.$on(item.key, (data) => {
+        item.fn.call(this, data)
+      })
+    })
+    this.getJSON()
+    // this.$http.get(`https://httpbin.org/get`)
+  },
+  mounted() {
     this.getAnalysisOfTransplantYieldInVariousRegions()
     this.getWeatherForecast()
     this.getTransplantAreaInEachRegion()
     this.getAnalysisOfTransplantingSituation()
-    this.getJSON()
-    this.$http.get(`https://httpbin.org/get`)
-  },
-
-  mounted() {
     screenSize(this.$refs.editor)
   },
+  beforeDestroy() {
+    apiLists.forEach((item) => {
+      console.log(`销毁了`, item.key)
+      this.$bus.$off(item.key)
+    })
+  },
   methods: {
+    tabChange(val) {
+      if (val === 0) {
+        this.$router.push(`/page1`)
+      } else if (val === 1) {
+        this.$router.push(`/page2`)
+      }
+      console.log(`val`, val)
+    },
     getAnalysisOfTransplantYieldInVariousRegions() {
       this.$http
         .get(`/api/analysisOfTransplantYieldInVariousRegions`)