feat：完善舆情监测功能

src/components/PieRow/index.vue

@@ -9,10 +9,9 @@
 </template>
 
 <script setup>
-  import * as echarts from 'echarts'
   import styleUtil from '@/utils/styleUtil'
   import { fitChartSize } from '@/utils/dataUtil'
-  import { guid } from '@/utils/util'
+  import { useEchart } from '@/hooks/echart'
 
   const props = defineProps({
     width: {
@@ -32,12 +31,16 @@
     dataList: {
       type: Array,
       default: () => []
+    },
+    total: {
+      type: Number,
+      default: () => 0
     }
   })
 
-  let id = ref(guid())
-  let pieChart = null
-  var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA', '']
+  const { id, chart, setOption, initChart } = useEchart()
+
+  var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
 
   var defaultCofig = {
     color: colorList,
@@ -45,16 +48,12 @@
       orient: 'vertical',
       bottom: 'center',
       left: '70%',
-      data: [],
-      itemWidth: fitChartSize(16),
-      itemHeight: fitChartSize(16),
-      itemGap: fitChartSize(10),
-      formatter: (name) => {
-        return name + '\u3000' + '19%'
-      },
+      itemWidth: fitChartSize(20),
+      itemHeight: fitChartSize(20),
+      itemGap: fitChartSize(20),
       textStyle: {
         color: '#ffffff',
-        fontSize: fitChartSize(12)
+        fontSize: fitChartSize(20)
       }
     },
     series: [
@@ -71,7 +70,7 @@
           position: 'center',
           fontWeight: 'bold',
           formatter: function (o) {
-            return `{value|123456}` + '\n' + `{name|整改率}`
+            return `{value|123456}` + '\n' + `{name|舆情总数  }`
           },
           rich: {
             value: {
@@ -94,30 +93,24 @@
     ]
   }
 
-  const initChart = () => {
-    const dom = document.getElementById(id.value)
-    pieChart = echarts.init(dom)
-    defaultCofig.series[0].data = props.dataList
-    pieChart.setOption({
-      ...defaultCofig,
-      ...props.config
-    })
-    // 监听窗口大小变化
-    window.addEventListener('resize', resize)
-  }
-  const resize = () => {
-    if (pieChart) {
-      pieChart.dispose()
-      pieChart = null
-      initChart()
-    }
-  }
   watch(
     () => props.dataList,
     (newVal) => {
       if (newVal.length > 0) {
         nextTick(() => {
           initChart()
+          defaultCofig.legend.formatter = (name) => {
+            let percent = props.dataList.find((item) => item.name == name).value
+            return name + '\u3000' + `${percent}%`
+          }
+          defaultCofig.series[0].data = props.dataList
+          defaultCofig.series[0].label.formatter = () => {
+            return `{value|${props.total}}` + '\n' + `{name|舆情总数  }`
+          }
+          setOption({
+            ...defaultCofig,
+            ...props.config
+          })
         })
       }
     },