48 lines
955 B
Vue
48 lines
955 B
Vue
<script setup lang="ts">
|
|
import { type EChartsOption, type EChartsType, init, registerMap } from 'echarts'
|
|
|
|
import china from '@/assets/china.json'
|
|
import 'echarts-gl'
|
|
|
|
const props = defineProps<{
|
|
options: EChartsOption
|
|
}>()
|
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-expect-error
|
|
registerMap('china', china)
|
|
|
|
const chartEle = shallowRef<HTMLDivElement>()
|
|
const chart = shallowRef<EChartsType>()
|
|
|
|
let listener: any
|
|
|
|
onMounted(() => {
|
|
chart.value = init(chartEle.value!)
|
|
|
|
listener = window.addEventListener('resize', () => {
|
|
chart.value?.resize()
|
|
})
|
|
})
|
|
|
|
effect(() => {
|
|
console.log('chart options update', props.options)
|
|
props.options && chart.value?.setOption(props.options)
|
|
})
|
|
|
|
onDeactivated(() => {
|
|
window.removeEventListener('resize', listener)
|
|
})
|
|
|
|
defineExpose({
|
|
chart,
|
|
chartEle,
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div style="height:100%">
|
|
<div ref="chartEle" style="height: 100%;" />
|
|
</div>
|
|
</template>
|