update team chart day

src/components/HourChart.vue

@@ -10,11 +10,11 @@ const chartChart = ref(null);
 const chart = ref(null);
 // 小时数据
 const hourData = ref([
-  { lineName: '001', hour: '00:00', num: 10 },
-  { lineName: '002', hour: '00:20', num: 20 },
-  { lineName: '003', hour: '00:30', num: 30 },
-  { lineName: '004', hour: '00:40', num: 14 },
-  { lineName: '005', hour: '00:50', num: 50 }
+  // { lineName: '001', hour: '00:00', num: 10 },
+  // { lineName: '002', hour: '00:20', num: 20 },
+  // { lineName: '003', hour: '00:30', num: 30 },
+  // { lineName: '004', hour: '00:40', num: 14 },
+  // { lineName: '005', hour: '00:50', num: 50 }
 ]);
 store.$subscribe((mutation, state) => {
   // console.log("[HourChart] =======>", state.data2.lineHourList?.length);
@@ -29,11 +29,11 @@ store.$subscribe((mutation, state) => {
   }
   // console.log("[HourChart]  ===> 有数据: ", state.data2.lineHourList);
   hourData.value = (state.data2?.lineHourList ?? [
-    { lineName: '001', hour: '00:00', num: 10 },
-    { lineName: '002', hour: '00:20', num: 20 },
-    { lineName: '003', hour: '00:30', num: 30 },
-    { lineName: '004', hour: '00:40', num: 14 },
-    { lineName: '005', hour: '00:50', num: 50 },
+    // { lineName: '001', hour: '00:00', num: 10 },
+    // { lineName: '002', hour: '00:20', num: 20 },
+    // { lineName: '003', hour: '00:30', num: 30 },
+    // { lineName: '004', hour: '00:40', num: 14 },
+    // { lineName: '005', hour: '00:50', num: 50 },
   ]).map((item, index) => ({
     id: `${item.lineName}_${index}`,
     hour: item.hour || `${index}`.padStart(2, "0"),
@@ -90,8 +90,6 @@ onMounted(() => {
   height: 300px;
 }
 
-.chart-inner {}
-
 .chart-chart {
   height: 100%;
 }

src/components/TeamChartDay.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, nextTick } from "vue";
 import * as echarts from "echarts";
 import Container from "./Base/Container.vue";
 import { useWsStore } from "../store";
@@ -9,7 +9,7 @@ const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 
-const dayData = ref([10,12,13]);
+const dayData = ref([]);
 store.$subscribe((mutation, state) => {
   console.log("[ChartDay]  ===>  state: ", state.data2.classTodayProductYield);
   if (
@@ -21,11 +21,7 @@ store.$subscribe((mutation, state) => {
     if (chart.value) chart.value.dispose();
     return;
   }
-  classTodayProductYield = [
-    {yieldName: 'A', yield: 10},
-    {yieldName: 'C', yield: 20},
-    {yieldName: 'B', yield: 20},
-  ]
+
   for (let i = 0; i < state.data2.classTodayProductYield.length; ++i) {
     if (state.data2.classTodayProductYield[i].teamName == "A组") {
       dayData.value[0] = parseInt(state.data2.classTodayProductYield[i].yield);
@@ -39,6 +35,12 @@ store.$subscribe((mutation, state) => {
   setupChart();
 });
 
+// onMounted(() => {
+//   nextTick(() => {
+//     setupChart();
+//   })
+// })
+
 function setupChart() {
   if (chart.value) chart.value.dispose();
   nextTick(() => {
@@ -66,8 +68,6 @@ onMounted(() => {
   height: 300px;
 }
 
-.chart-inner {}
-
 .chart-chart {
   height: 100%;
 }

src/components/TeamChartDayOptions.js

@@ -1,16 +1,22 @@
 export const options = {
+  color: ['#ffd601', '#72340b'],
   grid: {
     top: 10,
     bottom: 0,
-    left: 12,
-    right: 10,
+    left: 0,
+    right: 28,
     containLabel: true,
   },
   xAxis: {
     max: 100,
+    splitLine: {
+      lineStyle: {
+        color: "#fff2",
+      },
+    },
     axisLabel: {
-      fontSize: 22,
-      color: "#e5e5e533",
+      fontSize: 16,
+      color: "#e5e5e5a3",
     },
   },
   yAxis: {
@@ -21,28 +27,28 @@ export const options = {
     animationDurationUpdate: 300,
     max: 2, // only the largest 3 bars will be displayed
     axisLabel: {
-      fontSize: 22,
-      color: "#e5e5e533",
+      fontSize: 16,
+      color: "#e5e5e5a3",
     },
     splitLine: {
-      show: false,
-      color: "#e5e5e533",
+      lineStyle: {
+        color: "#e5e5e5",
+      },
     },
   },
   series: [
     {
       realtimeSort: true,
-      name: "X",
       type: "bar",
-      data: [10, 20, 30],
+      // data: [10, 20, 30],
+      data: [],
       label: {
         show: true,
         position: "right",
         valueAnimation: true,
         formatter: "{c}%",
-        color: "#fff8",
-        fontWeight: "bold",
-        fontSize: 22,
+        color: "#fff",
+        fontSize: 16,
       },
     },
   ],
@@ -56,7 +62,6 @@ export const options = {
 };
 
 export default function setup(echartInstance, dataArr) {
-  debugger;
   const new_options = { ...options };
   new_options.series[0].data = dataArr;
   echartInstance.setOption(new_options);