42 lines
931 B
TypeScript
42 lines
931 B
TypeScript
|
import * as echarts from 'echarts'
|
||
|
|
import type { Ref } from 'vue'
|
||
|
|
import { onMounted, onUnmounted } from 'vue'
|
||
|
|
|
||
|
|
import mydark from './theme'
|
||
|
|
|
||
|
|
type EchartOption = echarts.EChartsOption | any
|
||
|
|
// 图表大小改变
|
||
|
|
export const useEchart = (chartEl: Ref<ElRef | undefined | null>) => {
|
||
|
|
echarts.registerTheme('mydark', mydark)
|
||
|
|
let chart: Nullable<echarts.EChartsType> = null
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
if (chartEl.value) {
|
||
|
|
chart = echarts.init(chartEl.value, 'mydark')
|
||
|
|
chart.clear()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const resizeHandler = (entry: ResizeObserverEntry) => {
|
||
|
|
const { width, height } = entry.contentRect
|
||
|
|
chart?.resize({ width, height })
|
||
|
|
}
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
if (chart) {
|
||
|
|
chart.clear()
|
||
|
|
chart.dispose()
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const updateEchart = (option: EchartOption) => {
|
||
|
|
try {
|
||
|
|
chart?.setOption(option)
|
||
|
|
} catch (e) {
|
||
|
|
console.log(e)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return { updateEchart, resizeHandler }
|
||
|
|
}
|