update

src/components/HourChart.vue

@@ -9,19 +9,32 @@ const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 // 小时数据
-const hourData = ref([]);
+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 }
+]);
 store.$subscribe((mutation, state) => {
-  console.log("=======>", state.data2.lineHourList?.length);
+  // console.log("[HourChart] =======>", state.data2.lineHourList?.length);
   if (
     state.data2.lineHourList == undefined ||
     state.data2.lineHourList?.length == 0
   ) {
+    // console.log("[HourChart] 清除数据");
     hourData.value.splice(0);
     if (chart.value) chart.value.dispose();
     return;
   }
-  console.log("lineHourList ===> ", state.data2.lineHourList);
-  hourData.value = (state.data2?.lineHourList ?? []).map((item, index) => ({
+  // 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 },
+  ]).map((item, index) => ({
     id: `${item.lineName}_${index}`,
     hour: item.hour || `${index}`.padStart(2, "0"),
     data: item.num || Math.floor(Math.random() * 100),
@@ -33,6 +46,7 @@ function setupChart() {
   if (chart.value) chart.value.dispose();
   nextTick(() => {
     chart.value = echarts.init(chartChart.value);
+    // console.log("[HourChart]  ===> 设置chart: ", chart.value, hourData.value.map((item) => item.hour), hourData.value.map((item) => item.data));
     chartSetup(
       chart.value,
       hourData.value.map((item) => item.hour),
@@ -64,11 +78,7 @@ onMounted(() => {
 
 <template>
   <Container class="chart" title="小时数据" icon="cube">
-    <div
-      ref="chartChart"
-      class="chart-chart"
-      style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"
-    ></div>
+    <div ref="chartChart" class="chart-chart" style="{opacity: (hourData && hourData.length > 0) ? 1 : 0}"></div>
     <p v-show="!hourData || hourData.length === 0" class="empty-data-hint">
       暂无数据
     </p>
@@ -80,8 +90,7 @@ onMounted(() => {
   height: 300px;
 }
 
-.chart-inner {
-}
+.chart-inner {}
 
 .chart-chart {
   height: 100%;

src/components/HourChartOptions.js

@@ -1,9 +1,9 @@
 export const options = {
   grid: {
-    top: "10",
-    bottom: "10",
-    left: "10",
-    right: "10",
+    top: 10,
+    bottom: 0,
+    left: 12,
+    right: 10,
     containLabel: true,
   },
   xAxis: {
@@ -43,8 +43,10 @@ export const options = {
   },
   series: [
     {
-      data: Array.from({ length: 7 }, () => Math.random() * 100),
+      data: [],
+      // data: Array.from({ length: 7 }, () => Math.random() * 100),
       type: "bar",
+      // barWidth: 20,
       showBackground: true,
       backgroundStyle: {
         color: "rgba(180, 180, 180, 0.2)",

src/components/TeamChartDay.vue

@@ -9,20 +9,23 @@ const store = useWsStore();
 const chartChart = ref(null);
 const chart = ref(null);
 
-const dayData = ref([]);
+const dayData = ref([10,12,13]);
 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;
   }
-  console.log(
-    "classTodayProductYield ===> ",
-    state.data2.classTodayProductYield
-  );
+  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);
@@ -32,6 +35,7 @@ store.$subscribe((mutation, state) => {
       dayData.value[2] = parseInt(state.data2.classTodayProductYield[i].yield);
     }
   }
+  console.log("[ChartDay]  ===>  dayData: ", dayData.value);
   setupChart();
 });
 
@@ -50,11 +54,7 @@ onMounted(() => {
 
 <template>
   <Container class="chart" title="本日班组情况" icon="cube">
-    <div
-      ref="chartChart"
-      class="chart-chart"
-      style="{opacity: (dayData && dayData.length > 0) ? 1 : 0}"
-    ></div>
+    <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>
@@ -66,8 +66,7 @@ onMounted(() => {
   height: 300px;
 }
 
-.chart-inner {
-}
+.chart-inner {}
 
 .chart-chart {
   height: 100%;

src/components/TeamChartDayOptions.js

@@ -1,9 +1,9 @@
 export const options = {
   grid: {
-    top: "10",
-    bottom: "10",
-    left: "10",
-    right: "10",
+    top: 10,
+    bottom: 0,
+    left: 12,
+    right: 10,
     containLabel: true,
   },
   xAxis: {
@@ -56,6 +56,7 @@ export const options = {
 };
 
 export default function setup(echartInstance, dataArr) {
+  debugger;
   const new_options = { ...options };
   new_options.series[0].data = dataArr;
   echartInstance.setOption(new_options);