uniapp vue3 微信小程序使用echarts显示图表

真是恶心到家了研究了一天半的时间终于搞出来了现在和大家分享一下代码。templateview classchart-containercanvas idmyChart type2d canvas-idmyChart stylewidth: 100%; height: 400px;/canvas/view/templatescript setupimport {onMounted,nextTick,getCurrentInstance,onUnmounted} from vueimport * as echarts from echartslet chartInstance nullconst proxy getCurrentInstance().proxyconst loopInit () {nextTick(() {const query uni.createSelectorQuery().in(proxy)query.select(#myChart).fields({node: true,size: true}).exec(res {// 先判断节点是否获取成功避免空指针报错if (!res || !res[0]) returnconst canvas res[0].nodecanvas.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