150 lines
3.7 KiB
Vue
150 lines
3.7 KiB
Vue
<template>
|
|
<Box :title="propsData.name" v-bind="$attrs">
|
|
<div class="h-full flex flex-col w-full">
|
|
<div class="flex-1" ref="chartRef"> </div>
|
|
</div>
|
|
</Box>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onBeforeMount, unref, reactive, Ref, ref } from 'vue'
|
|
import { getCropYieldQuarterStatics } from '/@/api/sys/other'
|
|
import { useECharts } from '/@/hooks/web/useECharts'
|
|
import Box from './Box.vue'
|
|
import { computed } from '@vue/reactivity'
|
|
import { chartBarColors, chartLineColors } from './colors'
|
|
export default defineComponent({
|
|
components: {
|
|
Box,
|
|
},
|
|
props: {
|
|
data: {
|
|
type: Object,
|
|
},
|
|
index: {
|
|
type: Number,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const propsData: any = computed(() => props.data)
|
|
|
|
const chartRef = ref<HTMLDivElement | null>(null)
|
|
|
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
|
|
|
|
const Data = reactive({
|
|
list: [] as any,
|
|
})
|
|
|
|
async function getData() {
|
|
const { id } = unref(props.data) as any
|
|
if (!id) return
|
|
const resData = await getCropYieldQuarterStatics({
|
|
crop_id: id,
|
|
})
|
|
const list: any[] = []
|
|
for (const key in resData) {
|
|
if (Object.prototype.hasOwnProperty.call(resData, key)) {
|
|
const obj = resData[key]
|
|
list.push({
|
|
name: obj.name,
|
|
list: Object.keys(obj.list).map((e) => obj.list[e]),
|
|
axis: Object.keys(obj.list).map((e) => e),
|
|
})
|
|
}
|
|
}
|
|
Data.list = list
|
|
chartsInit()
|
|
}
|
|
|
|
function chartsInit() {
|
|
const obj = {
|
|
legendData: [] as any,
|
|
series: [] as any,
|
|
}
|
|
const i = Number(props.index) % 2
|
|
const colors = i == 1 ? chartBarColors : chartLineColors
|
|
const type = i == 1 ? 'bar' : 'line'
|
|
Data.list.forEach(({ name, list }, index) => {
|
|
const color = colors[index % colors.length]
|
|
|
|
obj.legendData.push(name)
|
|
|
|
obj.series.push({
|
|
name: name,
|
|
data: list,
|
|
type: type,
|
|
itemStyle: {
|
|
color: color.itemColor,
|
|
},
|
|
})
|
|
})
|
|
|
|
setOptions({
|
|
grid: { left: '2%', right: '2%', top: '10%', bottom: '2%', containLabel: true },
|
|
legend: {
|
|
show: false,
|
|
data: obj.legendData,
|
|
top: '0%',
|
|
right: '0',
|
|
textStyle: {
|
|
color: '#ffffff',
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
lineStyle: {
|
|
width: 1,
|
|
color: '#019680',
|
|
},
|
|
},
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: Data.list[0]?.axis,
|
|
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,
|
|
})
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
getData()
|
|
})
|
|
return {
|
|
propsData,
|
|
chartRef,
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style scoped></style>
|