uni-app 图表渲染错误

uni-app 图表渲染错误

uni-app+vue3 引入图表报错，HBuilder X版本4.55 小程序基础库3.15
TypeError: Cannot read property ‘width’ of null
at Object.<anonymous> (qiun-data-charts.js:661)
at Function.<anonymous> (WAServiceMainContext.js?t=wechat&s=1745375605838&v=3.1.5:1)
at :27907/appservice/<SelectorQuery callback function>
at WAServiceMainContext.js?t=wechat&s=1745375605838&v=3.1.5:1
at WAServiceMainContext.js?t=wechat&s=1745375605838&v=3.1.5:1
at Array.forEach (<anonymous>)
at WAServiceMainContext.js?t=wechat&s=1745375605838&v=3.1.5:1
at WAServiceMainContext.js?t=wechat&s=1745375605838&v=3.1.5:1
at WASubContext.js?t=wechat&s=1745375605838&v=3.1.5:1
at fe (WASubContext.js?t=wechat&s=1745375605838&v=3.1.5:1)(env: Windows,mp,1.06.2412050; lib: 3.1.5)


更多关于uni-app 图表渲染错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 图表渲染错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个错误通常是由于图表组件在DOM未完成渲染时就尝试获取元素尺寸导致的。针对uni-app+vue3环境下的图表渲染问题，建议从以下几个方面排查：

  1. 确保图表容器已正确挂载 检查template中图表容器的id/ref是否与组件配置一致，并且确保容器有明确的宽高样式。

  2. 使用nextTick延迟渲染 在vue3的onMounted钩子中使用nextTick确保DOM就绪后再初始化图表：

import { onMounted, nextTick } from 'vue'

onMounted(() => {
  nextTick(() => {
    // 图表初始化代码
  })
})
回到顶部