feat：对接景区接口

src/views/scenic/components/jam.vue

@@ -22,77 +22,78 @@
       type: Number,
       default: () => 0
     },
-    config: {
-      type: Object,
-      default: () => {
-        return {}
-      }
+    list: {
+      type: Array,
+      default: () => []
+    },
+    title: {
+      type: [String, Number],
+      default: () => ''
+    },
+    subTitle: {
+      type: [String, Number],
+      default: () => ''
     }
   })
 
   const { id, setOption } = useEchart()
 
-  var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA', '']
-  var title = ['企业', '农业', '工业', '纺织']
-  var dataValue = ['15', '30', '35', '20']
-  var dataList = title.map((item, index) => {
-    return {
-      name: item,
-      value: dataValue[index]
-    }
-  })
+  watch(
+    () => props.list,
+    (val) => {
+      setTimeout(() => {
+        init()
+      }, 1000)
+    },
+    { immediate: true }
+  )
 
-  var defaultCofig = {
-    color: colorList,
-    series: [
-      {
-        type: 'pie',
-        startAngle: 360,
-        center: ['50%', '40%'],
-        radius: ['65%', '80%'],
-        label: {
-          show: false
-        },
-        labelLine: {
-          show: false
-        },
-        data: [
-          {
-            value: 50,
-            itemStyle: {
-              color: {
-                type: 'linear',
-                x: 1,
-                y: 1,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: 'rgba(0, 150, 255, 0)'
-                  },
-                  {
-                    offset: 0.5,
-                    color: 'rgba(0, 150, 255, 0.47)'
-                  },
-                  {
-                    offset: 1,
-                    color: 'rgba(0, 150, 255, 0)'
-                  }
-                ]
-              }
-            }
-          },
+  let params = null
 
-          {
-            name: 'bottom',
-            value: 50,
-            itemStyle: {
-              color: 'transparent'
-            }
-          }
-        ]
+  const getSeriesData = () => {
+    return props.list.map((item) => {
+      return {
+        ...item,
+        value: parseFloat(item.value)
+      }
+    })
+  }
+
+  const getTotal = () => {
+    return props.list.reduce((per, cur) => {
+      return per + cur.count
+    }, 0)
+  }
+
+  const formatLabel = () => {
+    return () => `{value|${getTotal()}}` + '\n' + `{name|${props.subTitle}}`
+  }
+
+  let defaultCofig = {
+    color: ['#A665F1', '#0063FF', '#00D0FF', '#01FEFE', '#FC2638', '#FED958'],
+    legend: {
+      x: 'left',
+      y: '74%',
+      itemHeight: fitChartSize(12),
+      itemWidth: fitChartSize(12),
+      itemGap: fitChartSize(10),
+      formatter: function (name) {
+        return '{name|' + name + '}'
       },
+      textStyle: {
+        rich: {
+          name: {
+            color: '#fff',
+            fontSize: fitChartSize(14)
+          },
+          value: {
+            color: '#00D5F6',
+            fontSize: fitChartSize(14)
+          }
+        }
+      }
+    },
+    series: [
       {
         type: 'pie',
         center: ['50%', '40%'],
@@ -105,9 +106,7 @@
           show: true,
           position: 'center',
           fontWeight: 'bold',
-          formatter: function (o) {
-            return `{value|123456}` + '\n' + `{name|整改率}`
-          },
+          formatter: formatLabel(),
           rich: {
             value: {
               color: '#fff',
@@ -116,7 +115,7 @@
               padding: [0, 0, 5, 0]
             },
             name: {
-              color: '#7894A8',
+              color: '#fff',
               fontSize: fitChartSize(12)
             }
           }
@@ -124,21 +123,20 @@
         labelLine: {
           show: false
         },
-        data: dataList
+        data: getSeriesData()
       }
     ]
   }
 
   const init = () => {
-    setOption({
-      ...defaultCofig,
-      ...props.config
-    })
+    if (!params) {
+      params = defaultCofig
+    } else {
+      params.series[0].label.formatter = formatLabel()
+      params.series[0].data = getSeriesData()
+    }
+    setOption(params)
   }
-
-  onMounted(() => {
-    init()
-  })
 </script>
 
 <style scoped lang="scss"></style>