uni-app中使用Echarts uni-app如何引入和使用图表-uni-app-PHP中文网

uni-app中直接使用echarts会因缺少window/document报错，应按平台选择方案：微信小程序用echarts-for-weixin，app/h5用原生echarts（h5需onready后初始化），多端推荐ucharts替代以避免兼容问题。

uni-app中使用echarts uni-app如何引入和使用图表

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"></ec-canvas></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）：