首页资金投入情况接入DMS数据并优化echart显示。

src/components/chart/LineChart.vue

@@ -21,6 +21,18 @@ export default {
       default() {
         return [];
       }
+    },
+    unit: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    title: {
+      type: String,
+      default() {
+        return "";
+      }
     }
   },
   watch: {
@@ -33,7 +45,9 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.initEchart(this.categoryData, this.valueData);
+      if (this.valueData) {
+        this.initEchart(this.categoryData, this.valueData);
+      }
     });
   },
   methods: {
@@ -41,10 +55,18 @@ export default {
       if (!this.lineChart) {
         this.lineChart = this.$Echarts.init(this.$refs.line);
       }
+      let unit = this.unit;
+      let title = this.title;
+      let dataMin = Math.min(...seriesData);
+      let dataMax = Math.max(...seriesData);
+      let homeSpecialTown = this.$store.state.homeSpecialTown;
       let option = {
         tooltip: {
           show: true,
-          trigger: "axis"
+          trigger: "axis",
+          formatter: function (params) {
+            return params[0].marker + params[0].name + "年" + "(" + homeSpecialTown + ")" + "<br />" + title + ":" + params[0].data + unit;
+          }
         },
         grid: {
           left: "3%",
@@ -74,14 +96,9 @@ export default {
           }
         },
         yAxis: {
-          // min: 1000,
-          // max: 1100,
-          // interval: 50,
-          // axisLabel: {
-          //   formatter: function (value, index) {
-          //     return (value * 100).toFixed(0) + "%";
-          //   }
-          // },
+          min: dataMin,
+          max: dataMax,
+          interval: dataMax - dataMin,
           type: "value",
           scale: true,
           splitLine: {
@@ -125,7 +142,7 @@ export default {
 };
 </script>
 <style>
-#lineChart {      
+#lineChart {
   width: 100%;
   height: 100%;
 }

src/components/common/ChartCard.vue

@@ -11,7 +11,7 @@
     </div>
     <!-- chart主题 -->
     <div style="height: 75px; width: 100%">
-      <LineChart v-if="categoryData && valueData" :categoryData="categoryData" :valueData="valueData" />
+      <LineChart v-if="categoryData && valueData" :categoryData="categoryData" :valueData="valueData" :unit="unit" :title="title"/>
       <el-empty v-else description="暂无数据"></el-empty>
     </div>
   </div>
@@ -31,7 +31,7 @@ export default {
     return {};
   },
   mounted() {},
-  props: ["title", "categoryData", "valueData"],
+  props: ["title", "categoryData", "valueData", "unit"],
   methods: {},
   watch: {}
 };

src/components/layout/MenuCard.vue

@@ -102,6 +102,7 @@
           :title="menuData.topSolt.commonData[chartCardDataIndex].title"
           :categoryData="menuData.topSolt.commonData[chartCardDataIndex].categoryData"
           :valueData="menuData.topSolt.commonData[chartCardDataIndex].valueData"
+          :unit="menuData.topSolt.commonData[chartCardDataIndex].unit"
         />
       </div>
     </div>
@@ -172,30 +173,35 @@ export default {
                   listMap[item.street] = listMapItem;
                 }
               });
-              // if (listMap) {
-              //   let categoryData = [];
-              //   for (let listMapKeys in listMap) {
-              //     if (listMap[listMapKeys].categoryData) {
-              //       categoryData = listMap[listMapKeys].categoryData;
-              //     }
-              //     if (listMap[listMapKeys].valueData) {
-              //       if (!listMap["全部"]) {
-              //         listMap["全部"] = { valueData: [], categoryData: [] };
-              //       }
-              //       listMap[listMapKeys].valueData.forEach((index, valueIndexItem) => {
-              //         if (listMap["全部"].valueData[index]) {
-              //           listMap["全部"].valueData[index] += valueIndexItem;
-              //         } else {
-              //           listMap["全部"].valueData[index] = valueIndexItem;
-              //         }
-              //       });
-              //     }
-              //   }
-              //   if (!listMap["全部"].categoryData && categoryData) {
-              //     listMap["全部"].categoryData = categoryData;
-              //   }
-              // }
+              if (listMap) {
+                let categoryData = [];
+                for (let listMapKeys in listMap) {
+                  categoryData = listMap[listMapKeys].categoryData;
+                  if (listMap[listMapKeys].valueData) {
+                    if (!listMap["全部"]) {
+                      listMap["全部"] = { valueData: [], categoryData: [] };
+                    }
+                    listMap[listMapKeys].valueData.forEach((valueIndexItem, index) => {
+                      if (listMap["全部"].valueData[index]) {
+                        listMap["全部"].valueData[index] += Number(valueIndexItem);
+                      } else {
+                        listMap["全部"].valueData[index] = Number(valueIndexItem);
+                      }
+                    });
+                  }
+                }
+                if (listMap["全部"].categoryData.length == 0 && categoryData.length > 0) {
+                  listMap["全部"].categoryData = categoryData;
+                }
+              }
+              if (listMap["全部"] && listMap["全部"].valueData) {
+                listMap["全部"].valueData.forEach((item,index) => {
+                  listMap["全部"].valueData[index] = item.toFixed(2);
+                });
+              }
               this.resData = listMap;
+              this.menuData.topSolt.commonData[0].categoryData = this.resData["全部"].categoryData;
+              this.menuData.topSolt.commonData[0].valueData = this.resData["全部"].valueData;
             } else {
               this.resData = [];
             }

src/config/common.js

@@ -576,24 +576,28 @@ export const menusMap = {
           {
             title: "基本农田面积",
             value: 150,
+            unit: "公顷",
             categoryData: ["2019", "2020", "2021"],
             valueData: [100, 120, 150],
           },
           {
             title: "储备土地面积",
             value: 250,
+            unit: "公顷",
             categoryData: ["2019", "2020", "2021"],
             valueData: [2000, 220, 250],
           },
           {
             title: "减量化面积",
             value: 350,
+            unit: "公顷",
             categoryData: ["2019", "2020", "2021"],
             valueData: [300, 20, 350],
           },
           {
             title: "一般耕地面积",
             value: 450,
+            unit: "公顷",
             categoryData: ["2019", "2020", "2021"],
             valueData: [40, 420, 450],
           },