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>