自定义echarts组件

1.安装echarts

npm install echarts

2.引入echarts

import * as echarts from 'echarts'

3.自定义echarts组件

<template>

    <div ref="chartRef" class="chart" ></div>

</template>

<script lang="ts" setup>

import * as echarts from 'echarts'

import { ref, onMounted, nextTick, onUnmounted, watch } from 'vue'

const chartRef = ref<any>(null)

let myChart:any = null

const props = defineProps({

    name: String,

    option: {

        type: Object,

        default: () => {

            return {}

        }

    }

})

//methods

const initEchart = () => {

    nextTick(() => {

        if (!myChart) {

            myChart = echarts.init(chartRef.value)

        }

    })

    nextTick(() => {

        myChart.setOption(props.option)

    })

}

watch(

    () => props.option,

    () => {

        initEchart()

    },

    {

        deep: true

    }

)

onMounted(() => {

    initEchart()

})

onUnmounted(() => {

    myChart && myChart.dispose()

})

</script>

<style lang="scss" scoped>

.chart {

    width: 100%;

    height: 100%;

}

</style>

欢迎补充，一起进步。