feat：对接接口、完善功能

src/components/Line/index.vue

@@ -38,18 +38,29 @@
       default: () => {}
     }
   })
-  const { id, setOption, initChart } = useEchart()
+
+  const { id, setOption } = useEchart()
 
   let timer = null
   let currentIndex = -1
 
+  let params = null
   var defaultColors = ['#06E2FF', '#02FFB8', '#FF465F', '#FFCA36', '#9A4BFC', '#044EFF']
-
-  let defaultSeriesConfig = {
-    type: 'line',
-    smooth: true,
-    symbol: 'none',
-    symbolSize: fitChartSize(8)
+  const defaultSeriesConfig = (index) => {
+    return {
+      type: 'line',
+      smooth: true,
+      symbol: 'none',
+      symbolSize: fitChartSize(8),
+      itemStyle: {
+        color: '#0B2F63',
+        borderColor: defaultColors[index],
+        borderWidth: fitChartSize(4)
+      },
+      lineStyle: {
+        color: defaultColors[index]
+      }
+    }
   }
   let defaultConfig = {
     colors: defaultColors,
@@ -57,9 +68,9 @@
       trigger: 'axis',
       backgroundColor: 'transparent',
       borderWidth: 0,
-      formatter: (params) => {
+      formatter: (e) => {
         let valueStr = ''
-        params.map((item) => {
+        e.map((item) => {
           valueStr += `<div>${item.seriesName}：${item.value}</div>`
         })
         let str = `<div style="
@@ -92,8 +103,7 @@
       textStyle: {
         color: '#ffffff',
         fontSize: fitChartSize(12)
-      },
-      data: []
+      }
     },
     title: {
       show: false
@@ -130,31 +140,39 @@
     },
     series: []
   }
-  const init = () => {
-    initChart()
-    defaultConfig.xAxis.data = props.xAxisData
-    props.data.map((item, index) => {
-      defaultConfig.series.push({
-        ...defaultSeriesConfig,
-        ...props.seriesConfig,
-        name: item.name,
-        data: item.data,
-        itemStyle: {
-          color: '#0B2F63',
-          borderColor: defaultColors[index],
-          borderWidth: fitChartSize(4)
-        },
-        lineStyle: {
-          color: defaultColors[index]
-        }
+  const updateOption = () => {
+    if (params) {
+      props.data.map((item, index) => {
+        params.series[index].data = item.data
       })
-      defaultConfig.legend.data.push(item.name)
-    })
-    setOption({
-      ...defaultConfig,
-      ...props.config
-    })
+    } else {
+      defaultConfig.xAxis.data = props.xAxisData
+      props.data.map((item, index) => {
+        defaultConfig.series.push({
+          ...defaultSeriesConfig(index),
+          ...props.seriesConfig,
+          name: item.name,
+          data: item.data
+        })
+      })
+      params = {
+        ...defaultConfig,
+        ...props.config
+      }
+    }
+    setOption(params)
   }
+  watch(
+    [() => props.data, () => props.xAxisData],
+    (val) => {
+      if (val[0].length > 0 && val[1].length > 0) {
+        setTimeout(() => {
+          updateOption()
+        }, 500)
+      }
+    },
+    { immediate: true }
+  )
   // // 切换tooltip
   // const switchTooltip = () => {
   //   // 取消之前高亮的图形

src/components/PieRow/index.vue

@@ -98,7 +98,6 @@
     (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}%`