uni-app中直接使用echarts会因缺少window/document报错，应按平台选择方案：微信小程序用echarts-for-weixin，App/H5用原生echarts（H5需onReady后初始化），多端推荐uCharts替代以避免兼容问题。
uni-app 里直接用 echarts 会报错：找不到 window 或 document
这是因为 echarts 默认依赖浏览器全局对象，在 uni-app 的非 H5 端（如小程序、App）运行时，window 和 document 不可用。直接 npm install echarts 后 import * as echarts from 'echarts'，在微信小程序或 App 端会立刻抛出 ReferenceError: window is not defined。
解决思路不是“换库”，而是用官方适配版：echarts-for-weixin（仅限微信小程序）或更通用的 echarts + uni-app 兼容层方案。但最稳的方式是：只在 H5 端用原生 echarts，其他端改用 echarts-canvas 渲染器 + 小程序自绘 canvas。
- 微信小程序：必须用
echarts-for-weixin提供的ec-canvas组件，且需手动初始化 canvas 实例 - App 和 H5：可直接用
echarts，但 H5 需确保 DOM 已挂载（onReady后初始化） - 支付宝/百度等小程序：不支持
echarts-for-weixin，得用echarts的canvas渲染器 + 自封装渲染逻辑（较麻烦）
微信小程序中引入 echarts-for-weixin 的三步实操
这不是简单 npm install 就完事——它本质是个「组件 + 初始化脚本」组合包，漏一步就白搭。
- 执行
npm install echarts-for-weixin --save（注意不是echarts） - 把
node_modules/echarts-for-weixin/ec-canvas整个文件夹复制到项目components/ec-canvas/下（uni-app 不支持 node_modules 中的自定义组件路径） - 在页面中声明组件并绑定 canvas：
<template> <view class="container"> <ec-canvas id="mychart-dom" :ec="ec" /> </view> </template> <script> import EcCanvas from '@/components/ec-canvas/ec-canvas' export default { components: { EcCanvas }, data() { return { ec: null } }, onReady() { this.initChart() }, methods: { initChart() { this.ec = { onInit: canvas => { const chart = echarts.init(canvas, null, { renderer: 'canvas' }) canvas.setChart(chart) chart.setOption({ /* 你的配置 */ }) return chart } } } } }</script>
echarts 配置项在 uni-app 中的兼容性陷阱
很多选项看着能用，实际在小程序里会静默失效，比如 tooltip.trigger 设为 'axis' 在小程序 canvas 上不响应 hover；又比如 dataZoom 滚动条在 App 端根本不可拖拽。
-
animation默认开启，但在低端安卓机上易卡顿，建议设为false或用animationDuration: 0 -
color数组如果含 CSS 变量（如var(--primary)），小程序不识别，得写死十六进制色值 - 使用
graphic渲染自定义图形时，image类型只支持本地路径（/static/logo.png），不支持网络地址或 base64 - 异步加载数据后调用
chart.setOption(option, { notMerge: true })是安全的；但直接改option.series[0].data再setOption(option)容易丢掉动画状态
跨平台统一图表方案：为什么推荐封装一个 UCharts 代替原生 echarts
如果你的项目要同时跑 H5、微信小程序、App 甚至快应用，硬啃 echarts 多端适配成本远高于预期——每个平台都要写分支逻辑、补 canvas 初始化、绕开 DOM 依赖、处理 touch 事件映射……最后代码里全是 if (uni.getSystemInfoSync().platform === 'mp-weixin')。
更轻量的解法是换用专为 uni-app 设计的 ucharts（注意拼写是 u-charts，不是 echarts）：
- 它本身基于
canvas，无 DOM 依赖，天然支持所有 uni-app 平台 - API 更精简，
initChart()传入 canvas ID 和配置即可，不用管onInit回调和实例缓存 - 自带主题、导出图片（
canvasToTempFilePath）、手势缩放（scrollEnable）等 uni-app 常用能力 - 唯一代价：功能比
echarts少（比如没有地理坐标系、3D 图、复杂 markArea），但 90% 的柱状图、折线图、饼图完全够用
真正难的不是“怎么让图表显示出来”，而是“怎么让同一份配置在五个平台都稳定响应交互、不闪、不白屏、不报错”。这点上，妥协用 ucharts 往往比硬刚 echarts 更省时间。
