feat：重新对接首页接口

src/views/home/components/jam-count.vue

@@ -1,3 +1,4 @@
+<!-- 拥堵次数占比 -->
 <template>
   <div class="jam-count" :id="id" />
 </template>
@@ -15,7 +16,8 @@
 
   const { id, setOption } = useEchart()
 
-  var colorList = ['#FDC40A', '#FF5232', '#50F0A6']
+  let params = null
+  const colorList = ['#FDC40A', '#FF5232', '#50F0A6']
 
   watch(
     () => props.list,
@@ -27,7 +29,7 @@
     }
   )
 
-  const setSeriesData = () => {
+  const getSeriesData = () => {
     return props.list.map((item) => {
       return {
         name: item.name,
@@ -41,75 +43,80 @@
     }, 0)
   }
   const init = () => {
-    setOption({
-      color: colorList,
-      grid: {
-        left: '4%',
-        right: '4%',
-        top: '4%',
-        bottom: '4%',
-        containLabel: true
-      },
-      legend: {
-        orient: 'horizontal',
-        x: 'center',
-        bottom: '-2%',
-        itemHeight: fitChartSize(16),
-        itemWidth: fitChartSize(16),
-        itemGap: fitChartSize(10),
-        formatter: (name) => {
-          let obj = props.list.find((item) => item.name == name)
-          return '{name|' + name + '} {value|' + obj?.count + '}{value|%}'
+    if (!params) {
+      params = {
+        color: colorList,
+        grid: {
+          left: '4%',
+          right: '4%',
+          top: '4%',
+          bottom: '4%',
+          containLabel: true
         },
-        textStyle: {
-          rich: {
-            name: {
-              color: '#fff',
-              fontSize: fitChartSize(12)
-            },
-            value: {
-              color: '#00D5F6',
-              fontSize: fitChartSize(12)
-            }
-          }
-        }
-      },
-      series: [
-        {
-          type: 'pie',
-          center: ['50%', '40%'],
-          radius: ['45%', '60%'],
-          itemStyle: {
-            borderWidth: fitChartSize(4),
-            borderColor: '#093672'
+        legend: {
+          orient: 'horizontal',
+          x: 'center',
+          bottom: '-3%',
+          itemHeight: fitChartSize(12),
+          itemWidth: fitChartSize(12),
+          itemGap: fitChartSize(6),
+          formatter: (name) => {
+            let obj = props.list.find((item) => item.name == name)
+            return '{name|' + name + '} {value|' + obj?.count + '}{value|%}'
           },
-          label: {
-            show: true,
-            position: 'center',
-            fontWeight: 'bold',
-            formatter: function (o) {
-              return `{label|拥堵次数}` + '\n' + `{value|${calcCount()}}`
-            },
+          textStyle: {
             rich: {
-              label: {
-                color: '#7894A8',
-                padding: [0, 0, 5, 0],
+              name: {
+                color: '#fff',
                 fontSize: fitChartSize(12)
               },
               value: {
-                color: '#fff',
-                fontSize: fitChartSize(18),
-                fontWeight: 'bold'
+                color: '#00D5F6',
+                fontSize: fitChartSize(12)
               }
             }
-          },
-          labelLine: {
-            show: false
-          },
-          data: setSeriesData()
-        }
-      ]
-    })
+          }
+        },
+        series: [
+          {
+            type: 'pie',
+            center: ['50%', '40%'],
+            radius: ['45%', '60%'],
+            itemStyle: {
+              borderWidth: fitChartSize(4),
+              borderColor: '#093672'
+            },
+            label: {
+              show: true,
+              position: 'center',
+              fontWeight: 'bold',
+              formatter: function (o) {
+                return `{label|拥堵次数}` + '\n' + `{value|${calcCount()}}`
+              },
+              rich: {
+                label: {
+                  color: '#7894A8',
+                  padding: [0, 0, 5, 0],
+                  fontSize: fitChartSize(12)
+                },
+                value: {
+                  color: '#fff',
+                  fontSize: fitChartSize(16),
+                  fontWeight: 'bold'
+                }
+              }
+            },
+            labelLine: {
+              show: false
+            },
+            data: getSeriesData()
+          }
+        ]
+      }
+    } else {
+      params.series[0].data = getSeriesData()
+    }
+    setOption(params)
   }
 
   onMounted(() => {