uni-app中使用Echarts图表 uni-app引入echarts实现方法-uni-app-PHP中文网

uni-app中直接使用echarts会因环境无DOM而报错，推荐微信小程序用echarts-for-weixin+ec-canvas，H5/App端需强制canvas渲染器，跨平台首选ucharts——专为uni-app设计、无DOM依赖、API近似echarts且更轻量。

uni-app中使用echarts图表 uni-app引入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-canvas ready 回调，再调用 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 Master

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;"