yiyixun
yiyixun
  • 发布:2019-04-30 17:58
  • 更新:2020-06-29 10:44
  • 阅读:9901

用npm的方式引入echarts,出现这个错: el.addEventListener is not a funct

分类:uni-app

原本是按照https://ask.dcloud.net.cn/article/19727这个方法引入 mpvue-echarts,能成功运行。
但是用npm方式引入echarts:

复制代码import echarts from 'echarts'    
import mpvueEcharts from 'mpvue-echarts'       

替换原来的:

复制代码import  * as echarts from '@/components/echarts/echarts.simple.min.js';  
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';

就会报错:
index.umd.min.js:1 [system] errorHandler TypeError: el.addEventListener is not a function
at addEventListener (event.js:138)
at HandlerDomProxy.<anonymous> (HandlerProxy.js:288)
at Array.forEach (<anonymous>)
at Object.each (util.js:298)
at mountHandlers (HandlerProxy.js:287)
at new HandlerDomProxy (HandlerProxy.js:274)
at new ZRender (zrender.js:138)
at Object.init (zrender.js:49)
at new ECharts (echarts.js:194)
at Object.init (echarts.js:1813) Vue {_uid: 1, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …} event handler for "view.onRequestComponentInfo"

请问什么原因呢

2019-04-30 17:58 负责人:无 分享
已邀请:
不是发哥

不是发哥

在echarts的代码里面,有一段代码是:

复制代码function(t)

把它改为:

复制代码function(t,window,document)
  • 1***@qq.com

    大佬安卓端报 this.echarts.setCanvasCreator is not a function 错误知道怎么解决么

    2019-05-01 17:33

  • 不是发哥

    回复 1***@qq.com: 请尝试延时执行

    2019-05-01 19:30

  • yiyixun (作者)

    感谢回答 不过npm的echarts里 哪个文件有function(t)?

    2019-05-06 17:59

  • 不是发哥

    回复 yiyixun: echarts.min.js或者echarts.js

    2019-05-08 10:21

  • z***@qq.com

    回复 不是发哥: 有1400多个function(t)

    2020-05-27 18:26

  • 6***@qq.com

    回复 z***@qq.com: 打开文本搜索 搜function 从上往下找 把第三个位置的function 修改即可

    2021-05-27 16:39

4***@qq.com

4***@qq.com

安卓IOS微信应该都是没问题的,如果是H5的话,不建议用封装的mpvue-echarts标签,而是使用原本的H5用法,采用预编译,类似
<template
<view class="wrap">
<!-- #ifndef H5 -->
<mpvue-echarts :echarts="echarts" :canvasId="myChartId" :onInit="onInit" />
<!-- #endif -->
<!-- #ifdef H5 -->
<view :id="myChartId" style="width: 100%;height: 100%"></view>
<!-- #endif -->
</view>
</template>
<script>
import * as echarts from 'echarts'
// #ifndef H5
import mpvueEcharts from 'mpvue-echarts'
// #endif
...
// #ifdef H5
mounted(){
this.myChart() //函数调用
},
// #endif
method:...
// 初始化
// #ifdef H5
myChart(){
// let el = uni.createSelectorQuery().select('myChart');
let el = document.getElementById(this.myChartId);
let myChart= echarts.init(el);
const option = this.getOption();
myChart.setOption(option);
},
// #endif
// #ifndef H5
onInit(canvas, width, height) {
console.log('onInit(canvas, width, height)');
let myChart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(myChart);
const option = this.getOption();
myChart.setOption(option);
return myChart;
},
</script>

zhangyingkai

zhangyingkai

感谢 终于好了 谢谢大佬

该问题目前已经被锁定, 无法添加新回复

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容