72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
|
<template>
|
||
|
|
<div ref="chartEl" v-resize="resizeHandler"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import 'echarts-liquidfill'
|
||
|
|
|
||
|
|
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 type WaveChartComponent from './config'
|
||
|
|
import type { WaveChartType } from './type'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
component: WaveChartComponent
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const chartEl = ref<ElRef>(null)
|
||
|
|
const { updateEchart, resizeHandler } = useEchart(chartEl)
|
||
|
|
const chartData = ref<number | ResponseData<number>['afterData']>(0)
|
||
|
|
const dataChange = (resp: any, _?: string) => {
|
||
|
|
if (resp.status === 'SUCCESS') {
|
||
|
|
chartData.value = resp.afterData
|
||
|
|
}
|
||
|
|
|
||
|
|
updateEchart(getOption())
|
||
|
|
}
|
||
|
|
useData(props.component, dataChange)
|
||
|
|
|
||
|
|
const { propValue } = useProp<WaveChartType>(props.component, async () => {
|
||
|
|
updateEchart(getOption())
|
||
|
|
})
|
||
|
|
|
||
|
|
const getOption = () => {
|
||
|
|
const option = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'liquidFill',
|
||
|
|
amplitude: propValue.options.amplitude,
|
||
|
|
data: [chartData.value],
|
||
|
|
outline: {
|
||
|
|
show: propValue.options.outlineShow,
|
||
|
|
itemStyle: {
|
||
|
|
borderColor: propValue.options.outlineColor
|
||
|
|
}
|
||
|
|
},
|
||
|
|
shape: propValue.options.shape,
|
||
|
|
radius: propValue.options.radius,
|
||
|
|
direction: propValue.options.direction,
|
||
|
|
waveAnimation: propValue.options.waveAnimation,
|
||
|
|
label: {
|
||
|
|
show: propValue.options.labelShow
|
||
|
|
},
|
||
|
|
backgroundStyle: {
|
||
|
|
color: propValue.options.backgroundColor
|
||
|
|
},
|
||
|
|
color: [propValue.options.color]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
return option
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
updateEchart(getOption())
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped></style>
|