丰都先提交一下

project/fengdu/AppBIBoard/AppBIBoard.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="AppBIBoard" :class="{fullscreen}">
-    <ai-fit-view>
+    <ai-fit-view @scale="v=>scale=v">
       <ai-dv-wrapper ref="fddv" title="丰收号-家庭互助" :instance="instance" :mask="false">
         <template v-slot:head="head">
           <fengdu-head v-bind="head" @fullscreen="handleFullScreen" @setting="handleSetting"/>
@@ -14,11 +14,21 @@
               </div>
               <div class="chart">
                 <div class="title">群活跃率（7日）</div>
-                <ai-echart :ops="chart" :data="chartData"/>
+                <ai-echart :ops="chart" :data="calcProgress()">
+                  <div class="legend">
+                    <ai-highlight v-for="item in chartData" :key="item.name" :content="`@v：${item.value}`"
+                                  :value="item.name" color="#9BB7D4" class="flex center mar-b8"/>
+                  </div>
+                </ai-echart>
               </div>
               <div class="chart">
                 <div class="title">人员活跃（7日）</div>
-                <ai-echart :ops="chart" :data="chartData"/>
+                <ai-echart :ops="chart" :data="calcProgress()">
+                  <div class="legend">
+                    <ai-highlight v-for="item in chartData" :key="item.name" :content="`@v：${item.value}`"
+                                  :value="item.name" color="#9BB7D4" class="flex center mar-b8"/>
+                  </div>
+                </ai-echart>
               </div>
             </div>
           </fd-card>
@@ -49,17 +59,20 @@ import FengduHead from "./components/fengduHead.vue";
 import FdCard from "./components/fdCard.vue";
 import AiEchart from "dui/packages/tools/AiEchart.vue";
 import AiHighlight from "dui/packages/layout/AiHighlight.vue";
+import AiInfoItem from "dui/packages/basic/AiInfoItem.vue";
+import AiWrapper from "dui/packages/basic/AiWrapper.vue";
 
 export default {
   name: "AppBIBoard",
   label: "丰都指挥舱",
-  components: {AiHighlight, AiEchart, FdCard, FengduHead, AiFitView},
+  components: {AiWrapper, AiInfoItem, AiHighlight, AiEchart, FdCard, FengduHead, AiFitView},
   props: {
     instance: Function,
     dict: Object
   },
   data() {
     return {
+      scale: 1,
       fullscreen: false,
       sta: {
         群总数: 5118,
@@ -68,6 +81,7 @@ export default {
         '群消息(30天)': '1,214,098',
       },
       chart: {
+        legend: {show: false},
         series: {
           type: 'gauge',
           startAngle: 90,
@@ -75,18 +89,51 @@ export default {
           center: ['50%', 74],
           radius: 50,
           progress: {
+            show: true,
             overlap: false,
             roundCap: true,
             clip: false,
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {offset: 0, color: '#139AFF'},
+                  {offset: 1, color: '#0ED5A6'},
+                ]
+              }
+            },
           },
-          splitLine: false,
-          axisTick: false,
+          pointer: {show: false},
+          splitLine: {show: false},
+          axisTick: {show: false},
+          axisLabel: {show: false},
           axisLine: {
-            lineStyle: {width: 6}
-          }
-        }
+            lineStyle: {width: 6, color: [[1, 'rgba(102, 121, 138, 0.4)']]},
+          },
+          detail: {
+            valueAnimation: true,
+            offsetCenter: [0, 0],
+            fontSize: 24,
+            formatter: '{value}%',
+            color: "#02FEFF",
+            fontFamily: "DINAlternate-Bold",
+            width: 50,
+            lineHeight: 50,
+            padding: 12,
+            borderWidth: 1,
+            borderColor: 'rgba(102, 121, 138, 0.4)',
+            borderRadius: 50
+          },
+        },
       },
-      chartData: []
+      chartData: [
+        {name: "活跃居民群", value: 3502},
+        {name: "全部居民群", value: 5118},
+      ]
     }
   },
   methods: {
@@ -95,6 +142,10 @@ export default {
     },
     handleSetting(v) {
       this.$refs.fddv.dialog = v
+    },
+    calcProgress() {
+      const value = (this.chartData[0].value / this.chartData.at(-1).value * 100).toFixed(0)
+      return [{value}]
     }
   },
 }
@@ -164,6 +215,13 @@ export default {
       line-height: 30px;
       background-image: linear-gradient(270deg, #1f436600 0%, #245a7570 99%);
     }
+
+    .legend {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
   }
 }
 </style>