feat：对接消息相关接口

src/views/scenic/components/traffic-flow.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="traffic-flow" id="traffic-flow" />
+  <div class="traffic-flow" :id="id" />
 </template>
 
 <script setup>
   import { fitChartSize } from '@/utils/dataUtil'
-  import * as echarts from 'echarts'
+  import { useEchart } from '@/hooks/echart'
 
-  let trafficChart = null
+  const { id, setOption } = useEchart()
 
   let option = {
     grid: {
@@ -19,7 +19,7 @@
     xAxis: {
       boundaryGap: true,
       type: 'category',
-      data: ['河北', '山西', '河南', '内蒙', '辽宁'],
+      data: ['10:00', '10:05', '10:10', '10:15', '10:20'],
       axisTick: {
         show: false
       },
@@ -49,12 +49,11 @@
     },
     series: [
       {
-        data: [820, 932, 901, 934, 1290],
+        data: [45, 53, 23, 45, 12],
         type: 'bar',
         showBackground: true,
-        barWidth: fitChartSize(8),
+        barWidth: fitChartSize(16),
         itemStyle: {
-          barBorderRadius: [3, 3, 0, 0],
           color: {
             type: 'linear',
             x: 0,
@@ -62,11 +61,11 @@
             colorStops: [
               {
                 offset: 0,
-                color: 'rgba(0, 208, 255, 0)'
+                color: 'rgba(0, 99, 255, 1)'
               },
               {
                 offset: 1,
-                color: 'rgba(0, 208, 255, 1)'
+                color: 'rgba(2, 249, 250, 1)'
               }
             ]
           }
@@ -78,17 +77,9 @@
     ]
   }
   const init = () => {
-    trafficChart = echarts.init(document.getElementById('traffic-flow'))
-    trafficChart.setOption(option)
-    window.addEventListener('resize', resize)
-  }
-  const resize = () => {
-    if (trafficChart) {
-      trafficChart.dispose()
-      trafficChart = null
-      init()
-    }
+    setOption(option)
   }
+
   onMounted(() => {
     init()
   })