update chart month

src/components/TeamChartMonth.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";
@@ -11,24 +11,35 @@ const chart = ref(null);
 
 const monthData = ref(null);
 store.$subscribe((mutation, state) => {
+  console.log("[ChartMonth]  ===>  state: ", state.data2.monthlyTarget);
   if (
     state.data2.monthlyTarget == undefined ||
     state.data2.monthlyTarget?.length == 0
   ) {
+    console.log("[ChartMonth]  ===>  清除状态");
     monthData.value = null;
     if (chart.value) chart.value.dispose();
     return;
   }
-  console.log("monthlyTarget ===> ", state.data2.monthlyTarget);
+
+  if (!state.data2.monthlyTarget[0]) return;
   const { targetProduction, nowProduction, targetYield, nowYield } =
     state.data2.monthlyTarget[0];
   monthData.value = { targetProduction, nowProduction, targetYield, nowYield };
   setupChart();
 });
 
+
+
+// 绿色：24FF5E
+// 黄色：FFB524
+// 红色：FF3737
+
+
 function setupChart() {
   if (chart.value) chart.value.dispose();
   nextTick(() => {
+    console.log("[ChartMonth]  ===>  初始化表格: ", monthData.value);
     chart.value = echarts.init(chartChart.value);
     setupFn(chart.value, monthData.value);
   });
@@ -36,16 +47,15 @@ function setupChart() {
 
 onMounted(() => {
   chartChart.value.classList.add("h-full");
+  // nextTick(() => {
+  //   setupChart();
+  // })
 });
 </script>
 
 <template>
   <Container class="chart" title="本月班组情况" icon="cube">
-    <div
-      ref="chartChart"
-      class="chart-chart"
-      style="{opacity: (monthData) ? 1 : 0}"
-    ></div>
+    <div ref="chartChart" class="chart-chart" style="{opacity: (monthData) ? 1 : 0}"></div>
     <p v-show="!monthData" class="empty-data-hint">暂无数据</p>
   </Container>
 </template>
@@ -55,8 +65,7 @@ onMounted(() => {
   height: 300px;
 }
 
-.chart-inner {
-}
+.chart-inner {}
 
 .chart-chart {
   height: 100%;

src/components/TeamChartMonthOptions.js

@@ -1,43 +1,49 @@
 export const options = {
   grid: {
-    top: "10%",
-    bottom: "10%",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
   },
   title: [
     {
       text: "当前产量：" + 100 + " 片",
       left: "27%",
       textAlign: "center",
-      top: "67%",
+      top: "70%",
       textStyle: {
-        fontSize: 12,
+        fontSize: 16,
+        color: '#fffa'
       },
     },
     {
       text: "目标产量：" + 100 + " 片",
       left: "27%",
       textAlign: "center",
-      top: "82%",
+      top: "85%",
       textStyle: {
-        fontSize: 12,
+        fontSize: 16,
+        color: '#fffa'
       },
     },
     {
       text: "当前成品率：" + 22 + "%",
-      left: "73%",
+      left: "72%",
       textAlign: "center",
-      top: "67%",
+      top: "70%",
       textStyle: {
-        fontSize: 12,
+        fontSize: 16,
+        color: '#fffa'
       },
     },
     {
       text: "目标成品率：" + 22 + "%",
-      left: "73%",
+      left: "72%",
       textAlign: "center",
-      top: "82%",
+      top: "85%",
       textStyle: {
-        fontSize: 12,
+        fontSize: 16,
+        color: '#fffa'
       },
     },
   ],
@@ -71,7 +77,7 @@ export const options = {
       },
       detail: {
         valueAnimation: true,
-        fontSize: 12,
+        fontSize: 16,
         offsetCenter: [0, "0%"],
         formatter: "{value}%",
         color: "rgba(255, 255, 255, 1)",
@@ -113,11 +119,11 @@ export const options = {
       detail: {
         show: true,
         valueAnimation: true,
-        fontSize: 12,
+        fontSize: 16,
         offsetCenter: [0, "0%"],
-        formatter: 0 + "%",
+        // formatter: 0 + "%",
         // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
-        color: "#fff8",
+        color: "#fff",
       },
       data: [
         {
@@ -165,5 +171,6 @@ export default function setup(echartInstance, data) {
   new_options.series[0].data[0].value = (data.nowProduction / data.targetProduction * 100).toFixed(1)
   new_options.series[1].data[0].value = data.targetYield
   new_options.series[1].data[1].value = data.nowYield
+  new_options.series[1].detail.formatter = (data.nowYield / data.targetYield * 100).toFixed(2) + '%',
   echartInstance.setOption(new_options);
 }