uni-app 中直接用 echarts 会白屏，因其依赖 DOM 和 Canvas API，而小程序、App 等非 H5 端无浏览器环境；应按端选择 echarts-for-weixin（微信小程序）、echarts-canvas（App nvue）、或按需引入原生 echarts（H5）。
uni-app 中直接用 echarts 会白屏？别硬上，先换方案
uni-app 官方不支持直接在 vue 页面中通过 import * as echarts from 'echarts' 渲染图表——因为 echarts 依赖 DOM 和 Canvas API，而 uni-app 的非 H5 端（如小程序、App）运行在非浏览器环境，document 和 canvas.getContext('2d') 不可用。强行引入只会报错或白屏。
正确路径是：用官方推荐的 echarts-for-weixin（微信小程序）或更通用的 echarts-canvas + uni-app 封装组件，或者干脆走 web-view 加载纯 H5 版图表页（适合复杂交互场景）。
- 微信小程序：必须用
echarts-for-weixin，且只支持canvas模式，不能用svg - App 端（nvue）：需用
echarts-canvas+ 原生 canvas 组件，vue页面里无效 - H5 端：可直接用原生
echarts，但注意按需引入，否则包体积暴涨
微信小程序里跑 echarts：三步配好 echarts-for-weixin
这是最常踩坑的环节：很多人 npm install 后直接 import，结果 echarts.init is not a function 或 canvas 不渲染。核心原因是没走小程序专用初始化流程。
- 安装：
npm install echarts-for-weixin --save（注意不是echarts） - 在页面
.js中引入：import * as echarts from 'echarts-for-weixin'（不能用import echarts from） - 初始化必须传入
canvas实例和canvasId，不能传dom：echarts.init(canvas, null, { renderer: 'canvas' }) -
canvas必须通过this.selectComponent或uni.createSelectorQuery获取，不能用document.getElementById
示例关键片段：
onReady() {
const query = uni.createSelectorQuery().in(this);
query.select('#myChart').fields({ node: true, size: true }).exec((res) => {
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
const width = res[0].width;
const height = res[0].height;
const dpr = uni.getSystemInfoSync().pixelRatio;
canvas.width = width * dpr;
canvas.height = height * dpr;
ctx.scale(dpr, dpr);
this.chart = echarts.init(canvas, null, { renderer: 'canvas' });
this.chart.setOption({ /* 配置项 */ });
});
}
echarts-canvas 在 App 端（nvue）怎么用？绕不开原生 canvas 组件
nvue 页面不支持 webview 内嵌或普通 div 渲染，必须用 <canvas> 标签 + uni-app 提供的 canvas API，再桥接 echarts-canvas。这不是“引入就能用”的流程，而是要手动绑定上下文。
- 安装：
npm install echarts-canvas - nvue 模板中写：
<canvas canvas-id="chartCanvas" id="chartCanvas" @touchstart="onTouchStart"></canvas> - 在
onReady中调用uni.createCanvasContext，再把 context 传给echarts-canvas的init - 每次
setOption后必须手动调用chart.render()，它不会自动重绘 - 注意：字体、图片等资源需转为 base64 或使用本地路径，网络图片默认不加载
H5 端能用原生 echarts，但别忽略按需引入和内存泄漏
H5 看似最简单，反而最容易出性能问题。全量引入 echarts 会让包体积增加 500KB+，且频繁切换页面不销毁实例会导致内存持续增长。
- 按需引入：用
echarts/lib/echarts+ 所需图表类型，例如：import * as echarts from 'echarts/lib/echarts'; echarts.use([echarts.graphic, echarts.line]) - 务必在
beforeDestroy或onUnload中调用chart.dispose()，否则图表实例残留 - 避免在
v-for里反复 new chart 实例，复用或懒加载更稳妥 - 移动端 H5 注意 touch 事件兼容性，
echarts默认开启touchZoomRotate可能误触发双指缩放
真正麻烦的从来不是“怎么画出来”，而是“在哪画、谁来管生命周期、资源谁来释放”。不同端的 canvas 抽象层差异太大，混用一套代码几乎必然翻车。
