企业官网建设流程全解析

真是恶心到家了，研究了一天半的时间，终于搞出来了，现在和大家分享一下代码。

<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
} 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 = {
title: { text: '示例图表' },
tooltip: {},
xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [10, 20, 30, 40, 50]
}]
}
chartInstance.setOption(option)

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