diff --git a/src/components/datapage/TeamChartDay.vue b/src/components/datapage/TeamChartDay.vue index d09af92..3a25a8a 100644 --- a/src/components/datapage/TeamChartDay.vue +++ b/src/components/datapage/TeamChartDay.vue @@ -8,47 +8,49 @@ import setupFn from "./TeamChartDayOptions"; const store = useWsStore(); const chartChart = ref(null); const chart = ref(null); +const showChartDom = ref(false); -const dayData = ref([]); -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); +/** 无状态,处理数据 */ +function loadData(yieldArray) { + const result = []; + if (yieldArray == undefined || yieldArray?.length == 0) return null; + for (let i = 0; i < yieldArray.length; ++i) { + if (yieldArray[i].teamName == "A组") { + result[0] = parseInt(yieldArray[i].yield); + } else if (yieldArray[i].teamName == "B组") { + result[1] = parseInt(yieldArray[i].yield); + } else if (yieldArray[i].teamName == "C组") { + result[2] = parseInt(yieldArray[i].yield); + } + } + return result; +} + +function setupChart(chart, dom, data) { + if (chart.value) chart.value.dispose(); + nextTick(() => { + chart.value = echarts.init(dom); + setupFn(chart.value, data); + }); +} + +/** 有状态,处理数据 */ +function __apply(yieldArray) { + const d = loadData(yieldArray); + if (!d) { + showChartDom.value = false; if (chart.value) chart.value.dispose(); return; } - - 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); - } - } - console.log("[ChartDay] ===> dayData: ", dayData.value); - setupChart(); -}); - -// onMounted(() => { -// nextTick(() => { -// setupChart(); -// }) -// }) - -function setupChart() { - if (chart.value) chart.value.dispose(); - nextTick(() => { - chart.value = echarts.init(chartChart.value); - setupFn(chart.value, dayData.value); - }); + showChartDom.value = true; + setupChart(chart, chartChart.value, d); } +// 订阅 +store.$subscribe((mutation, state) => { + __apply(state.data2.classTodayProductYield); +}); + onMounted(() => { chartChart.value.classList.add("h-full"); }); @@ -56,10 +58,12 @@ onMounted(() => { diff --git a/src/components/datapage/TeamChartDayOptions.js b/src/components/datapage/TeamChartDayOptions.js index 45ac40f..18a4820 100644 --- a/src/components/datapage/TeamChartDayOptions.js +++ b/src/components/datapage/TeamChartDayOptions.js @@ -1,11 +1,13 @@ export const options = { - color: ['#ffd601', '#72340b'], + color: ['#a4c9d1', '#72340b', '#ffd601' ], grid: { - top: 10, - bottom: 0, - left: 0, + top: 8, + bottom: 20, + left: 42, right: 28, - containLabel: true, + }, + legend: { + show: false, }, xAxis: { max: 100, @@ -23,8 +25,6 @@ export const options = { type: "category", data: ["A组", "B组", "C组"], inverse: true, - animationDuration: 300, - animationDurationUpdate: 300, max: 2, // only the largest 3 bars will be displayed axisLabel: { fontSize: 16, @@ -38,27 +38,18 @@ export const options = { }, series: [ { - realtimeSort: true, type: "bar", - // data: [10, 20, 30], - data: [], + data: [34, 2, 23], label: { show: true, position: "right", - valueAnimation: true, formatter: "{c}%", color: "#fff", fontSize: 16, }, }, ], - legend: { - show: false, - }, - animationDuration: 0, - animationDurationUpdate: 3000, - animationEasing: "linear", - animationEasingUpdate: "linear", + }; export default function setup(echartInstance, dataArr) { diff --git a/src/pages/DataPage.vue b/src/pages/DataPage.vue index 3e8b05e..f8b7b67 100644 --- a/src/pages/DataPage.vue +++ b/src/pages/DataPage.vue @@ -20,7 +20,7 @@ import LineMonth from '../components/datapage/LineMonth.vue'; - +