update team chart day

This commit is contained in:
DESKTOP-FUDKNA8\znjsz 2024-01-22 16:37:54 +08:00
parent e7a0d10423
commit 32ae14602e
3 changed files with 38 additions and 35 deletions

View File

@ -10,11 +10,11 @@ const chartChart = ref(null);
const chart = ref(null); const chart = ref(null);
// //
const hourData = ref([ const hourData = ref([
{ lineName: '001', hour: '00:00', num: 10 }, // { lineName: '001', hour: '00:00', num: 10 },
{ lineName: '002', hour: '00:20', num: 20 }, // { lineName: '002', hour: '00:20', num: 20 },
{ lineName: '003', hour: '00:30', num: 30 }, // { lineName: '003', hour: '00:30', num: 30 },
{ lineName: '004', hour: '00:40', num: 14 }, // { lineName: '004', hour: '00:40', num: 14 },
{ lineName: '005', hour: '00:50', num: 50 } // { lineName: '005', hour: '00:50', num: 50 }
]); ]);
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
// console.log("[HourChart] =======>", state.data2.lineHourList?.length); // console.log("[HourChart] =======>", state.data2.lineHourList?.length);
@ -29,11 +29,11 @@ store.$subscribe((mutation, state) => {
} }
// console.log("[HourChart] ===> : ", state.data2.lineHourList); // console.log("[HourChart] ===> : ", state.data2.lineHourList);
hourData.value = (state.data2?.lineHourList ?? [ hourData.value = (state.data2?.lineHourList ?? [
{ lineName: '001', hour: '00:00', num: 10 }, // { lineName: '001', hour: '00:00', num: 10 },
{ lineName: '002', hour: '00:20', num: 20 }, // { lineName: '002', hour: '00:20', num: 20 },
{ lineName: '003', hour: '00:30', num: 30 }, // { lineName: '003', hour: '00:30', num: 30 },
{ lineName: '004', hour: '00:40', num: 14 }, // { lineName: '004', hour: '00:40', num: 14 },
{ lineName: '005', hour: '00:50', num: 50 }, // { lineName: '005', hour: '00:50', num: 50 },
]).map((item, index) => ({ ]).map((item, index) => ({
id: `${item.lineName}_${index}`, id: `${item.lineName}_${index}`,
hour: item.hour || `${index}`.padStart(2, "0"), hour: item.hour || `${index}`.padStart(2, "0"),
@ -90,8 +90,6 @@ onMounted(() => {
height: 300px; height: 300px;
} }
.chart-inner {}
.chart-chart { .chart-chart {
height: 100%; height: 100%;
} }

View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted, nextTick } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import Container from "./Base/Container.vue"; import Container from "./Base/Container.vue";
import { useWsStore } from "../store"; import { useWsStore } from "../store";
@ -9,7 +9,7 @@ const store = useWsStore();
const chartChart = ref(null); const chartChart = ref(null);
const chart = ref(null); const chart = ref(null);
const dayData = ref([10,12,13]); const dayData = ref([]);
store.$subscribe((mutation, state) => { store.$subscribe((mutation, state) => {
console.log("[ChartDay] ===> state: ", state.data2.classTodayProductYield); console.log("[ChartDay] ===> state: ", state.data2.classTodayProductYield);
if ( if (
@ -21,11 +21,7 @@ store.$subscribe((mutation, state) => {
if (chart.value) chart.value.dispose(); if (chart.value) chart.value.dispose();
return; return;
} }
classTodayProductYield = [
{yieldName: 'A', yield: 10},
{yieldName: 'C', yield: 20},
{yieldName: 'B', yield: 20},
]
for (let i = 0; i < state.data2.classTodayProductYield.length; ++i) { for (let i = 0; i < state.data2.classTodayProductYield.length; ++i) {
if (state.data2.classTodayProductYield[i].teamName == "A组") { if (state.data2.classTodayProductYield[i].teamName == "A组") {
dayData.value[0] = parseInt(state.data2.classTodayProductYield[i].yield); dayData.value[0] = parseInt(state.data2.classTodayProductYield[i].yield);
@ -39,6 +35,12 @@ store.$subscribe((mutation, state) => {
setupChart(); setupChart();
}); });
// onMounted(() => {
// nextTick(() => {
// setupChart();
// })
// })
function setupChart() { function setupChart() {
if (chart.value) chart.value.dispose(); if (chart.value) chart.value.dispose();
nextTick(() => { nextTick(() => {
@ -66,8 +68,6 @@ onMounted(() => {
height: 300px; height: 300px;
} }
.chart-inner {}
.chart-chart { .chart-chart {
height: 100%; height: 100%;
} }

View File

@ -1,16 +1,22 @@
export const options = { export const options = {
color: ['#ffd601', '#72340b'],
grid: { grid: {
top: 10, top: 10,
bottom: 0, bottom: 0,
left: 12, left: 0,
right: 10, right: 28,
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
max: 100, max: 100,
splitLine: {
lineStyle: {
color: "#fff2",
},
},
axisLabel: { axisLabel: {
fontSize: 22, fontSize: 16,
color: "#e5e5e533", color: "#e5e5e5a3",
}, },
}, },
yAxis: { yAxis: {
@ -21,28 +27,28 @@ export const options = {
animationDurationUpdate: 300, animationDurationUpdate: 300,
max: 2, // only the largest 3 bars will be displayed max: 2, // only the largest 3 bars will be displayed
axisLabel: { axisLabel: {
fontSize: 22, fontSize: 16,
color: "#e5e5e533", color: "#e5e5e5a3",
}, },
splitLine: { splitLine: {
show: false, lineStyle: {
color: "#e5e5e533", color: "#e5e5e5",
},
}, },
}, },
series: [ series: [
{ {
realtimeSort: true, realtimeSort: true,
name: "X",
type: "bar", type: "bar",
data: [10, 20, 30], // data: [10, 20, 30],
data: [],
label: { label: {
show: true, show: true,
position: "right", position: "right",
valueAnimation: true, valueAnimation: true,
formatter: "{c}%", formatter: "{c}%",
color: "#fff8", color: "#fff",
fontWeight: "bold", fontSize: 16,
fontSize: 22,
}, },
}, },
], ],
@ -56,7 +62,6 @@ export const options = {
}; };
export default function setup(echartInstance, dataArr) { export default function setup(echartInstance, dataArr) {
debugger;
const new_options = { ...options }; const new_options = { ...options };
new_options.series[0].data = dataArr; new_options.series[0].data = dataArr;
echartInstance.setOption(new_options); echartInstance.setOption(new_options);