统计图添加中心数据展示

src/components/echartsTemplate/pie.vue

@@ -30,15 +30,32 @@ let option = {
   title: {
     show: false,
     text: "暂无数据",
-    x: "39%",
-    y: "28%",
+    subtext: 0,
     textStyle: {
-      //  rich: {
       fontSize: 14,
       color: "#fff",
-      fontWeight: "bold",
     },
+    subtextStyle: {
+      // fontSize: 13,
+      // color: "#fff",
+      rich: {
+        value: {
+          align: "left",
+          color: "#80FFFF",
+          fontSize: 13,
+        },
+        unit: {
+          color: "#fff",
+          align: "left",
+          fontSize: 12,
+        },
+      },
+    },
+    textAlign: "center",
+    x: "23%",
+    y: "32%",
   },
+
   legend: {
     // type: "scroll",
     orient: "vertical",
@@ -239,6 +256,17 @@ export default {
       } else {
         option.title.show = false;
       }
+      console.log(cartData.title, "cartData.tltle");
+
+      if (cartData.title) {
+        option.title.show = true;
+        option.title.text = cartData.title.text;
+        // option.title.subtext = cartData.title.num + _this.$props.unit;
+        option.title.subtext = `{value|${cartData.title.num}}{unit|${_this.$props.unit}}`;
+      } else {
+        option.title.show = false;
+      }
+
       this.myChart.resize();
       this.myChart.setOption(option);
       // if (cartData.isclick) {

src/views/LandConsolidation/components/organize.vue

@@ -42,7 +42,9 @@
       <div class="cjfkList itemCon">
         <span v-for="(item, i) in cjfkList" :key="i"
           ><span class="font_color">{{ item.name }}</span
-          ><span style="padding: 0 3px;color: #ec808d;font-size: 14px;">{{ item.area }}</span>
+          ><span style="padding: 0 3px; color: #ec808d; font-size: 14px">{{
+            item.area
+          }}</span>
           {{ item.unit }}</span
         >
       </div>
@@ -153,7 +155,7 @@ export default {
   },
   mounted() {
     this.getData();
-    this.initEcharts()
+    this.initEcharts();
   },
   methods: {
     changeData(name, updata) {
@@ -185,7 +187,7 @@ export default {
         let redPercent = 60;
         let bluePercent = 40;
         const background = `linear-gradient(to right,#DFE15A ${redPercent}%,#62ADED   ${bluePercent}%)`;
-        this.setEchart({ data: res.data, type: '"horizontal"' }, 0);
+        this.setEchart({ data: res.data, type: '"horizontal"',title:{text:'整治总规模',num:48.3} }, 0);
         this.$emit("updateParent", "loading", false);
       });
     },
@@ -196,7 +198,7 @@ export default {
       });
     },
     initEcharts() {
-        this.myChart = echarts.init(this.$refs.second_pie);
+      this.myChart = echarts.init(this.$refs.second_pie);
       const payload = {
         id: "left-center-1",
         title: "年龄占比",
@@ -231,7 +233,7 @@ export default {
       const tooltip = payload.toolTip !== undefined ? payload.toolTip : true;
       let countdata = payload.data.data.reduce((a, b) => Number(a) + Number(b));
       let option = {
-        backgroundColor: 'transparent',
+        backgroundColor: "transparent",
         grid: {
           left: 0,
           right: 0,
@@ -274,47 +276,46 @@ export default {
           },
         },
         series: [
-        {
+          {
             name: payload.title,
-            type: 'pie',
-            radius: ['55%', '75%'],
+            type: "pie",
+            radius: ["55%", "75%"],
             minAngle: 8,
             itemStyle: {
-                color(params) {
-                    return color[params.dataIndex];
-                },
+              color(params) {
+                return color[params.dataIndex];
+              },
             },
             labelLine: {
-                // length2: 55,
-                length: 20,
-                length2: 50,
-                lineStyle: {
-                    width: 0,
-                },
+              // length2: 55,
+              length: 20,
+              length2: 50,
+              lineStyle: {
+                width: 0,
+              },
             },
             label: {
-                position: 'outer',
-                alignTo: 'none',
-                bleedMargin: 1,
-                formatter: ' {b}\n{a|{c}人}',
-                padding: -65,
-                rich: {
-                    a: {
-                        padding: [8, 0, 5, 0],
-                        color: '#fff',
-                        lineHeight: 20,
-                         fontSize: 12,
-                        
-                    },
-                    b: {
-                        padding: [8, 0, 5, 0],
-                        lineHeight: 20,
-                    },
+              position: "outer",
+              alignTo: "none",
+              bleedMargin: 1,
+              formatter: " {b}\n{a|{c}人}",
+              padding: -65,
+              rich: {
+                a: {
+                  padding: [8, 0, 5, 0],
+                  color: "#fff",
+                  lineHeight: 20,
+                  fontSize: 12,
+                },
+                b: {
+                  padding: [8, 0, 5, 0],
+                  lineHeight: 20,
                 },
+              },
             },
             data,
-        },
-    ],
+          },
+        ],
       };
       this.myChart.setOption(option);
     },
@@ -391,7 +392,7 @@ export default {
     height: 130px;
     width: 400px;
   }
-  #second_pie{
+  #second_pie {
     height: 130px;
     width: 300px;
   }

src/views/LandConsolidation/index.vue

@@ -135,7 +135,7 @@ export default {
           title: "整治预检",
         },
       ],
-      activeIndex: 1,
+      activeIndex: 0,
       legends: ["试点区域", "整治区域", "整治项目"],
       iscontrast: false,
     };