190 lines
4.7 KiB
Vue
190 lines
4.7 KiB
Vue
<template>
|
|
<Box title="稻虾流向（吨）">
|
|
<div class="h-full flex flex-col">
|
|
<div class="flex-1" ref="chartRef"> </div>
|
|
</div>
|
|
</Box>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, reactive, ref, Ref, onBeforeMount, watch } from 'vue'
|
|
import Box from './Box.vue'
|
|
import { useECharts } from '/@/hooks/web/useECharts'
|
|
import { getRiceShrimpFlow } from '/@/api/sys/other'
|
|
import { useVisualizationStore } from '/@/store/modules/visualization'
|
|
import { chartLineColors } from './colors'
|
|
import { useVContext } from '../useVContext'
|
|
export default defineComponent({
|
|
components: {
|
|
Box,
|
|
},
|
|
setup() {
|
|
const { rootEmitter } = useVContext()
|
|
const Data = reactive({
|
|
x_axis: [],
|
|
series: [],
|
|
})
|
|
|
|
const chartRef = ref<HTMLDivElement | null>(null)
|
|
|
|
const visualizationStore = useVisualizationStore()
|
|
|
|
const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>)
|
|
|
|
async function getData() {
|
|
const resData = await getRiceShrimpFlow({
|
|
year: visualizationStore.getYear,
|
|
})
|
|
Data.x_axis = resData.x_axis
|
|
Data.series = resData.series
|
|
|
|
chartsInit()
|
|
}
|
|
|
|
let legendData = [] as any
|
|
|
|
const chartsInit = () => {
|
|
const obj = {
|
|
legendData: [] as any,
|
|
series: [] as any,
|
|
}
|
|
|
|
Data.series.forEach(({ name, data }, index) => {
|
|
const color = chartLineColors[index % chartLineColors.length]
|
|
|
|
obj.legendData.push(name)
|
|
obj.series.push({
|
|
name: name,
|
|
data: data.map((e) => (e ? Number((e / 2000).toFixed(2)) : e)),
|
|
smooth: false,
|
|
type: 'line',
|
|
// symbol: 'none',
|
|
stack: 'Total',
|
|
itemStyle: {
|
|
color: color.itemColor,
|
|
},
|
|
areaStyle: {
|
|
color: color.areaColor,
|
|
},
|
|
})
|
|
})
|
|
|
|
legendData = obj.legendData
|
|
setOptions({
|
|
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
|
|
legend: {
|
|
data: obj.legendData,
|
|
top: '0%',
|
|
right: '0',
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#019680',
|
|
},
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: Data.x_axis,
|
|
boundaryGap: false,
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
type: 'solid',
|
|
color: '#8EEEFF',
|
|
opacity: 0.3,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: '#fff',
|
|
},
|
|
},
|
|
],
|
|
series: obj.series,
|
|
animationDuration: 2000,
|
|
})
|
|
|
|
chartAmi()
|
|
}
|
|
|
|
let timer: any = null
|
|
function chartAmi() {
|
|
let index = 0
|
|
timer && clearInterval(timer)
|
|
timer = setInterval(() => {
|
|
console.log(legendData)
|
|
|
|
if (legendData.length == 0) return
|
|
const currentIndex = index % 4
|
|
const legendIndex = index % legendData.length
|
|
const sleep = index % (legendData.length * 2)
|
|
if (legendIndex == 0 && sleep != 0) {
|
|
legendData.forEach((_, index) => {
|
|
getInstance()?.dispatchAction({
|
|
type: 'legendUnSelect',
|
|
name: legendData[index],
|
|
})
|
|
})
|
|
}
|
|
|
|
getInstance()?.dispatchAction({
|
|
type: 'legendSelect',
|
|
name: legendData[legendIndex],
|
|
})
|
|
// getInstance()?.dispatchAction({
|
|
// type: 'showTip',
|
|
// seriesIndex: 0,
|
|
// dataIndex: currentIndex,
|
|
// })
|
|
|
|
index++
|
|
}, 3000)
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
getData()
|
|
|
|
rootEmitter.on('interval:auto', () => {
|
|
getData()
|
|
})
|
|
})
|
|
|
|
watch(
|
|
() => visualizationStore.getYear,
|
|
() => getData(),
|
|
)
|
|
|
|
return {
|
|
chartRef,
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.active {
|
|
@apply font-bold text-15px text-[#76E9F0];
|
|
}
|
|
</style>
|