feat：完善舆情页面

src/components/Line/index.vue

@@ -20,6 +20,22 @@
     height: {
       type: Number,
       default: () => 0
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    xAxisData: {
+      type: Array,
+      default: () => []
+    },
+    config: {
+      type: Object,
+      default: () => {}
+    },
+    seriesConfig: {
+      type: Object,
+      default: () => {}
     }
   })
 
@@ -27,12 +43,26 @@
   let lineChart = null
   let timer = null
   let currentIndex = -1
-  let defaultCofig = {
+
+  var defaultColors = ['#06E2FF', '#02FFB8', '#FF465F', '#FFCA36', '#9A4BFC', '#044EFF']
+
+  let defaultSeriesConfig = {
+    type: 'line',
+    smooth: true,
+    symbol: 'none',
+    symbolSize: fitChartSize(8)
+  }
+  let defaultConfig = {
+    colors: defaultColors,
     tooltip: {
       trigger: 'axis',
       backgroundColor: 'transparent',
       borderWidth: 0,
       formatter: (params) => {
+        let valueStr = ''
+        params.map((item) => {
+          valueStr += `<div>${item.seriesName}：${item.value}</div>`
+        })
         let str = `<div style="
               background: #07356B;
               border: 1px solid #0096FF;
@@ -41,7 +71,7 @@
               font-size: ${fitChartSize(16)}px;
               border-radius: ${fitChartSize(4)}px;
               padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;">
-              ${params[0].value}</div>`
+              ${valueStr}</div>`
         return str
       }
     },
@@ -49,9 +79,23 @@
       left: '2%',
       right: '2%',
       bottom: '5%',
-      top: '5%',
+      top: '10%',
       containLabel: true
     },
+    legend: {
+      orient: 'horizontal',
+      x: 'center',
+      y: 'top',
+      icon: 'rect',
+      itemWidth: fitChartSize(8),
+      itemHeight: fitChartSize(4),
+      itemGap: fitChartSize(10),
+      textStyle: {
+        color: '#ffffff',
+        fontSize: fitChartSize(12)
+      },
+      data: []
+    },
     title: {
       show: false
     },
@@ -85,48 +129,42 @@
         }
       }
     },
-    series: [
-      {
-        data: [],
-        type: 'line',
-        smooth: true,
-        symbol: 'none',
-        lineStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: '#7DE7FF'
-            },
-            {
-              offset: 0.5,
-              color: '#02F9FA'
-            },
-            {
-              offset: 1,
-              color: '#009DFF'
-            }
-          ])
-        }
-      }
-    ]
+    series: []
   }
-
-  const init = () => {
+  watch(
+    () => props.data,
+    (val) => {
+      if (val.length > 0) {
+        setTimeout(() => {
+          initChart()
+        }, 500)
+      }
+    },
+    { immediate: true }
+  )
+  const initChart = () => {
     const dom = document.getElementById(id.value)
     lineChart = echarts.init(dom)
-    defaultCofig.xAxis.data = [
-      '10:00',
-      '10:05',
-      '10:10',
-      '10:15',
-      '10:20',
-      '10:25',
-      '10:30',
-      '10:35'
-    ]
-    defaultCofig.series[0].data = [820, 932, 901, 934, 1290, 1330, 1320, 1290]
+    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]
+        }
+      })
+      defaultConfig.legend.data.push(item.name)
+    })
     lineChart.setOption({
-      ...defaultCofig
+      ...defaultConfig
     })
     // // 开启轮播
     // startTooltipLoop()
@@ -151,42 +189,37 @@
     if (lineChart) {
       lineChart.dispose()
       lineChart = null
-      init()
+      initChart()
     }
   }
-
-  // 切换tooltip
-  const switchTooltip = () => {
-    // 取消之前高亮的图形
-    lineChart.dispatchAction({
-      type: 'downplay',
-      seriesIndex: 0,
-      dataIndex: currentIndex
-    })
-    currentIndex = (currentIndex + 1) % 8
-    // 高亮当前图形
-    lineChart.dispatchAction({
-      type: 'highlight',
-      seriesIndex: 0,
-      dataIndex: currentIndex
-    })
-    // 显示tooltip
-    lineChart.dispatchAction({
-      type: 'showTip',
-      seriesIndex: 0,
-      dataIndex: currentIndex
-    })
-  }
-  const startTooltipLoop = () => {
-    timer = setInterval(() => switchTooltip(), 3000)
-  }
-  const closeSwitchTooltip = () => {
-    clearInterval(timer)
-    timer = undefined
-  }
-
-  onMounted(() => {
-    init()
-  })
+  // // 切换tooltip
+  // const switchTooltip = () => {
+  //   // 取消之前高亮的图形
+  //   lineChart.dispatchAction({
+  //     type: 'downplay',
+  //     seriesIndex: 0,
+  //     dataIndex: currentIndex
+  //   })
+  //   currentIndex = (currentIndex + 1) % 8
+  //   // 高亮当前图形
+  //   lineChart.dispatchAction({
+  //     type: 'highlight',
+  //     seriesIndex: 0,
+  //     dataIndex: currentIndex
+  //   })
+  //   // 显示tooltip
+  //   lineChart.dispatchAction({
+  //     type: 'showTip',
+  //     seriesIndex: 0,
+  //     dataIndex: currentIndex
+  //   })
+  // }
+  // const startTooltipLoop = () => {
+  //   timer = setInterval(() => switchTooltip(), 3000)
+  // }
+  // const closeSwitchTooltip = () => {
+  //   clearInterval(timer)
+  //   timer = undefined
+  // }
 </script>
 <style lang="scss"></style>