uniapp vue3微信小程序echarts 组件封装

在上一篇的基础上，将图表封装成了组件，技术有限，大家凑合着看吧

<template>
    <view class="chart-container">
        <canvas id="myChart" type="2d" canvas-id="myChart" style="width: 100%; height: 400px;"></canvas>
    </view>
</template>
<script setup>
    import {
        onMounted,
        nextTick,
        getCurrentInstance,
        onUnmounted,
        onBeforeUnmount
    } from 'vue'
    import * as echarts from 'echarts'
    let chartInstance = null
    const proxy = getCurrentInstance().proxy
    const loopInit = () => {
        nextTick(() => {
            const query = uni.createSelectorQuery().in(proxy)
            query.select('#myChart')
                .fields({
                    node: true,
                    size: true
                })
                .exec(res => {
                    // 先判断节点是否获取成功，避免空指针报错
                    if (!res || !res[0]) return
                    const canvas = res[0].node
                    canvas.addEventListener = () => {}
                    canvas.removeEventListener = () => {}
                    // 如果后续还遇到类似preventDefault的报错，也可以同步补全
                    canvas.preventDefault = () => {}
                    // 从selectorQuery结果中拿到容器的实际宽高
                    const {
                        width,
                        height
                    } = res[0]
                    // 传入小程序环境必需的初始化配置
                    const chartInstance = echarts.init(canvas, null, {
                        width: width,
                        height: height,
                        devicePixelRatio: uni.getSystemInfoSync().pixelRatio,
                        useDirtyRect: false, // 小程序环境关闭脏矩形优化，避免兼容问题
                        useCoarsePointer: true, // 适配移动端触摸交互
                        pointerSize: 40 // 适配触摸点击的热区大小
                    })
                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            top: '10%',
                            left: '3%',
                            right: '4%',
                            bottom: '20%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: props.xData
                        },
                        yAxis: {
                            type: 'value'
                        },
                        legend: {
                            data: props.seriesList
                        },
                        series: props.seriesList.map(item => ({
                            name: item.name,
                            type: 'line', // 线性折线
                            data: item.data,
                            smooth: false, // 标准直线，true为平滑曲线
                            // 区域填充可选
                            // areaStyle: { opacity: 0.15 }
                        }))
                    }
                    //    chartInstance.setOption(option)
                    /*    const option = {
                            title: { text: '示例图表' },
                            tooltip: {},
                            xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
                            yAxis: {},
                            series: [{
                                name: '销量',
                                type: 'bar',
                                data: [10, 20, 30, 40, 50]
                            }]
                        }*/
                    chartInstance.setOption(option)

                })
        })
    }
    const props = defineProps({
        xData: {
            type: Array,
            default: () => []
        },
        seriesList: {
            type: Array,
            default: () => []
        },
        legendlist: {
            type: Array,
            default: () => []
        }
    })

    onMounted(() => {
        nextTick(() => {
            // 延迟400ms再启动循环，给组件canvas渲染时间
            setTimeout(loopInit, 400)
        })
    })
  
</script>