From 3d765b40261503a11d6309d601abb5b9018e9f0c Mon Sep 17 00:00:00 2001 From: "DESKTOP-FUDKNA8\\znjsz" Date: Fri, 19 Jan 2024 16:58:33 +0800 Subject: [PATCH] update charts --- src/assets/menu_icon/Icon3D.vue | 2 +- src/components/HourChart.vue | 66 ++++++++++++++++--------- src/components/HourChartOptions.js | 23 ++++++--- src/components/TeamChartDay.vue | 51 ++++++++++++------- src/components/TeamChartDayOptions.js | 16 ++++-- src/components/TeamChartMonth.vue | 46 +++++++++-------- src/components/TeamChartMonthOptions.js | 2 +- src/components/Tools.vue | 6 ++- src/pages/AnnouncementPage.vue | 13 ++++- vite.config.js | 4 ++ 10 files changed, 151 insertions(+), 78 deletions(-) diff --git a/src/assets/menu_icon/Icon3D.vue b/src/assets/menu_icon/Icon3D.vue index d66f8d7..c30398f 100644 --- a/src/assets/menu_icon/Icon3D.vue +++ b/src/assets/menu_icon/Icon3D.vue @@ -40,7 +40,7 @@ defineProps({ result="shadowBlurOuter1" > -import { ref, watch, onMounted } from "vue"; +import { ref, watch, onMounted, nextTick } from "vue"; import * as echarts from "echarts"; import Container from "./Base/Container.vue"; import { useWsStore } from "../store"; @@ -9,46 +9,69 @@ const store = useWsStore(); const chartChart = ref(null); const chart = ref(null); // 小时数据 -const hourData = ref(null); +const hourData = ref([]); store.$subscribe((mutation, state) => { + console.log("=======>", state.data2.lineHourList?.length); + if ( + state.data2.lineHourList == undefined || + state.data2.lineHourList?.length == 0 + ) { + 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) => ({ id: `${item.lineName}_${index}`, hour: item.hour || `${index}`.padStart(2, "0"), - data: item.num || Math.random() * 100, + data: item.num || Math.floor(Math.random() * 100), })); - chartSetup( - chart.value, - hourData.value.map((item) => item.hour), - hourData.value.map((item) => item.data) - ); + setupChart(); }); -// watch(hourData, (newVal) => { -// if (newVal) { -// chartSetup( -// chart.value, -// newVal.map((item) => item.hour), -// newVal.map((item) => item.data) -// ); -// } -// }); +function setupChart() { + if (chart.value) chart.value.dispose(); + nextTick(() => { + chart.value = echarts.init(chartChart.value); + chartSetup( + chart.value, + hourData.value.map((item) => item.hour), + hourData.value.map((item) => item.data) + ); + }); + + // chart.value.setOption({ + // xAxis: { + // type: "category", + // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], + // }, + // yAxis: { + // type: "value", + // }, + // series: [ + // { + // data: [150, 230, 224, 218, 135, 147, 260], + // type: "line", + // }, + // ], + // }); +} onMounted(() => { chartChart.value.classList.add("h-full"); - chart.value = echarts.init(chartChart.value); - chart.value.setOption({}) }); @@ -58,7 +81,6 @@ onMounted(() => { } .chart-inner { - background: #0f0; } .chart-chart { diff --git a/src/components/HourChartOptions.js b/src/components/HourChartOptions.js index e2147e5..64a6d74 100644 --- a/src/components/HourChartOptions.js +++ b/src/components/HourChartOptions.js @@ -1,21 +1,22 @@ export const options = { grid: { - top: "5%", - bottom: "5%", - left: "3%", - right: "3%", + top: "10", + bottom: "10", + left: "10", + right: "10", containLabel: true, }, xAxis: { type: "category", - data: ["00", "11", "22", "33", "44", "55", "66"], + data: [], axisLabel: { fontSize: 16, + color: '#fff8' }, axisLine: { show: true, lineStyle: { - color: "#dff1fe", + color: "#e6e6e633", }, }, }, @@ -24,13 +25,21 @@ export const options = { axisLine: { show: true, lineStyle: { - color: "#dff1fe", + color: "#e6e6e633", }, }, + splitLine: { + lineStyle: { + color: '#e6e6e633' + } + }, axisLabel: { fontSize: 16, + color: '#fff8' }, minInterval: 1, + max: 100, + min: 1 }, series: [ { diff --git a/src/components/TeamChartDay.vue b/src/components/TeamChartDay.vue index 8538d20..ec2c89c 100644 --- a/src/components/TeamChartDay.vue +++ b/src/components/TeamChartDay.vue @@ -3,43 +3,59 @@ import { ref, onMounted } from "vue"; import * as echarts from "echarts"; import Container from "./Base/Container.vue"; import { useWsStore } from "../store"; -import chartSetup from "./HourChartOptions"; +import setupFn from "./TeamChartDayOptions"; const store = useWsStore(); const chartChart = ref(null); const chart = ref(null); -// 小时数据 -const hourData = ref(null); +const dayData = ref([]); 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) + if ( + state.data2.classTodayProductYield == undefined || + state.data2.classTodayProductYield?.length == 0 + ) { + dayData.value.splice(0); + if (chart.value) chart.value.dispose(); + return; + } + console.log( + "classTodayProductYield ===> ", + state.data2.classTodayProductYield ); + 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); + } + } + setupChart(); }); +function setupChart() { + if (chart.value) chart.value.dispose(); + nextTick(() => { + chart.value = echarts.init(chartChart.value); + setupFn(chart.value, dayData.value); + }); +} + onMounted(() => { chartChart.value.classList.add("h-full"); - chart.value = echarts.init(chartChart.value); - chart.value.setOption({}); });