feat：完善功能

src/views/sentiment/components/area.vue

@@ -1,54 +1,77 @@
 <template>
+  <div class="select-box">
+    <Select v-model="params.id" :options="options" @on-change="initChart" />
+  </div>
   <div class="area" :id="id" />
 </template>
 
 <script setup>
   import { useEchart } from '@/hooks/echart'
   import { fitChartSize } from '@/utils/dataUtil'
-  import { getAreaApi } from '@/api/sentiment.js'
+  import { getAreaApi, getSpotApi } from '@/api/sentiment.js'
 
   const { id, setOption } = useEchart()
+
+  let params = reactive({ id: '' })
+  let option = null
+  let options = ref([])
   const initChart = async () => {
-    let res = await getAreaApi()
-    setOption({
-      legend: {
-        top: 'top',
-        itemWidth: fitChartSize(30),
-        itemHeight: fitChartSize(30),
-        textStyle: {
-          fontSize: fitChartSize(14),
-          color: '#fff'
-        }
-      },
-      series: [
-        {
-          name: 'Nightingale Chart',
-          type: 'pie',
-          radius: ['30%', '60%'],
-          center: ['50%', '56%'],
-          roseType: 'area',
-          labelLine: {
-            normal: {
-              show: true,
-              length: 1
-            }
-          },
-          itemStyle: {
-            borderRadius: fitChartSize(10)
-          },
-          data: res.data
-        }
-      ]
-    })
+    let res = await getAreaApi(params)
+    if (option) {
+      option.series[0].data = res.data
+    } else {
+      option = {
+        legend: {
+          top: '10%',
+          itemWidth: fitChartSize(20),
+          itemHeight: fitChartSize(20),
+          textStyle: {
+            color: '#fff',
+            fontSize: fitChartSize(20)
+          }
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            radius: ['30%', '60%'],
+            center: ['50%', '56%'],
+            roseType: 'area',
+            labelLine: {
+              normal: {
+                show: true,
+                length: 1
+              }
+            },
+            itemStyle: {
+              borderRadius: fitChartSize(10)
+            },
+            data: res.data
+          }
+        ]
+      }
+    }
+    setOption(option)
+  }
+  const getStop = async () => {
+    let res = await getSpotApi()
+    options.value = res.data
   }
   onMounted(() => {
+    getStop()
     initChart()
   })
 </script>
 
 <style scoped lang="scss">
+  .select-box {
+    position: absolute;
+    z-index: 9999;
+    top: vh(40);
+    right: vw(10);
+  }
   .area {
-    width: vw(740);
+    width: vw(840);
     height: vh(400);
   }
 </style>

src/views/sentiment/index.vue

@@ -38,7 +38,9 @@
     <div class="flex mt-10">
       <div class="box-2 mr-10 rela">
         <Title1 title="舆情指数" />
-        <div class="dropdown"> <Dropdown :options="options" @on-change="onChange" /> </div>
+        <div class="select-box">
+          <Select v-model="params.id" :options="options" @on-change="getLineChart" />
+        </div>
         <Line
           :width="1560"
           :height="400"
@@ -47,7 +49,7 @@
           :seriesConfig="{ smooth: false, symbol: 'circle' }"
         />
       </div>
-      <div class="box-1 mr-10">
+      <div class="box-1 mr-10 rela">
         <Title1 title="地域分析" />
         <Area />
       </div>
@@ -80,9 +82,8 @@
   let unsensitive = ref(0)
   let stateList = ref([])
   let options = ref([])
-  const onChange = (e) => {
-    getLineChart(e.id)
-  }
+  let params = reactive({ id: '' })
+
   const getStop = async () => {
     let res = await getSpotApi()
     options.value = res.data
@@ -97,8 +98,8 @@
     let res = await getStateApi()
     stateList.value = res.data
   }
-  const getLineChart = async (id) => {
-    let res = await getLineChartApi({ id })
+  const getLineChart = async () => {
+    let res = await getLineChartApi(params)
     xAxisData.value = res.data.data
     seriesData.value = res.data.series
   }
@@ -116,9 +117,10 @@
 </script>
 
 <style scoped lang="scss">
-  .dropdown {
+  .select-box {
     position: absolute;
     z-index: 9999;
+    top: vh(10);
     right: vw(10);
   }
   .container {