监管权限

src/components/Progress/index.vue

@@ -51,39 +51,47 @@ export default {
           itemWidth: 8,
           itemHeight: 5
         },
-        color: ['#446df6', '#f2a93f', '#56b7f9'],
+        color: ['#f2a93f', '#446df6', '#56b7f9'],
         series: [
           {
             type: 'pie',
             radius: ['50%', '70%'],
             center: ['50%', '36%'],
-            padAngle: 4,
+            selectedMode: 'single',
+            padAngle: 0,
+            selectedOffset: 0,
+            hoverOffset: 0,
             itemStyle: {
-              borderRadius: 10,
-              padding: 10
+              borderRadius: 0,
+              borderWidth: 0,
+              borderColor: 'transparent'
             },
             label: {
-              show: true,
-              position: 'center',
-              formatter: `{b}\n{d}%`
+              show: false
             },
             avoidLabelOverlap: true, // 是否启用防止标签重叠策略
             emphasis: { // 高亮，即鼠标经过时的样式
-              scale: true // 表示不放大item
+              scale: true, // 表示不放大item
+              label: {
+                show: true,
+                position: 'center',
+                formatter: `{b}\n{d}%`
+              }
             },
             labelLine: {
               show: false
             },
-            data: (() => {
-              if (this.percent || this.percent === 0) {
-                return [
-                  { value: parseFloat(this.percent), name: `${this.title}率` },
-                  { value: 100 - parseFloat(this.percent), name: `未${this.title}率` }
-                ]
-              } else {
-                return this.chartData
-              }
-            })()
+            data: this.chartData.map((item, index) => ({ ...item, selected: index === 0 }))
+            //  (() => {
+            //   if (this.percent || this.percent === 0) {
+            //     return [
+            //       { value: parseFloat(this.percent), name: `${this.title}率` },
+            //       { value: 100 - parseFloat(this.percent), name: `未${this.title}率` }
+            //     ]
+            //   } else {
+            //     return this.chartData
+            //   }
+            // })()
           }
         ],
         graphic: {
@@ -109,6 +117,88 @@ export default {
     },
     setOptions() {
       this.chart?.setOption(this.options)
+      if (this.chart && Array.isArray(this.chartData) && this.chartData.length > 0) {
+        try {
+          this.chart.dispatchAction({ type: 'downplay', seriesIndex: 0 })
+          this.chart.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 })
+        } catch (e) {
+          // ignore
+        }
+
+        // persistent center label via graphic
+        const data = this.chartData
+        const total = data.reduce((s, it) => s + Number(it.value || 0), 0)
+        const first = data[0]
+        const percent = total > 0 ? Math.round((Number(first.value || 0) / total) * 10000) / 100 : 0
+        this.chart.setOption({
+          graphic: {
+            elements: [
+              {
+                type: 'text',
+                left: 'center',
+                top: '36%',
+                style: {
+                  text: `${first.name}\n${percent}%`,
+                  textAlign: 'center',
+                  fill: '#333',
+                  fontSize: 14,
+                  fontWeight: 500
+                },
+                z: 100
+              }
+            ]
+          }
+        })
+
+        // update on hover and restore on mouse out
+        this.chart.off('mouseover')
+        this.chart.off('globalout')
+        this.chart.on('mouseover', { seriesIndex: 0 }, (params) => {
+          if (!params || typeof params.dataIndex === 'undefined') return
+          const item = data[params.dataIndex]
+          const p = total > 0 ? Math.round((Number(item.value || 0) / total) * 10000) / 100 : 0
+          this.chart.setOption({
+            graphic: {
+              elements: [
+                {
+                  type: 'text',
+                  left: 'center',
+                  top: '36%',
+                  style: {
+                    text: `${item.name}\n${p}%`,
+                    textAlign: 'center',
+                    fill: '#333',
+                    fontSize: 14,
+                    fontWeight: 500
+                  },
+                  z: 100
+                }
+              ]
+            }
+          })
+        })
+        this.chart.on('globalout', () => {
+          this.chart.setOption({
+            graphic: {
+              elements: [
+                {
+                  type: 'text',
+                  left: 'center',
+                  top: '36%',
+                  style: {
+                    text: `${first.name}\n${percent}%`,
+                    textAlign: 'center',
+                    fill: '#333',
+                    fontSize: 14,
+                    fontWeight: 500
+                  },
+                  z: 100
+                }
+              ]
+            }
+          })
+        })
+      }
       // this.setGraphics()
     },
     setGraphics() {

src/views/system/DashboardComponents/total.vue

@@ -50,7 +50,7 @@
           width="145px"
           height="145px"
           title="执行率"
-          :chart-data="[{value:progress.money_total_2 ? progress.money_total_2 : progress.money_total_1,name:'合计金额'},{value:progress.use_money_total,name:'已用金额'}]"
+          :chart-data="[{value:progress.use_money_total,name:'已用金额'},{value:progress.money_total_2 ? progress.money_total_2 -  progress.use_money_total: progress.money_total_1-progress.use_money_total,name:'未执行金额'}]"
         />
       </div>
     </div>