update useWebsocket

src/components/HourChart.vue

@@ -1,10 +1,13 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import * as echarts from 'echarts';
-import Container from './Base/Container.vue';
-import { useWsStore } from '../store'
+import { ref, onMounted } from "vue";
+import * as echarts from "echarts";
+import Container from "./Base/Container.vue";
+import { useWsStore } from "../store";
+import charSetup from "./HourChartOptions";
+
 const store = useWsStore();
 const chartChart = ref(null);
+const chart = ref(null);
 // 小时数据
 const hourData = ref([]);
 // store.$subscribe((mutation, state) => {
@@ -19,28 +22,8 @@ const hourData = ref([]);
 // });
 
 onMounted(() => {
-  chartChart.value.classList.add('h-full');
-  const mc = echarts.init(chartChart.value);
-  mc.setOption({
-    grid: {
-      top: 24,
-      bottom: 24,
-      left: 24,
-      right: 24,
-    },
-    tooltip: {},
-    xAxis: {
-      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
-    },
-    yAxis: {},
-    series: [
-      {
-        name: '销量',
-        type: 'bar',
-        data: [5, 20, 36, 10, 10, 20],
-      },
-    ],
-  });
+  chartChart.value.classList.add("h-full");
+  chart.value = echarts.init(chartChart.value);
 });
 </script>
 

src/components/HourChartOptions.js

@@ -0,0 +1,40 @@
+export const options = {
+  grid: {
+    top: "5%",
+    bottom: "5%",
+    left: "3%",
+    right: "3%",
+    containLabel: true,
+  },
+  xAxis: {
+    type: "category",
+    data: [],
+    axisLabel: {
+      fontSize: 24,
+    },
+  },
+  yAxis: {
+    type: "value",
+    axisLabel: {
+      fontSize: 24,
+    },
+    minInterval: 1,
+  },
+  series: [
+    {
+      data: [],
+      type: "bar",
+      showBackground: true,
+      backgroundStyle: {
+        color: "rgba(180, 180, 180, 0.2)",
+      },
+    },
+  ],
+};
+
+export default function setup(echartInstance, timeArr, dataArr) {
+  const options = { ...options };
+  options.xAxis.data = timeArr;
+  options.series[0].data = dataArr;
+  echartInstance.setOption(options);
+}