diff --git a/src/components/datapage/LatestWeekYield.vue b/src/components/datapage/LatestWeekYield.vue index 6ef2305..e9e5f4f 100644 --- a/src/components/datapage/LatestWeekYield.vue +++ b/src/components/datapage/LatestWeekYield.vue @@ -3,7 +3,7 @@ import { ref, watch, onMounted, nextTick } from "vue"; import * as echarts from "echarts"; import Container from "../Base/Container.vue"; import { useWsStore } from "../../store"; -import chartSetup from "./LatestWeekYieldOptions"; +import chartSetup, { loadData } from "./LatestWeekYieldOptions"; const store = useWsStore(); const chartContainer = ref(null); @@ -12,23 +12,45 @@ const show = ref(false); onMounted(() => { chartContainer.value.classList.add("h-full"); - // const d = loadData(store.data2.lineSevenDayLogList); - const d = loadData([ - { - data: [ - { day: "1001", num: 24 }, - { day: "1002", num: 14 }, - { day: "1003", num: 234 }, - { day: "1004", num: 84 }, - { day: "1005", num: 34 }, - { day: "1006", num: 44 }, - { day: "1007", num: 20 }, - ], - name: "钢一线", - }, - { data: [], name: "钢二线" }, - { data: [], name: "钢三线" }, - ]); + const d = loadData(store.data2.lineSevenDayLogList); + // const d = loadData([ + // { + // data: [ + // { day: "10-10", num: Math.floor(Math.random() * 500) }, + // { day: "10-11", num: Math.floor(Math.random() * 500) }, + // { day: "10-12", num: Math.floor(Math.random() * 500) }, + // { day: "10-13", num: Math.floor(Math.random() * 500) }, + // { day: "10-14", num: Math.floor(Math.random() * 500) }, + // { day: "10-15", num: Math.floor(Math.random() * 500) }, + // { day: "10-16", num: Math.floor(Math.random() * 500) }, + // ], + // name: "钢一线", + // }, + // { + // data: [ + // { day: "10-10", num: Math.floor(Math.random() * 500) }, + // { day: "10-11", num: Math.floor(Math.random() * 500) }, + // { day: "10-12", num: Math.floor(Math.random() * 500) }, + // { day: "10-13", num: Math.floor(Math.random() * 500) }, + // { day: "10-14", num: Math.floor(Math.random() * 500) }, + // { day: "10-15", num: Math.floor(Math.random() * 500) }, + // { day: "10-16", num: Math.floor(Math.random() * 500) }, + // ], + // name: "钢二线", + // }, + // { + // data: [ + // { day: "10-10", num: Math.floor(Math.random() * 500) }, + // { day: "10-11", num: Math.floor(Math.random() * 500) }, + // { day: "10-12", num: Math.floor(Math.random() * 500) }, + // { day: "10-13", num: Math.floor(Math.random() * 500) }, + // { day: "10-14", num: Math.floor(Math.random() * 500) }, + // { day: "10-15", num: Math.floor(Math.random() * 500) }, + // { day: "10-16", num: Math.floor(Math.random() * 500) }, + // ], + // name: "钢三线", + // }, + // ]); if (!d) { show.value = false; if (chartInstance.value) { @@ -38,52 +60,52 @@ onMounted(() => { } else { if (!chartInstance.value) chartInstance.value = echarts.init(chartContainer.value); - chartSetup(chartInstance.value); + chartSetup(chartInstance.value, d); show.value = true; } }); // 订阅 store.$subscribe((mutation, state) => { - // const d = loadData(state.data2.lineSevenDayLogList); - const d = loadData([ - { - data: [ - { day: "1001", num: 24 }, - { day: "1002", num: 14 }, - { day: "1003", num: 234 }, - { day: "1004", num: 84 }, - { day: "1005", num: 34 }, - { day: "1006", num: 44 }, - { day: "1007", num: 20 }, - ], - name: "钢一线", - }, - { - data: [ - { day: "1001", num: 24 }, - { day: "1002", num: 14 }, - { day: "1003", num: 234 }, - { day: "1004", num: 84 }, - { day: "1005", num: 34 }, - { day: "1006", num: 44 }, - { day: "1007", num: 20 }, - ], - name: "钢二线", - }, - { - data: [ - { day: "1001", num: 24 }, - { day: "1002", num: 14 }, - { day: "1003", num: 234 }, - { day: "1004", num: 84 }, - { day: "1005", num: 34 }, - { day: "1006", num: 44 }, - { day: "1007", num: 20 }, - ], - name: "钢三线", - }, - ]); + const d = loadData(state.data2.lineSevenDayLogList); + // const d = loadData([ + // { + // data: [ + // { day: "10-10", num: Math.floor(Math.random() * 500) }, + // { day: "10-11", num: Math.floor(Math.random() * 500) }, + // { day: "10-12", num: Math.floor(Math.random() * 500) }, + // { day: "10-13", num: Math.floor(Math.random() * 500) }, + // { day: "10-14", num: Math.floor(Math.random() * 500) }, + // { day: "10-15", num: Math.floor(Math.random() * 500) }, + // { day: "10-16", num: Math.floor(Math.random() * 500) }, + // ], + // name: "钢一线", + // }, + // { + // data: [ + // { day: "10-10", num: Math.floor(Math.random() * 500) }, + // { day: "10-11", num: Math.floor(Math.random() * 500) }, + // { day: "10-12", num: Math.floor(Math.random() * 500) }, + // { day: "10-13", num: Math.floor(Math.random() * 500) }, + // { day: "10-14", num: Math.floor(Math.random() * 500) }, + // { day: "10-15", num: Math.floor(Math.random() * 500) }, + // { day: "10-16", num: Math.floor(Math.random() * 500) }, + // ], + // name: "钢二线", + // }, + // { + // data: [ + // { day: "10-10", num: Math.floor(Math.random() * 500) }, + // { day: "10-11", num: Math.floor(Math.random() * 500) }, + // { day: "10-12", num: Math.floor(Math.random() * 500) }, + // { day: "10-13", num: Math.floor(Math.random() * 500) }, + // { day: "10-14", num: Math.floor(Math.random() * 500) }, + // { day: "10-15", num: Math.floor(Math.random() * 500) }, + // { day: "10-16", num: Math.floor(Math.random() * 500) }, + // ], + // name: "钢三线", + // }, + // ]); if (!d) { show.value = false; if (chartInstance.value) { @@ -93,37 +115,10 @@ store.$subscribe((mutation, state) => { } else { if (!chartInstance.value) chartInstance.value = echarts.init(chartContainer.value); - chartSetup(chartInstance.value); + chartSetup(chartInstance.value, d); show.value = true; } }); - -function loadData(list) { - if (!list || list.length != 3 || list[0].data.length <= 0) return null; - const outerdata = [[], [], [], [], [], [], []]; - - list.forEach(line => { - - }) - - const dateList = list[0].data.map((item) => item.day.toString()).sort(); - console.log("datelist", dateList); - dateList.forEach((date, index) => { - outerdata[index][0] = date; - }); - list.forEach((line, index) => { - if (line.data[0] != null) { - for (let x = 0; x < 7; x++) { - for (let y = 0; y < line.data.length; y++) { - if (outerdata[x + 1][0] == line.data[y].day) { - outerdata[x + 1][line + 1] = line.data[y].num; - } - } - } - } - }); - return outerdata; -}