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';
-
+