Compare commits

..

No commits in common. "612fde7a010b2f2841d4b50c6b7438a6efbd3792" and "0c1b5119d8e85edd70ec25ba3b7b4037a203dc43" have entirely different histories.

4 changed files with 126 additions and 195 deletions

View File

@ -45,21 +45,17 @@
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>) const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
async function getData(init = true) { async function getData() {
const resData = await getRiceShrimpIndustry({ const resData = await getRiceShrimpIndustry({
year: visualizationStore.getYear, year: visualizationStore.getYear,
}) })
Data.x_axis = resData.x_axis Data.x_axis = resData.x_axis
Data.series = resData.series Data.series = resData.series
if (init) {
chartsInit()
} else {
chartLineAmi()
}
}
chartsInit()
}
let legendData = [] as any let legendData = [] as any
function formatChartData() { const chartsInit = () => {
const obj = { const obj = {
legendData: [] as any, legendData: [] as any,
series: [] as any, series: [] as any,
@ -67,12 +63,12 @@
Data.series.forEach(({ name, data }, index) => { Data.series.forEach(({ name, data }, index) => {
const color = chartLineColors[index % chartLineColors.length] const color = chartLineColors[index % chartLineColors.length]
obj.legendData.push(name + '') obj.legendData.push(name)
obj.series.push({ obj.series.push({
name: name, name: name,
data: data, data: data,
type: 'line',
smooth: false, smooth: false,
type: 'line',
// symbol: 'none', // symbol: 'none',
itemStyle: { itemStyle: {
color: color.itemColor, color: color.itemColor,
@ -82,11 +78,8 @@
}, },
}) })
}) })
legendData = obj.legendData legendData = obj.legendData
return obj
}
const chartsInit = () => {
const obj = formatChartData()
setOptions({ setOptions({
grid: { left: '2%', right: '4%', top: '10%', bottom: '2%', containLabel: true }, grid: { left: '2%', right: '4%', top: '10%', bottom: '2%', containLabel: true },
@ -149,40 +142,35 @@
function chartAmi() { function chartAmi() {
let index = 0 let index = 0
const timerNumber = 3000 const timerNumber = 3000
let sleep = 1
timer && clearInterval(timer) timer && clearInterval(timer)
let currentIndex = 0
let sleep = 0
const fo = 2
timer = setInterval(() => { timer = setInterval(() => {
currentIndex = index % 4 const currentIndex = index % 4
sleep = index % (4 * fo) sleep = index % (4 * 2)
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'showTip', type: 'showTip',
seriesIndex: 0, seriesIndex: 0,
dataIndex: currentIndex, dataIndex: currentIndex,
}) })
if (sleep + 1 >= 4 * fo) { if (sleep == 7) {
timer && clearInterval(timer) chartLineAmi()
setTimeout(() => {
getInstance()?.dispatchAction({
type: 'hideTip',
})
}, timerNumber)
getData(false)
} }
index++ index++
}, timerNumber) }, timerNumber)
} }
function chartLineAmi() { function chartLineAmi() {
const obj = formatChartData()
let index = 0
let currentIndex = 0
const timerNumber = 3000 const timerNumber = 3000
timer && clearInterval(timer) timer && clearInterval(timer)
let legendIndex = legendData.length
let sleep = 6000 / 3000
timer = setInterval(() => { timer = setInterval(() => {
currentIndex = index % legendData.length getInstance()?.dispatchAction({
if (currentIndex == 0) { type: 'hideTip',
})
if (legendIndex == legendData.length) {
legendData.forEach((_, index) => { legendData.forEach((_, index) => {
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'legendUnSelect', type: 'legendUnSelect',
@ -190,21 +178,17 @@
}) })
}) })
} }
getInstance()?.setOption({ if (legendIndex >= 0) {
series: [obj.series[currentIndex]], getInstance()?.dispatchAction({
}) type: 'legendSelect',
getInstance()?.dispatchAction({ name: legendData[legendIndex - 1],
type: 'legendSelect', })
name: legendData[currentIndex],
})
if (currentIndex == legendData.length - 1) {
timer && clearInterval(timer)
setTimeout(() => {
chartAmi()
}, timerNumber)
} }
if (legendIndex <= 0) {
index++ if (sleep <= 0) getData()
sleep--
}
legendIndex--
}, timerNumber) }, timerNumber)
} }

View File

@ -51,15 +51,14 @@
chartsInit() chartsInit()
} }
// const reducer = (acc, cur) => (cur > acc ? cur : acc) const reducer = (acc, cur) => (cur > acc ? cur : acc)
// function largestOfFour(arr) { function largestOfFour(arr) {
// return arr.map(({ data }) => data.reduce(reducer)) return arr.map(({ data }) => data.reduce(reducer))
// } }
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>) const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
let legendData = [] as any let legendData = [] as any
const chartsInit = () => {
function formatChartData() {
const obj = { const obj = {
legendData: [] as any, legendData: [] as any,
series: [] as any, series: [] as any,
@ -82,13 +81,10 @@
}, },
}) })
}) })
legendData = obj.legendData
return obj
}
const chartsInit = () => { const max = Math.max(...largestOfFour(Data.series)) ?? 100
const obj = formatChartData()
// const max = Math.max(...largestOfFour(Data.series)) ?? 100 legendData = obj.legendData
setOptions({ setOptions({
grid: { left: '4%', right: '4%', top: '10%', bottom: '2%', containLabel: true }, grid: { left: '4%', right: '4%', top: '10%', bottom: '2%', containLabel: true },
@ -156,42 +152,29 @@
let timer: any = null let timer: any = null
function chartAmi() { function chartAmi() {
let index = 0 let index = 1
const timerNumber = 3000 const timerNumber = 3000
timer && clearInterval(timer) timer && clearInterval(timer)
let currentIndex = 0 let sleep = 1
let sleep = 0 let type = 'showTip'
const fo = 2 let legendIndex = legendData.length
timer = setInterval(() => { timer = setInterval(() => {
currentIndex = index % 4 if (legendData.length == 0) return
sleep = index % (4 * fo) const currentIndex = (index - 1) % 4
sleep = index % (4 * 2)
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'showTip', type: type,
seriesIndex: 0, seriesIndex: 0,
dataIndex: currentIndex, dataIndex: currentIndex,
}) })
if (sleep + 1 >= 4 * fo) { // console.log('currentIndex', currentIndex)
timer && clearInterval(timer) // console.log('legendIndex', legendIndex)
setTimeout(() => { // console.log('sleep', sleep)
getInstance()?.dispatchAction({ // console.log('index', index)
type: 'hideTip',
})
}, timerNumber)
getData(false)
}
index++
}, timerNumber)
}
function chartLineAmi() { if (type == 'hideTip' && currentIndex == 0) {
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) => { legendData.forEach((_, index) => {
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'legendUnSelect', type: 'legendUnSelect',
@ -199,33 +182,28 @@
}) })
}) })
} }
getInstance()?.setOption({ if (type == 'hideTip') {
series: [obj.series[currentIndex]], getInstance()?.dispatchAction({
}) type: 'legendSelect',
getInstance()?.dispatchAction({ name: legendData[legendIndex - 1],
type: 'legendSelect', })
name: legendData[currentIndex], if (legendIndex == 0) getData()
}) legendIndex--
if (currentIndex == legendData.length - 1) { }
timer && clearInterval(timer)
setTimeout(() => { if (sleep == 0) {
chartAmi() type = 'hideTip'
}, timerNumber)
} }
index++ index++
}, timerNumber) }, timerNumber)
} }
async function getData(init = true) { async function getData() {
const resData = await getRiceShrimpPrice() const resData = await getRiceShrimpPrice()
Data.x_axis = resData.x_axis Data.x_axis = resData.x_axis
Data.series = resData.series Data.series = resData.series
if (init) { chartsInit()
chartsInit()
} else {
chartLineAmi()
}
} }
onBeforeMount(() => { onBeforeMount(() => {

View File

@ -31,23 +31,19 @@
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>) const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
async function getData(init = true) { async function getData() {
const resData = await getRiceShrimpFlow({ const resData = await getRiceShrimpFlow({
year: visualizationStore.getYear, year: visualizationStore.getYear,
}) })
Data.x_axis = resData.x_axis Data.x_axis = resData.x_axis
Data.series = resData.series Data.series = resData.series
if (init) { chartsInit()
chartsInit()
} else {
chartLineAmi()
}
} }
let legendData = [] as any let legendData = [] as any
function formatChartData() { const chartsInit = () => {
const obj = { const obj = {
legendData: [] as any, legendData: [] as any,
series: [] as any, series: [] as any,
@ -55,13 +51,15 @@
Data.series.forEach(({ name, data }, index) => { Data.series.forEach(({ name, data }, index) => {
const color = chartLineColors[index % chartLineColors.length] const color = chartLineColors[index % chartLineColors.length]
obj.legendData.push(name + '')
obj.legendData.push(name)
obj.series.push({ obj.series.push({
name: name, name: name,
data: data, data: data.map((e) => (e ? Number((e / 2000).toFixed(2)) : e)),
type: 'line',
smooth: false, smooth: false,
type: 'line',
// symbol: 'none', // symbol: 'none',
stack: 'Total',
itemStyle: { itemStyle: {
color: color.itemColor, color: color.itemColor,
}, },
@ -70,12 +68,8 @@
}, },
}) })
}) })
legendData = obj.legendData
return obj
}
const chartsInit = () => { legendData = obj.legendData
const obj = formatChartData()
setOptions({ setOptions({
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true }, grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
legend: { legend: {
@ -135,44 +129,39 @@
} }
let timer: any = null let timer: any = null
function chartAmi() { function chartAmi() {
let index = 0 let index = 0
const timerNumber = 3000 const timerNumber = 3000
let sleep = 1
timer && clearInterval(timer) timer && clearInterval(timer)
let currentIndex = 0
let sleep = 0
const fo = 2
timer = setInterval(() => { timer = setInterval(() => {
currentIndex = index % 4 const currentIndex = index % 4
sleep = index % (4 * fo) sleep = index % (4 * 2)
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'showTip', type: 'showTip',
seriesIndex: 0, seriesIndex: 0,
dataIndex: currentIndex, dataIndex: currentIndex,
}) })
if (sleep + 1 >= 4 * fo) {
timer && clearInterval(timer) if (sleep == 7) {
setTimeout(() => { chartLineAmi()
getInstance()?.dispatchAction({
type: 'hideTip',
})
}, timerNumber)
getData(false)
} }
index++ index++
}, timerNumber) }, timerNumber)
} }
function chartLineAmi() { function chartLineAmi() {
const obj = formatChartData()
let index = 0
let currentIndex = 0
const timerNumber = 3000 const timerNumber = 3000
timer && clearInterval(timer) timer && clearInterval(timer)
let legendIndex = legendData.length
let sleep = 6000 / 3000
timer = setInterval(() => { timer = setInterval(() => {
currentIndex = index % legendData.length getInstance()?.dispatchAction({
if (currentIndex == 0) { type: 'hideTip',
})
if (legendIndex == legendData.length) {
legendData.forEach((_, index) => { legendData.forEach((_, index) => {
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'legendUnSelect', type: 'legendUnSelect',
@ -180,21 +169,17 @@
}) })
}) })
} }
getInstance()?.setOption({ if (legendIndex >= 0) {
series: [obj.series[currentIndex]], getInstance()?.dispatchAction({
}) type: 'legendSelect',
getInstance()?.dispatchAction({ name: legendData[legendIndex - 1],
type: 'legendSelect', })
name: legendData[currentIndex],
})
if (currentIndex == legendData.length - 1) {
timer && clearInterval(timer)
setTimeout(() => {
chartAmi()
}, timerNumber)
} }
if (legendIndex <= 0) {
index++ if (sleep <= 0) getData()
sleep--
}
legendIndex--
}, timerNumber) }, timerNumber)
} }

View File

@ -62,23 +62,19 @@
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>) const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
async function getData(init = true) { async function getData() {
const resData = await getMateriel({ const resData = await getMateriel({
year: visualizationStore.getYear, year: visualizationStore.getYear,
type: currentTab.value, type: currentTab.value,
}) })
Data.x_axis = resData.x_axis Data.x_axis = resData.x_axis
Data.series = resData.series Data.series = resData.series
if (init) { chartsInit()
chartsInit()
} else {
chartLineAmi()
}
} }
let legendData = [] as any let legendData = [] as any
function formatChartData() { const chartsInit = () => {
const obj = { const obj = {
legendData: [] as any, legendData: [] as any,
series: [] as any, series: [] as any,
@ -116,11 +112,7 @@
}) })
legendData = obj.legendData legendData = obj.legendData
return obj
}
const chartsInit = () => {
const obj = formatChartData()
setOptions({ setOptions({
grid: { left: '2%', right: '2%', top: '50px', bottom: '2%', containLabel: true }, grid: { left: '2%', right: '2%', top: '50px', bottom: '2%', containLabel: true },
legend: { legend: {
@ -200,40 +192,36 @@
function chartAmi() { function chartAmi() {
let index = 0 let index = 0
const timerNumber = 3000 const timerNumber = 3000
let sleep = 1
timer && clearInterval(timer) timer && clearInterval(timer)
let currentIndex = 0
let sleep = 0
const fo = 2
timer = setInterval(() => { timer = setInterval(() => {
currentIndex = index % 4 const currentIndex = index % 4
sleep = index % (4 * fo) sleep = index % (4 * 2)
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'showTip', type: 'showTip',
seriesIndex: 0, seriesIndex: 0,
dataIndex: currentIndex, dataIndex: currentIndex,
}) })
if (sleep + 1 >= 4 * fo) {
timer && clearInterval(timer) if (sleep == 7) {
setTimeout(() => { chartLineAmi()
getInstance()?.dispatchAction({
type: 'hideTip',
})
}, timerNumber)
getData(false)
} }
index++ index++
}, timerNumber) }, timerNumber)
} }
function chartLineAmi() { function chartLineAmi() {
const obj = formatChartData()
let index = 0
let currentIndex = 0
const timerNumber = 3000 const timerNumber = 3000
timer && clearInterval(timer) timer && clearInterval(timer)
let legendIndex = legendData.length
let sleep = 6000 / 3000
timer = setInterval(() => { timer = setInterval(() => {
currentIndex = index % legendData.length getInstance()?.dispatchAction({
if (currentIndex == 0) { type: 'hideTip',
})
if (legendIndex == legendData.length) {
legendData.forEach((_, index) => { legendData.forEach((_, index) => {
getInstance()?.dispatchAction({ getInstance()?.dispatchAction({
type: 'legendUnSelect', type: 'legendUnSelect',
@ -241,21 +229,17 @@
}) })
}) })
} }
getInstance()?.setOption({ if (legendIndex >= 0) {
series: [obj.series[currentIndex]], getInstance()?.dispatchAction({
}) type: 'legendSelect',
getInstance()?.dispatchAction({ name: legendData[legendIndex - 1],
type: 'legendSelect', })
name: legendData[currentIndex],
})
if (currentIndex == legendData.length - 1) {
timer && clearInterval(timer)
setTimeout(() => {
chartAmi()
}, timerNumber)
} }
if (legendIndex <= 0) {
index++ if (sleep <= 0) getData()
sleep--
}
legendIndex--
}, timerNumber) }, timerNumber)
} }