feat：完善舆情监测功能

src/components/Line/index.vue

@@ -8,10 +8,10 @@
   />
 </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: {
       type: Number,
@@ -38,9 +38,8 @@
       default: () => {}
     }
   })
+  const { id, setOption, initChart } = useEchart()
 
-  let id = ref(guid())
-  let lineChart = null
   let timer = null
   let currentIndex = -1
 
@@ -64,14 +63,14 @@
           valueStr += `<div>${item.seriesName}：${item.value}</div>`
         })
         let str = `<div style="
-              background: #07356B;
-              border: 1px solid #0096FF;
-              color: #fff;
-              font-weight: 600;
-              font-size: ${fitChartSize(16)}px;
-              border-radius: ${fitChartSize(4)}px;
-              padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;">
-              ${valueStr}</div>`
+                background: #07356B;
+                border: 1px solid #0096FF;
+                color: #fff;
+                font-weight: 600;
+                font-size: ${fitChartSize(16)}px;
+                border-radius: ${fitChartSize(4)}px;
+                padding: ${fitChartSize(4)}px ${fitChartSize(12)}px;">
+                ${valueStr}</div>`
         return str
       }
     },
@@ -131,20 +130,8 @@
     },
     series: []
   }
-  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)
+  const init = () => {
+    initChart()
     defaultConfig.xAxis.data = props.xAxisData
     props.data.map((item, index) => {
       defaultConfig.series.push({
@@ -163,53 +150,28 @@
       })
       defaultConfig.legend.data.push(item.name)
     })
-    lineChart.setOption({
+    setOption({
       ...defaultConfig,
       ...props.config
     })
-    // // 开启轮播
-    // startTooltipLoop()
-
-    // // 鼠标悬浮，停止轮播
-    // dom.addEventListener('mousemove', () => {
-    //   console.log('mouse move')
-    //   closeSwitchTooltip()
-    // })
-
-    // // 鼠标离开，继续轮播
-    // dom.addEventListener('mousedown', () => {
-    //   console.log('mouse down')
-    //   startTooltipLoop()
-    // })
-
-    // 监听窗口大小变化
-    window.addEventListener('resize', resize)
-  }
-
-  const resize = () => {
-    if (lineChart) {
-      lineChart.dispose()
-      lineChart = null
-      initChart()
-    }
   }
   // // 切换tooltip
   // const switchTooltip = () => {
   //   // 取消之前高亮的图形
-  //   lineChart.dispatchAction({
+  //   chart.value.dispatchAction({
   //     type: 'downplay',
   //     seriesIndex: 0,
   //     dataIndex: currentIndex
   //   })
   //   currentIndex = (currentIndex + 1) % 8
   //   // 高亮当前图形
-  //   lineChart.dispatchAction({
+  //   chart.value.dispatchAction({
   //     type: 'highlight',
   //     seriesIndex: 0,
   //     dataIndex: currentIndex
   //   })
   //   // 显示tooltip
-  //   lineChart.dispatchAction({
+  //   chart.value.dispatchAction({
   //     type: 'showTip',
   //     seriesIndex: 0,
   //     dataIndex: currentIndex