vue3+ts 简单封装Echarts

前端梦工厂

已于 2023-02-08 14:24:26 修改

阅读量481

点赞数 2

CC 4.0 BY-SA版权

文章标签： echarts vue.js javascript

于 2023-02-08 14:24:23 首次发布

本文链接：https://blog.csdn.net/weixin_43826851/article/details/128935082

该代码段展示了如何在Vue3中创建一个基于echarts的图表组件，初始化图表，监听resize事件以调整大小，并通过props传递图表配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="echarts-wrapper" ref="chartDom" :style="{ 'width': width, 'height': height }"></div>
</template>

<script setup lang="ts">
import { onDeactivated, onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'

interface Props {
    width?: string;
    height?: string;
    options: echarts.EChartsOption;
}

const props = withDefaults(defineProps<Props>(), {
    options: () => ({})
})

let myEcharts: echarts.ECharts
const chartDom = ref<HTMLDivElement>()
let _resizeHandler = ref()

const handlerResize = () => {
    myEcharts.resize()
}
const addResize = () => _resizeHandler.value = window.addEventListener('resize', handlerResize) // TODO debounce
const removeResize = () => { if (_resizeHandler.value) window.removeEventListener('resize', _resizeHandler.value) }

watch(() => props.options, (newValue: echarts.EChartsOption) => {
    myEcharts.setOption(newValue)
}, { deep: true })

onMounted(() => {
    myEcharts = echarts.init(chartDom.value as HTMLDivElement)
    myEcharts?.setOption(props.options, true)
    addResize()
})

onDeactivated(() => removeResize())
</script>

<style lang="scss" scoped>
.echarts-wrapper {
    width: 100%;
    height: 100%;
}
</style>