From 0ce97527b79233089cde366c6c72ab2ecc1b08c3 Mon Sep 17 00:00:00 2001 From: ihzero Date: Wed, 16 Nov 2022 14:48:30 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A4=A7=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/visualization/components/DXCY.vue | 76 ++++++++++------- src/views/visualization/components/DXJG.vue | 94 +++++++++++++-------- src/views/visualization/components/DXLX.vue | 81 ++++++++++-------- src/views/visualization/components/DZWZ.vue | 70 +++++++++------ 4 files changed, 195 insertions(+), 126 deletions(-) diff --git a/src/views/visualization/components/DXCY.vue b/src/views/visualization/components/DXCY.vue index 8efc00e6..c7adfb5b 100644 --- a/src/views/visualization/components/DXCY.vue +++ b/src/views/visualization/components/DXCY.vue @@ -45,17 +45,21 @@ const { setOptions, getInstance } = useECharts(chartRef as Ref) - async function getData() { + async function getData(init = true) { const resData = await getRiceShrimpIndustry({ year: visualizationStore.getYear, }) Data.x_axis = resData.x_axis Data.series = resData.series - - chartsInit() + if (init) { + chartsInit() + } else { + chartLineAmi() + } } + let legendData = [] as any - const chartsInit = () => { + function formatChartData() { const obj = { legendData: [] as any, series: [] as any, @@ -63,12 +67,12 @@ Data.series.forEach(({ name, data }, index) => { const color = chartLineColors[index % chartLineColors.length] - obj.legendData.push(name) + obj.legendData.push(name + '') obj.series.push({ name: name, data: data, - smooth: false, type: 'line', + smooth: false, // symbol: 'none', itemStyle: { color: color.itemColor, @@ -78,8 +82,11 @@ }, }) }) - legendData = obj.legendData + return obj + } + const chartsInit = () => { + const obj = formatChartData() setOptions({ grid: { left: '2%', right: '4%', top: '10%', bottom: '2%', containLabel: true }, @@ -142,35 +149,40 @@ function chartAmi() { let index = 0 const timerNumber = 3000 - let sleep = 1 timer && clearInterval(timer) + let currentIndex = 0 + let sleep = 0 + const fo = 2 timer = setInterval(() => { - const currentIndex = index % 4 - sleep = index % (4 * 2) - + currentIndex = index % 4 + sleep = index % (4 * fo) getInstance()?.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex, }) - if (sleep == 7) { - chartLineAmi() + if (sleep + 1 >= 4 * fo) { + timer && clearInterval(timer) + setTimeout(() => { + getInstance()?.dispatchAction({ + type: 'hideTip', + }) + }, timerNumber) + getData(false) } - index++ }, timerNumber) } function chartLineAmi() { + const obj = formatChartData() + let index = 0 + let currentIndex = 0 const timerNumber = 3000 timer && clearInterval(timer) - let legendIndex = legendData.length - let sleep = 6000 / 3000 timer = setInterval(() => { - getInstance()?.dispatchAction({ - type: 'hideTip', - }) - if (legendIndex == legendData.length) { + currentIndex = index % legendData.length + if (currentIndex == 0) { legendData.forEach((_, index) => { getInstance()?.dispatchAction({ type: 'legendUnSelect', @@ -178,17 +190,21 @@ }) }) } - if (legendIndex >= 0) { - getInstance()?.dispatchAction({ - type: 'legendSelect', - name: legendData[legendIndex - 1], - }) + getInstance()?.setOption({ + series: [obj.series[currentIndex]], + }) + getInstance()?.dispatchAction({ + type: 'legendSelect', + name: legendData[currentIndex], + }) + if (currentIndex == legendData.length - 1) { + timer && clearInterval(timer) + setTimeout(() => { + chartAmi() + }, timerNumber) } - if (legendIndex <= 0) { - if (sleep <= 0) getData() - sleep-- - } - legendIndex-- + + index++ }, timerNumber) } diff --git a/src/views/visualization/components/DXJG.vue b/src/views/visualization/components/DXJG.vue index 109b5266..59c26a54 100644 --- a/src/views/visualization/components/DXJG.vue +++ b/src/views/visualization/components/DXJG.vue @@ -51,14 +51,15 @@ chartsInit() } - const reducer = (acc, cur) => (cur > acc ? cur : acc) - function largestOfFour(arr) { - return arr.map(({ data }) => data.reduce(reducer)) - } + // const reducer = (acc, cur) => (cur > acc ? cur : acc) + // function largestOfFour(arr) { + // return arr.map(({ data }) => data.reduce(reducer)) + // } const { setOptions, getInstance } = useECharts(chartRef as Ref) let legendData = [] as any - const chartsInit = () => { + + function formatChartData() { const obj = { legendData: [] as any, series: [] as any, @@ -81,10 +82,13 @@ }, }) }) - - const max = Math.max(...largestOfFour(Data.series)) ?? 100 - legendData = obj.legendData + return obj + } + + const chartsInit = () => { + const obj = formatChartData() + // const max = Math.max(...largestOfFour(Data.series)) ?? 100 setOptions({ grid: { left: '4%', right: '4%', top: '10%', bottom: '2%', containLabel: true }, @@ -152,29 +156,42 @@ let timer: any = null function chartAmi() { - let index = 1 + let index = 0 const timerNumber = 3000 timer && clearInterval(timer) - let sleep = 1 - let type = 'showTip' - let legendIndex = legendData.length + let currentIndex = 0 + let sleep = 0 + const fo = 2 timer = setInterval(() => { - if (legendData.length == 0) return - const currentIndex = (index - 1) % 4 - - sleep = index % (4 * 2) - + currentIndex = index % 4 + sleep = index % (4 * fo) getInstance()?.dispatchAction({ - type: type, + type: 'showTip', seriesIndex: 0, dataIndex: currentIndex, }) - // console.log('currentIndex', currentIndex) - // console.log('legendIndex', legendIndex) - // console.log('sleep', sleep) - // console.log('index', index) + if (sleep + 1 >= 4 * fo) { + timer && clearInterval(timer) + setTimeout(() => { + getInstance()?.dispatchAction({ + type: 'hideTip', + }) + }, timerNumber) + getData(false) + } + index++ + }, timerNumber) + } - if (type == 'hideTip' && currentIndex == 0) { + function chartLineAmi() { + const obj = formatChartData() + let index = 0 + let currentIndex = 0 + const timerNumber = 3000 + timer && clearInterval(timer) + timer = setInterval(() => { + currentIndex = index % legendData.length + if (currentIndex == 0) { legendData.forEach((_, index) => { getInstance()?.dispatchAction({ type: 'legendUnSelect', @@ -182,28 +199,33 @@ }) }) } - if (type == 'hideTip') { - getInstance()?.dispatchAction({ - type: 'legendSelect', - name: legendData[legendIndex - 1], - }) - if (legendIndex == 0) getData() - legendIndex-- - } - - if (sleep == 0) { - type = 'hideTip' + getInstance()?.setOption({ + series: [obj.series[currentIndex]], + }) + getInstance()?.dispatchAction({ + type: 'legendSelect', + name: legendData[currentIndex], + }) + if (currentIndex == legendData.length - 1) { + timer && clearInterval(timer) + setTimeout(() => { + chartAmi() + }, timerNumber) } index++ }, timerNumber) } - async function getData() { + async function getData(init = true) { const resData = await getRiceShrimpPrice() Data.x_axis = resData.x_axis Data.series = resData.series - chartsInit() + if (init) { + chartsInit() + } else { + chartLineAmi() + } } onBeforeMount(() => { diff --git a/src/views/visualization/components/DXLX.vue b/src/views/visualization/components/DXLX.vue index ae444af1..0f4e850a 100644 --- a/src/views/visualization/components/DXLX.vue +++ b/src/views/visualization/components/DXLX.vue @@ -31,19 +31,23 @@ const { setOptions, getInstance } = useECharts(chartRef as Ref) - async function getData() { + async function getData(init = true) { const resData = await getRiceShrimpFlow({ year: visualizationStore.getYear, }) Data.x_axis = resData.x_axis Data.series = resData.series - chartsInit() + if (init) { + chartsInit() + } else { + chartLineAmi() + } } let legendData = [] as any - const chartsInit = () => { + function formatChartData() { const obj = { legendData: [] as any, series: [] as any, @@ -51,15 +55,13 @@ Data.series.forEach(({ name, data }, index) => { const color = chartLineColors[index % chartLineColors.length] - - obj.legendData.push(name) + obj.legendData.push(name + '') obj.series.push({ name: name, - data: data.map((e) => (e ? Number((e / 2000).toFixed(2)) : e)), - smooth: false, + data: data, type: 'line', + smooth: false, // symbol: 'none', - stack: 'Total', itemStyle: { color: color.itemColor, }, @@ -68,8 +70,12 @@ }, }) }) - legendData = obj.legendData + return obj + } + + const chartsInit = () => { + const obj = formatChartData() setOptions({ grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true }, legend: { @@ -129,39 +135,44 @@ } let timer: any = null + function chartAmi() { let index = 0 const timerNumber = 3000 - let sleep = 1 timer && clearInterval(timer) + let currentIndex = 0 + let sleep = 0 + const fo = 2 timer = setInterval(() => { - const currentIndex = index % 4 - sleep = index % (4 * 2) - + currentIndex = index % 4 + sleep = index % (4 * fo) getInstance()?.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex, }) - - if (sleep == 7) { - chartLineAmi() + if (sleep + 1 >= 4 * fo) { + timer && clearInterval(timer) + setTimeout(() => { + getInstance()?.dispatchAction({ + type: 'hideTip', + }) + }, timerNumber) + getData(false) } - index++ }, timerNumber) } function chartLineAmi() { + const obj = formatChartData() + let index = 0 + let currentIndex = 0 const timerNumber = 3000 timer && clearInterval(timer) - let legendIndex = legendData.length - let sleep = 6000 / 3000 timer = setInterval(() => { - getInstance()?.dispatchAction({ - type: 'hideTip', - }) - if (legendIndex == legendData.length) { + currentIndex = index % legendData.length + if (currentIndex == 0) { legendData.forEach((_, index) => { getInstance()?.dispatchAction({ type: 'legendUnSelect', @@ -169,17 +180,21 @@ }) }) } - if (legendIndex >= 0) { - getInstance()?.dispatchAction({ - type: 'legendSelect', - name: legendData[legendIndex - 1], - }) + getInstance()?.setOption({ + series: [obj.series[currentIndex]], + }) + getInstance()?.dispatchAction({ + type: 'legendSelect', + name: legendData[currentIndex], + }) + if (currentIndex == legendData.length - 1) { + timer && clearInterval(timer) + setTimeout(() => { + chartAmi() + }, timerNumber) } - if (legendIndex <= 0) { - if (sleep <= 0) getData() - sleep-- - } - legendIndex-- + + index++ }, timerNumber) } diff --git a/src/views/visualization/components/DZWZ.vue b/src/views/visualization/components/DZWZ.vue index ffd2ea13..1acd9c06 100644 --- a/src/views/visualization/components/DZWZ.vue +++ b/src/views/visualization/components/DZWZ.vue @@ -62,19 +62,23 @@ const { setOptions, getInstance } = useECharts(chartRef as Ref) - async function getData() { + async function getData(init = true) { const resData = await getMateriel({ year: visualizationStore.getYear, type: currentTab.value, }) Data.x_axis = resData.x_axis Data.series = resData.series - chartsInit() + if (init) { + chartsInit() + } else { + chartLineAmi() + } } let legendData = [] as any - const chartsInit = () => { + function formatChartData() { const obj = { legendData: [] as any, series: [] as any, @@ -112,7 +116,11 @@ }) legendData = obj.legendData + return obj + } + const chartsInit = () => { + const obj = formatChartData() setOptions({ grid: { left: '2%', right: '2%', top: '50px', bottom: '2%', containLabel: true }, legend: { @@ -192,36 +200,40 @@ function chartAmi() { let index = 0 const timerNumber = 3000 - let sleep = 1 timer && clearInterval(timer) + let currentIndex = 0 + let sleep = 0 + const fo = 2 timer = setInterval(() => { - const currentIndex = index % 4 - sleep = index % (4 * 2) - + currentIndex = index % 4 + sleep = index % (4 * fo) getInstance()?.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: currentIndex, }) - - if (sleep == 7) { - chartLineAmi() + if (sleep + 1 >= 4 * fo) { + timer && clearInterval(timer) + setTimeout(() => { + getInstance()?.dispatchAction({ + type: 'hideTip', + }) + }, timerNumber) + getData(false) } - index++ }, timerNumber) } function chartLineAmi() { + const obj = formatChartData() + let index = 0 + let currentIndex = 0 const timerNumber = 3000 timer && clearInterval(timer) - let legendIndex = legendData.length - let sleep = 6000 / 3000 timer = setInterval(() => { - getInstance()?.dispatchAction({ - type: 'hideTip', - }) - if (legendIndex == legendData.length) { + currentIndex = index % legendData.length + if (currentIndex == 0) { legendData.forEach((_, index) => { getInstance()?.dispatchAction({ type: 'legendUnSelect', @@ -229,17 +241,21 @@ }) }) } - if (legendIndex >= 0) { - getInstance()?.dispatchAction({ - type: 'legendSelect', - name: legendData[legendIndex - 1], - }) + getInstance()?.setOption({ + series: [obj.series[currentIndex]], + }) + getInstance()?.dispatchAction({ + type: 'legendSelect', + name: legendData[currentIndex], + }) + if (currentIndex == legendData.length - 1) { + timer && clearInterval(timer) + setTimeout(() => { + chartAmi() + }, timerNumber) } - if (legendIndex <= 0) { - if (sleep <= 0) getData() - sleep-- - } - legendIndex-- + + index++ }, timerNumber) } From 94ab29223204e1c1469d207426d249013219de16 Mon Sep 17 00:00:00 2001 From: ihzero Date: Wed, 16 Nov 2022 15:02:38 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=A4=A7=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/visualization/components/DXCY.vue | 15 ++++++++++++++- src/views/visualization/components/DXJG.vue | 6 +++++- src/views/visualization/components/DXLX.vue | 6 +++++- src/views/visualization/components/DZWZ.vue | 6 +++++- src/views/visualization/index.vue | 14 +++++++++----- 5 files changed, 38 insertions(+), 9 deletions(-) diff --git a/src/views/visualization/components/DXCY.vue b/src/views/visualization/components/DXCY.vue index c7adfb5b..dfdd49ae 100644 --- a/src/views/visualization/components/DXCY.vue +++ b/src/views/visualization/components/DXCY.vue @@ -11,7 +11,16 @@