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>
 

src/views/sentiment/index.vue

@@ -36,9 +36,9 @@
       </div>
     </div>
     <div class="flex mt-10">
-      <div class="box-2 mr-10">
+      <div class="box-2 mr-10 rela">
         <Title1 title="舆情指数" />
-        <Dropdown :options="options" @on-change="onChange" />
+        <div class="dropdown"> <Dropdown :options="options" @on-change="onChange" /> </div>
         <Line
           :width="1560"
           :height="400"
@@ -81,7 +81,6 @@
   let stateList = ref([])
   let options = ref([])
   const onChange = (e) => {
-    console.log(e, '===')
     getLineChart(e.id)
   }
   const getStop = async () => {
@@ -97,7 +96,6 @@
   const getState = async () => {
     let res = await getStateApi()
     stateList.value = res.data
-    console.log(stateList.value, '------')
   }
   const getLineChart = async (id) => {
     let res = await getLineChartApi({ id })
@@ -118,6 +116,11 @@
 </script>
 
 <style scoped lang="scss">
+  .dropdown {
+    position: absolute;
+    z-index: 9999;
+    right: vw(10);
+  }
   .container {
     margin-top: vh(120);
     .bg {