uni-app 引入echarts 报Bug

uni-app 引入echarts 报Bug

开发环境 版本号 项目创建方式
Windows wi10 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：wi10

HBuilderX类型：正式

HBuilderX版本号：3.1.11

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：华为

手机机型：p30

页面类型：vue

打包方式：云端

示例代码：

import * as echarts from ‘echarts’; require(‘echarts/theme/macarons’); //引入主题 this.yechart = echarts.init(document.getElementById(‘echar_test’), ‘shine’);

操作步骤：



随便生成一个图形

预期结果：

安卓手机可以正常使用。

实际结果：



Error in event handler for "view.vdSyncCallback": "TypeError: Cannot read property 'getElementById' of undefined"
提示错误。
h5可以正常展示。

bug描述：

Error in event handler for “view.vdSyncCallback”: “TypeError: Cannot read property ‘getElementById’ of undefined”


更多关于uni-app 引入echarts 报Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

H5端流行的echart报表因为涉及大量dom操作，无法跨端使用，而wx-chart在跨端和更新方面都不足，如果要做小程序，推荐使用全端可用的uChart。
如只考虑H5端，也可以继续使用echart、f2等常规web图表。
如不考虑小程序，那么App端和H5，还可以通过renderjs技术来使用echart、f2等web图表，功能性能比uchart更好。什么是renderjs、基于renderjs使用echart的示例

更多关于uni-app 引入echarts 报Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好的谢谢。

你也可以试试 F2 呦 全端兼容 蚂蚁图表 antv F2

感谢。

在uni-app中引入ECharts时，document.getElementById在App端无法使用，因为App环境没有浏览器的DOM API。这是导致TypeError: Cannot read property 'getElementById' of undefined错误的主要原因。

解决方案是使用uni-app的节点查询API替代DOM操作。修改示例代码如下：

import * as echarts from 'echarts';
require('echarts/theme/macarons');

// 使用uni.createSelectorQuery()获取节点
const query = uni.createSelectorQuery().in(this);
query.select('#echar_test').exec((res) => {
  if (res[0]) {
    this.yechart = echarts.init(res[0].node, 'shine');
    // 设置图表选项并渲染
    this.yechart.setOption({ /* 你的配置 */ });
  }
});
回到顶部