uni-app中ECharts canvas不显示是因平台差异：小程序需echarts-for-weixin+canvas-id模式，H5用UMD动态加载，App推荐vue-echarts；须正确管理生命周期、及时dispose、避免v-for创建多实例，并适配尺寸变化重绘。

uni-app 里用 echarts 渲染图表，为什么 canvas 不显示？

因为 uni-app 的 canvas 组件在不同平台行为不一致，直接用原生 echarts 的 init 会失败——h5 正常，小程序里 canvas 节点没正确挂载，app 端可能报 typeerror: cannot read property 'getcontext' of null。

• 必须用官方维护的 echarts-for-weixin（小程序）或 echarts + uni-app 适配版（H5/App），不能直接 npm install echarts 后 import 就调 echarts.init
• 小程序平台必须用 canvas-id + createCanvasContext 模式，且 canvas 组件需设置 disable-scroll="true"，否则滚动时图表错位
• H5 端推荐用 echarts 官方 UMD 版本，通过 script 标签动态加载，避免 webpack 打包冲突；App 端建议用 vue-echarts（v6+）并配合 resize 钩子手动触发 chart.resize()

如何让图表随页面尺寸变化自动重绘？

uni-app 页面没有标准 resize 事件，window.onresize 在小程序和 App 中无效，单纯监听 onShow 或 onResize 不可靠。

• 用 uni.getSystemInfoSync().windowWidth + uni.onWindowResize（仅 H5 支持），但小程序得靠 uni.createSelectorQuery() 主动查容器宽高
• 给图表容器加 ref，在 onReady 和 onResize（H5）或 onShow（小程序/App）里调用 chart.resize()，别依赖 CSS 动画或 flex 自适应
• 如果用了 echarts-for-weixin，必须在 canvas 渲染完成回调里再调 setOption，否则数据不刷新；可加个 setTimeout(..., 100) 做兜底（但不是最优解）

uni-app 数据看板中，图表异步加载数据后不更新？

常见现象是 setData 或 this.setData 后图表没反应，或者只渲染第一次，后续 setOption 报 Cannot read property 'setOption' of undefined。

• 确保 chart 实例是全局变量或组件 data 里的响应式字段，不要写在 methods 里每次新建
• 数据请求完成后再初始化图表，而不是在 onLoad 就 echarts.init；尤其小程序里 canvas 节点可能还没 ready
• 用 watch 监听数据变化时，避免直接 watch 原始数组，改用计算属性或 deep watch + nextTick 再调 chart.setOption，否则容易因响应式延迟导致渲染滞后

多个图表同页时内存暴涨、卡顿怎么办？

uni-app 小程序端 canvas 是真机资源，每个 echarts 实例都会占用独立 canvas 上下文，反复 init/ dispose 不及时会导致内存泄漏，App 端更明显。

• 不用图表时务必调用 chart.dispose()，比如在 onHide 或 beforeDestroy（Vue2）/onBeforeUnmount（Vue3）里清理
• 避免在 v-for 里直接创建多个 echarts 实例，改用单实例 + 切换数据源；或者用 visibility: hidden 替代 v-if 控制显隐，防止频繁销毁重建
• 折线图/柱状图数据量超 500 条时，开启 dataZoom 并设 realtime: false，否则滑动缩放会卡顿；地图类图表慎用，小程序端性能极差

图表容器的宽高最好用固定值或 rpx，别依赖 flex: 1 或 100vh —— 这些在小程序里计算不准，容易导致 canvas 渲染区域为 0。真正麻烦的是跨平台 canvas 生命周期管理，不是语法写不对，而是“什么时候该建、什么时候该删、删了还剩没剩”。