uni-app中直接使用echarts会因环境无DOM而报错，推荐微信小程序用echarts-for-weixin+ec-canvas，H5/App端需强制canvas渲染器，跨平台首选ucharts——专为uni-app设计、无DOM依赖、API近似echarts且更轻量。
uni-app 里直接用 echarts 会报错，别硬上 npm install
uni-app 的运行环境不是标准浏览器，echarts 默认依赖 DOM API（比如 document.createElement），在小程序或 App 端直接 import * as echarts from 'echarts' 会立刻报 document is not defined 或 Cannot read property 'appendChild' of null。这不是你代码写错了，是底层环境不兼容。
官方推荐方案是使用 echarts-for-weixin 的 uni-app 封装版，但注意：它只适配微信小程序；其他平台（H5、App、支付宝、头条）必须换路子。
- 微信小程序：用
echarts-for-weixin+canvas组件桥接 - H5/APP：必须走
echarts官方的echarts-gl或精简版 +canvas渲染器手动注入 - 跨平台统一方案：优先考虑
ucharts（专为 uni-app 设计），它内部已屏蔽 DOM 依赖，API 接近 echarts 但更轻量
微信小程序中正确引入 echarts-for-weixin
不能通过 npm 安装后直接 import，必须用「原生组件」方式加载。核心是把 echarts-for-weixin 的 ec-canvas 组件放进页面，再用 createCanvasContext 初始化实例。
- 下载
echarts-for-weixin的ec-canvas目录（GitHub 上找 v2.9.0+ 版本），放入项目components/ec-canvas/ - 页面
.vue中注册组件：components: { 'ec-canvas': '@/components/ec-canvas/ec-canvas' } -
ec-canvas必须设置canvas-id，且不能用动态值（如:canvas-id="id"），要写死，比如canvas-id="mychart-dom-bar" - 初始化时需等待
ec-canvasready 回调，再调用this.$refs.ec.init，传入一个返回echarts实例的函数
export default {
data() {
return {
ec: {
onInit: this.onInit
}
}
},
methods: {
onInit(canvas, width, height) {
const chart = echarts.init(canvas, null, { renderer: 'canvas', width, height })
chart.setOption(this.echartsOptions)
return chart
}
}
}H5 和 App 端用原生 echarts 要手动指定渲染器
H5 环境能跑 DOM 版 echarts，但 App（尤其是 iOS）常因 WebView 版本低导致 SVG 渲染失败；App 端强烈建议强制用 canvas 渲染器，避免黑屏或空白。
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
- 安装：
npm install echarts@5.4.3（别用最新版，v5.5+ 对 canvas 兼容有 regression） - 引入时加后缀：
import * as echarts from 'echarts/lib/echarts'，再按需引入组件（如import 'echarts/lib/chart/bar'） - 初始化必须传
renderer: 'canvas'，否则 H5 可能默认用 SVG，App 端直接挂掉 - 容器元素需有明确宽高（不能靠 flex 自适应），建议用
view包一层并设style="width: 100%; height: 400rpx;"
跨平台最稳的替代方案：用 ucharts 替代 echarts
ucharts 不是 echarts 的子集，而是从零写的 uni-app 原生图表库，所有平台共用同一套 canvas 渲染逻辑，没有 DOM 依赖，体积也小（gzip 后约 80KB）。API 设计大量借鉴 echarts，迁移成本低。
- 安装：
npm install ucharts-js - 页面中直接 import：
import uCharts from 'ucharts-js' - 数据格式和 echarts 高度相似，但配置项更扁平（比如没有
series[0].type，而是type: 'bar'） - 注意单位：
width/height必须传数字（单位是 px），需用uni.upx2px(750)换算，不能传'100%' - 事件绑定靠
callback参数，不是 DOM 事件，例如点击某点会触发callback({ seriesIndex, dataIndex })
复杂交互（如拖拽缩放、多 Y 轴联动）还是得回 echarts，但日常柱状图、折线图、饼图，ucharts 足够稳，且不用操心平台差异。
真正麻烦的是需要服务端渲染图表或导出 PNG 的场景——这时候连 ucharts 都不行，得切回 node-canvas + echarts 服务端生成，前端只负责展示图片。
