APP中 报错 this.echarts.setCanvasCreator is not a function，H5没有报错正常显示，请问遇到这个问题的朋友是怎么解决的呢？
吃着青梅候竹马
- 发布：2019-05-07 10:29
- 更新：2019-11-13 11:49
- 阅读：9206
#插件讨论# 【 ECharts页面模板 - DCloud 】APP中 报错 this.echarts.setCanvasCreator is not a function
分类：uni-app
给大家一个可用的例子，替换最新的 mpvue-echarts 组件， 源码地址：https://github.com/dcloudio/hello-uniapp/blob/master/components/mpvue-echarts/src/echarts.vue ，主要是onInit函数的变化和模板给的不一样
调用方式：
<mpvue-echarts class="ec-canvas" @onInit="lineInit" canvasId="line" ref="lineChart" />
onInit函数参考：
lineInit(e) {
let { width, height } = e;
let canvas = this.$refs.lineChart.canvas;
echarts.setCanvasCreator(() => canvas);
let lineChart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(lineChart);
lineChart.setOption(lineOption);
this.$refs.lineChart.setChart(lineChart);
}
已解决，自己按照上面的方式修改了下，也修改了下 mpvue-echarts echart.vue里面的源码
This.$emit('onInit', {
width: res.width,
height: res.height,
canvas:this.canvas
});<mpvue-echarts class="ec-canvas" @onInit="onInit" canvasId="line" ref="lineChart" />
另外外框需要设置高度，onInit方法的参数需要在原来的基础上修改一下下 ，大家应该能看懂
-
-
我已经按照这个都改掉了但是还是报错type check failed for prop "echarts". Expected Object, got Null；明明都已经没有echars这个参数了
2019-07-25 17:40
-
火浣布 - 娃哈哈
ECharts 图表组件的调整
替换最新的 mpvue-echarts 组件， 源码地址：https://github.com/dcloudio/hello-uniapp/blob/master/components/mpvue-echarts/src/echarts.vue
使用方式修改 ：在 echarts 组件 :onInit 属性中添加代码，添加 ec-canvas 样式，移除:echarts="echarts"
// @/pages/template/echarts/echarts.vue
<template>
<view class="container">
// 添加 ec-canvas 样式保证组件排版，同时移除旧的:echarts="echarts"
<mpvue-echarts class="ec-canvas" :onInit="onInit" canvasId="line" ref="lineChart" />
</view>
</template>
<script>
export default {
// ...
methods: {
// ...
onInit(canvas, width, height) {
// 在方法第一行添加如下代码
echarts.setCanvasCreator(() => canvas);
// ...
}
// ...
}
}
</script>
<mpvue-echarts class="ec-canvas" :onInit="onInit" canvasId="line" ref="lineChart" />
这里有误
<mpvue-echarts class="ec-canvas" @onInit="onInit" canvasId="line" ref="lineChart" />
@onInit
小燕子
赞，就是这个解决方法
2019-07-26 13:59
m***@yeah.net
太赞了
2019-07-29 09:17
c***@163.com
替换了之后，不报错了，但是为什么不显示图表呢？
2019-08-01 09:34
是在下输了
回复 c***@163.com:你好，你解决了吗？我的也是不报错也不显示图表
2019-09-24 11:56
4***@qq.com
回复 是在下输了: 你的这个问题解决了吗
2019-10-23 16:19
1***@qq.com
方法是对的。
initChart({width, height}) {
let canvas = this.$refs.echartsMap.canvas
echarts.setCanvasCreator(() => canvas)
console.log(canvas)
console.log(width)
console.log(height)
let chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart)
}
width和height会继承父级元素的width和height，所以组件化时候，设置父级为参数即可。
uniapp无法通过document对象获取dom元素，所以是通过refs获取。
2019-11-01 15:23