136 lines
3.2 KiB
Vue
136 lines
3.2 KiB
Vue
|
<template>
|
||
|
|
<div ref="chartEl" v-resize="resizeHandler"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import type { EChartsOption, PieSeriesOption } from 'echarts'
|
||
|
|
import type { ResponseData } from 'open-data-v/base'
|
||
|
|
import { useData, useProp } from 'open-data-v/base'
|
||
|
|
import { onMounted, ref } from 'vue'
|
||
|
|
|
||
|
|
import { useEchart } from '../../hooks'
|
||
|
|
import { compareResetValue } from '../../utils'
|
||
|
|
import type BasicLineChartComponent from './config'
|
||
|
|
import type { BasicLineChart } from './type'
|
||
|
|
|
||
|
|
const chartEl = ref<ElRef>(null)
|
||
|
|
|
||
|
|
let globalOption: EChartsOption
|
||
|
|
const props = defineProps<{
|
||
|
|
component: BasicLineChartComponent
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const { updateEchart, resizeHandler } = useEchart(chartEl)
|
||
|
|
let chartData:
|
||
|
|
| Array<{ label: string; value: number }>
|
||
|
|
| ResponseData<Array<{ label: string; value: number }>>['afterData'] = []
|
||
|
|
const dataChange = (resp: any, _?: string) => {
|
||
|
|
if (resp.status === 'SUCCESS') {
|
||
|
|
chartData = resp.afterData
|
||
|
|
updateData(chartData)
|
||
|
|
}
|
||
|
|
|
||
|
|
updateData(chartData)
|
||
|
|
}
|
||
|
|
useData(props.component, dataChange)
|
||
|
|
const propValueChange = () => {
|
||
|
|
updateData(chartData)
|
||
|
|
}
|
||
|
|
|
||
|
|
const { propValue } = useProp<BasicLineChart>(props.component, propValueChange)
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
globalOption = getOption()
|
||
|
|
updateEchart(globalOption)
|
||
|
|
})
|
||
|
|
const getOption = () => {
|
||
|
|
const option: EChartsOption = {
|
||
|
|
grid: {
|
||
|
|
top: '10%',
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '0%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: propValue.legend.isShow,
|
||
|
|
top: '5%',
|
||
|
|
left: 'center'
|
||
|
|
},
|
||
|
|
series: []
|
||
|
|
}
|
||
|
|
let series: PieSeriesOption[] = [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
radius: [`${propValue.series.radiusMin || 0}%`, `${propValue.series.radiusMax || 100}%`],
|
||
|
|
avoidLabelOverlap: true,
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: propValue.series.borderRadius,
|
||
|
|
borderColor: 'transparent',
|
||
|
|
borderWidth: 10
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
color: propValue.label.labelColor,
|
||
|
|
fontSize: propValue.label.labelSize,
|
||
|
|
alignTo: 'edge',
|
||
|
|
formatter: '{name|{b}}',
|
||
|
|
minMargin: 5,
|
||
|
|
edgeDistance: 10,
|
||
|
|
lineHeight: 15,
|
||
|
|
rich: {
|
||
|
|
time: {
|
||
|
|
fontSize: 20,
|
||
|
|
color: '#999'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
label: {
|
||
|
|
show: propValue.label.isShow,
|
||
|
|
fontSize: propValue.label.labelSize,
|
||
|
|
fontWeight: propValue.label.labelWeight
|
||
|
|
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowOffsetX: 0,
|
||
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
width : 2
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
option.series = series
|
||
|
|
return option as EChartsOption
|
||
|
|
}
|
||
|
|
|
||
|
|
const updateData = (resp: Array<{ label: string; value: number }>) => {
|
||
|
|
const upperLimit = propValue.data.upperLimit
|
||
|
|
const lowerLimit = propValue.data.lowerLimit
|
||
|
|
const data = resp.map((ele) => {
|
||
|
|
return {
|
||
|
|
value: compareResetValue(Number(ele.value), upperLimit, lowerLimit),
|
||
|
|
label: ele.label
|
||
|
|
}
|
||
|
|
})
|
||
|
|
globalOption = getOption()
|
||
|
|
globalOption.series![0].data = data.map((el) => {
|
||
|
|
return {
|
||
|
|
value: el.value,
|
||
|
|
name: el.label
|
||
|
|
}
|
||
|
|
})
|
||
|
|
updateEchart(globalOption)
|
||
|
|
}
|
||
|
|
</script>
|