update chart settings

src/components/TeamChartDay.vue

@@ -1,39 +1,47 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import * as echarts from 'echarts';
-import Container from './Base/Container.vue';
+import { ref, onMounted } from "vue";
+import * as echarts from "echarts";
+import Container from "./Base/Container.vue";
+import { useWsStore } from "../store";
+import chartSetup from "./HourChartOptions";
 
+const store = useWsStore();
 const chartChart = ref(null);
+const chart = ref(null);
+
+// 小时数据
+const hourData = ref(null);
+store.$subscribe((mutation, state) => {
+  console.log("lineHourList ===> ", state.data2.lineHourList);
+  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
+    id: `${item.lineName}_${index}`,
+    hour: item.hour || `${index}`.padStart(2, "0"),
+    data: item.num || Math.random() * 100,
+  }));
+  chartSetup(
+    chart.value,
+    hourData.value.map((item) => item.hour),
+    hourData.value.map((item) => item.data)
+  );
+});
 
 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);
+  chart.value.setOption({});
 });
 </script>
 
 <template>
   <Container class="chart" title="本日班组情况" icon="cube">
-    <div ref="chartChart" class="chart-chart"></div>
+    <div
+      v-show="hourData && hourData.length > 0"
+      ref="chartChart"
+      class="chart-chart"
+    ></div>
+    <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
+      暂无数据
+    </p>
   </Container>
 </template>
 

src/components/TeamChartDayOptions.js

@@ -0,0 +1,56 @@
+export const options = {
+  grid: {
+    top: "10%",
+    bottom: "5%",
+    left: "3%",
+    right: "5%",
+    containLabel: true,
+  },
+  xAxis: {
+    max: 100,
+    axisLabel: {
+      fontSize: 22,
+    },
+  },
+  yAxis: {
+    type: "category",
+    data: ["A组", "B组", "C组"],
+    inverse: true,
+    animationDuration: 300,
+    animationDurationUpdate: 300,
+    max: 2, // only the largest 3 bars will be displayed
+    axisLabel: {
+      fontSize: 22,
+    },
+  },
+  series: [
+    {
+      realtimeSort: true,
+      name: "X",
+      type: "bar",
+      data: [10, 20, 30],
+      label: {
+        show: true,
+        position: "right",
+        valueAnimation: true,
+        formatter: "{c}%",
+        color: "rgba(255, 255, 255, 1)",
+        fontWeight: "bold",
+        fontSize: 22,
+      },
+    },
+  ],
+  legend: {
+    show: false,
+  },
+  animationDuration: 0,
+  animationDurationUpdate: 3000,
+  animationEasing: "linear",
+  animationEasingUpdate: "linear",
+};
+
+export default function setup(echartInstance, dataArr) {
+  const new_options = { ...options };
+  new_options.series[0].data = dataArr;
+  echartInstance.setOption(new_options);
+}

src/components/TeamChartMonth.vue

@@ -1,39 +1,47 @@
 <script setup>
-import { ref, onMounted } from 'vue';
-import * as echarts from 'echarts';
-import Container from './Base/Container.vue';
+import { ref, onMounted } from "vue";
+import * as echarts from "echarts";
+import Container from "./Base/Container.vue";
+import { useWsStore } from "../store";
+import chartSetup from "./HourChartOptions";
 
+const store = useWsStore();
 const chartChart = ref(null);
+const chart = ref(null);
+
+// 小时数据
+const hourData = ref(null);
+store.$subscribe((mutation, state) => {
+  console.log("lineHourList ===> ", state.data2.lineHourList);
+  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
+    id: `${item.lineName}_${index}`,
+    hour: item.hour || `${index}`.padStart(2, "0"),
+    data: item.num || Math.random() * 100,
+  }));
+  chartSetup(
+    chart.value,
+    hourData.value.map((item) => item.hour),
+    hourData.value.map((item) => item.data)
+  );
+});
 
 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);
+  chart.value.setOption({});
 });
 </script>
 
 <template>
   <Container class="chart" title="本月班组情况" icon="cube">
-    <div ref="chartChart" class="chart-chart"></div>
+    <div
+      v-show="hourData && hourData.length > 0"
+      ref="chartChart"
+      class="chart-chart"
+    ></div>
+    <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
+      暂无数据
+    </p>
   </Container>
 </template>
 

src/components/TeamChartMonthOptions.js

@@ -0,0 +1,169 @@
+export const options = {
+  grid: {
+    top: "10%",
+    bottom: "10%",
+  },
+  title: [
+    {
+      text: "当前产量：" + 100 + " 片",
+      left: "27%",
+      textAlign: "center",
+      top: "67%",
+      textStyle: {
+        fontSize: 12,
+      },
+    },
+    {
+      text: "目标产量：" + 100 + " 片",
+      left: "27%",
+      textAlign: "center",
+      top: "82%",
+      textStyle: {
+        fontSize: 12,
+      },
+    },
+    {
+      text: "当前成品率：" + 22 + "%",
+      left: "73%",
+      textAlign: "center",
+      top: "67%",
+      textStyle: {
+        fontSize: 12,
+      },
+    },
+    {
+      text: "目标成品率：" + 22 + "%",
+      left: "73%",
+      textAlign: "center",
+      top: "82%",
+      textStyle: {
+        fontSize: 12,
+      },
+    },
+  ],
+  series: [
+    {
+      type: "gauge",
+      startAngle: 90,
+      center: ["27%", "35%"],
+      endAngle: -270,
+      radius: "55%",
+      progress: {
+        show: true,
+        width: 12,
+      },
+      axisLine: {
+        lineStyle: {
+          width: 12,
+        },
+      },
+      pointer: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      detail: {
+        valueAnimation: true,
+        fontSize: 12,
+        offsetCenter: [0, "0%"],
+        formatter: "{value}%",
+        color: "rgba(255, 255, 255, 1)",
+      },
+      data: [
+        {
+          // value: (nowProduction / targetProduction * 100).toFixed(1),
+          value: 100,
+        },
+      ],
+    },
+    {
+      type: "gauge",
+      startAngle: 90,
+      center: ["73%", "35%"],
+      endAngle: -270,
+      radius: "55%",
+      progress: {
+        show: true,
+        width: 12,
+      },
+      axisLine: {
+        lineStyle: {
+          width: 12,
+        },
+      },
+      pointer: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false,
+      },
+      detail: {
+        show: true,
+        valueAnimation: true,
+        fontSize: 12,
+        offsetCenter: [0, "0%"],
+        formatter: 0 + "%",
+        // formatter: (nowYield / targetYield * 100).toFixed(1) + '%',
+        color: "rgba(255, 255, 255, 1)",
+      },
+      data: [
+        {
+          // value: targetYield,
+          value: 100,
+          name: "Perfect",
+          title: {
+            show: false,
+          },
+          detail: {
+            show: false,
+            valueAnimation: true,
+            offsetCenter: ["0%", "-20%"],
+          },
+        },
+        {
+          value: 100,
+          // value: nowYield,
+          name: "Good",
+          title: {
+            show: false,
+          },
+          detail: {
+            show: false,
+            valueAnimation: true,
+            offsetCenter: ["0%", "10%"],
+          },
+        },
+        {
+          value: 0,
+          detail: {
+            show: true,
+          },
+        },
+      ],
+    },
+  ],
+};
+export default function setup(echartInstance, data) {
+  const new_options = { ...options };
+  new_options.title[0].text = "当前产量：" + data.nowProduction + " 片";
+  new_options.title[1].text = "目标产量：" + data.targetProduction + " 片";
+  new_options.title[2].text = "当前成品率：" + data.nowYield + "%";
+  new_options.title[3].text = "目标成品率：" + data.targetYield + "%";
+  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
+  echartInstance.setOption(new_options);
+}