done 本日班组情况

src/components/datapage/TeamChartDay.vue

@@ -8,47 +8,49 @@ import setupFn from "./TeamChartDayOptions";
 const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
+const showChartDom = ref(false);
 
-const dayData = ref([]);
-store.$subscribe((mutation, state) => {
-  console.log("[ChartDay]  ===>  state: ", state.data2.classTodayProductYield);
-  if (
-    state.data2.classTodayProductYield == undefined ||
-    state.data2.classTodayProductYield?.length == 0
-  ) {
-    console.log("[ChartDay]  ===>  清除状态");
-    dayData.value.splice(0);
-    if (chart.value) chart.value.dispose();
-    return;
-  }
-
-  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);
-    } else if (state.data2.classTodayProductYield[i].teamName == "B组") {
-      dayData.value[1] = parseInt(state.data2.classTodayProductYield[i].yield);
-    } else if (state.data2.classTodayProductYield[i].teamName == "C组") {
-      dayData.value[2] = parseInt(state.data2.classTodayProductYield[i].yield);
+/** 无状态，处理数据 */
+function loadData(yieldArray) {
+  const result = [];
+  if (yieldArray == undefined || yieldArray?.length == 0) return null;
+  for (let i = 0; i < yieldArray.length; ++i) {
+    if (yieldArray[i].teamName == "A组") {
+      result[0] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "B组") {
+      result[1] = parseInt(yieldArray[i].yield);
+    } else if (yieldArray[i].teamName == "C组") {
+      result[2] = parseInt(yieldArray[i].yield);
     }
   }
-  console.log("[ChartDay]  ===>  dayData: ", dayData.value);
-  setupChart();
-});
-
-// onMounted(() => {
-//   nextTick(() => {
-//     setupChart();
-//   })
-// })
+  return result;
+}
 
-function setupChart() {
+function setupChart(chart, dom, data) {
   if (chart.value) chart.value.dispose();
   nextTick(() => {
-    chart.value = echarts.init(chartChart.value);
-    setupFn(chart.value, dayData.value);
+    chart.value = echarts.init(dom);
+    setupFn(chart.value, data);
   });
 }
 
+/** 有状态，处理数据 */
+function __apply(yieldArray) {
+  const d = loadData(yieldArray);
+  if (!d) {
+    showChartDom.value = false;
+    if (chart.value) chart.value.dispose();
+    return;
+  }
+  showChartDom.value = true;
+  setupChart(chart, chartChart.value, d);
+}
+
+// 订阅
+store.$subscribe((mutation, state) => {
+  __apply(state.data2.classTodayProductYield);
+});
+
 onMounted(() => {
   chartChart.value.classList.add("h-full");
 });
@@ -56,10 +58,12 @@ onMounted(() => {
 
 <template>
   <Container class="chart" title="本日班组情况" icon="cube">
-    <div ref="chartChart" class="chart-chart" style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}"></div>
-    <p v-show="!dayData || dayData.length === 0" class="empty-data-hint">
-      暂无数据
-    </p>
+    <div
+      ref="chartChart"
+      class="chart-chart"
+      :style="{ opacity: showChartDom ? 1 : 0 }"
+    ></div>
+    <p v-show="!chart" class="empty-data-hint">暂无数据</p>
   </Container>
 </template>
 

src/components/datapage/TeamChartDayOptions.js

@@ -1,11 +1,13 @@
 export const options = {
-  color: ['#ffd601', '#72340b'],
+  color: ['#a4c9d1', '#72340b', '#ffd601' ],
   grid: {
-    top: 10,
-    bottom: 0,
-    left: 0,
+    top: 8,
+    bottom: 20,
+    left: 42,
     right: 28,
-    containLabel: true,
+  },  
+  legend: {
+    show: false,
   },
   xAxis: {
     max: 100,
@@ -23,8 +25,6 @@ export const options = {
     type: "category",
     data: ["A组", "B组", "C组"],
     inverse: true,
-    animationDuration: 300,
-    animationDurationUpdate: 300,
     max: 2, // only the largest 3 bars will be displayed
     axisLabel: {
       fontSize: 16,
@@ -38,27 +38,18 @@ export const options = {
   },
   series: [
     {
-      realtimeSort: true,
       type: "bar",
-      // data: [10, 20, 30],
-      data: [],
+      data: [34, 2, 23],
       label: {
         show: true,
         position: "right",
-        valueAnimation: true,
         formatter: "{c}%",
         color: "#fff",
         fontSize: 16,
       },
     },
   ],
-  legend: {
-    show: false,
-  },
-  animationDuration: 0,
-  animationDurationUpdate: 3000,
-  animationEasing: "linear",
-  animationEasingUpdate: "linear",
+
 };
 
 export default function setup(echartInstance, dataArr) {

src/pages/DataPage.vue

@@ -20,7 +20,7 @@ import LineMonth from '../components/datapage/LineMonth.vue';
     <!-- 本月生产线情况 -->
     <LineMonth />
     <!-- 本日班组情况 -->
-    <!-- <TeamChartDay /> -->
+    <TeamChartDay />
     <!-- 本月班组情况 -->
     <!-- <TeamChartMonth /> -->
   </div>