feat：对接接口、完善功能

src/views/sentiment/components/area.vue

@@ -1,18 +1,16 @@
 <template>
-  <div class="area" id="area" />
+  <div class="area" :id="id" />
 </template>
 
 <script setup>
-  import * as echarts from 'echarts'
+  import { useEchart } from '@/hooks/echart'
   import { fitChartSize } from '@/utils/dataUtil'
   import { getAreaApi } from '@/api/sentiment.js'
 
-  let areaChart = null
+  const { id, setOption } = useEchart()
   const initChart = async () => {
-    const dom = document.getElementById('area')
-    areaChart = echarts.init(dom)
     let res = await getAreaApi()
-    areaChart.setOption({
+    setOption({
       legend: {
         top: 'top',
         itemWidth: fitChartSize(30),
@@ -43,16 +41,8 @@
       ]
     })
   }
-  const resize = () => {
-    if (areaChart) {
-      areaChart.dispose()
-      areaChart = null
-      initChart()
-    }
-  }
   onMounted(() => {
     initChart()
-    window.addEventListener('resize', resize)
   })
 </script>
 

src/views/sentiment/components/wordCloud.vue

@@ -1,20 +1,17 @@
 <template>
-  <div class="wordCloud" id="wordCloud" />
+  <div class="wordCloud" :id="id" />
 </template>
 
 <script setup>
-  import * as echarts from 'echarts'
   import 'echarts-wordcloud'
   import { fitChartSize } from '@/utils/dataUtil'
   import { getHotWordApi } from '@/api/sentiment'
+  import { useEchart } from '@/hooks/echart'
 
-  let wordChart = null
+  const { id, setOption } = useEchart()
   const initChart = async () => {
-    const dom = document.getElementById('wordCloud')
-    wordChart = echarts.init(dom)
     let res = await getHotWordApi()
-    wordChart.setOption({
-      //你的代码
+    setOption({
       series: [
         {
           type: 'wordCloud',
@@ -52,16 +49,8 @@
       ]
     })
   }
-  const resize = () => {
-    if (wordChart) {
-      wordChart.dispose()
-      wordChart = null
-      initChart()
-    }
-  }
   onMounted(() => {
     initChart()
-    window.addEventListener('resize', resize)
   })
 </script>