vue3封装echarts组件，传option配置项即可

<template>
    <div ref="chart" class="chart" :style="style"></div>
</template>

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

// 接收值
const props = defineProps({
    option: {
        type: Object,
        default: () => { }
    }
})

// 定义值
const chart = ref(),
    myChart = ref()
const style = reactive({
    width: '100%',
    height: '100%',
})

// 定义加载函数
const initCharts = () => {
    // 2. 判断 dom 是否为空或未定义
    if (myChart.value != null && myChart.value != "" && myChart.value != undefined) {
        // 3. 已存在则调用 dispose() 方法销毁
        myChart.value.dispose();
    }
    myChart.value = echarts.init(chart.value)
    myChart.value.setOption(props.option)
    // 当窗口大小改变时候，echarts重置大小
    window.addEventListener('resize', () => {
        myChart.value.resize()
    })
}

// 监听当配置项发生变化的时候，调用加载函数
watch(
    () => props.option,
    val => {
        if (Object.keys(val)) {
            nextTick(() => {
                initCharts()
            })
        }
    },
    { immediate: true }
)
</script>

<style lang="less" scoped></style>