吃着青梅候竹马
吃着青梅候竹马
  • 发布:2019-05-07 10:29
  • 更新:2019-11-13 11:49
  • 阅读:3944

#插件讨论# 【 ECharts页面模板 - DCloud 】APP中 报错 this.echarts.setCanvasCreator is not a function

分类:uni-app

APP中 报错 this.echarts.setCanvasCreator is not a function,H5没有报错正常显示,请问遇到这个问题的朋友是怎么解决的呢?

2019-05-07 10:29 分享
已邀请:
wcomdex

wcomdex

给大家一个可用的例子,替换最新的 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);
}

  • 小燕子

    赞,就是这个解决方法

    2019-07-26 13:59

  • mouxiaochou@yeah.net

    太赞了

    2019-07-29 09:17

  • changyiwuyu@163.com

    替换了之后,不报错了,但是为什么不显示图表呢?

    2019-08-01 09:34

  • 是在下输了

    回复 changyiwuyu@163.com:你好,你解决了吗?我的也是不报错也不显示图表

    2019-09-24 11:56

  • 402415358@qq.com

    回复 是在下输了: 你的这个问题解决了吗

    2019-10-23 16:19

  • 1126765590@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)


    let option =  {}  

    chart.setOption(option);

    return chart // 返回 chart 后可以自动绑定触摸操作
    }

    }

    width和height会继承父级元素的width和height,所以组件化时候,设置父级为参数即可。

    uniapp无法通过document对象获取dom元素,所以是通过refs获取。

    2019-11-01 15:23

海角自己

海角自己 - CL

有解决的么

513790241@qq.com

513790241@qq.com

已解决,自己按照上面的方式修改了下,也修改了下 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方法的参数需要在原来的基础上修改一下下 ,大家应该能看懂

  • 小燕子

    有没有demo可以参考的呀

    2019-07-24 16:42

  • 我已经按照这个都改掉了但是还是报错type check failed for prop "echarts". Expected Object, got Null;明明都已经没有echars这个参数了

    2019-07-25 17:40

  • 513790241@qq.com

    你这个仔细看下咯,应该是哪里的echarts没删掉

    2019-07-29 10:25

18664698@qq.com

18664698@qq.com

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>

350010981@qq.com

350010981@qq.com - hello world

我也遇到这个问题 请问你解决了吗

小燕子

小燕子

有没有完整的代码呀?我也遇到这个问题了

1072690884@qq.com

1072690884@qq.com - 真像大白

lylyhs@163.com

lylyhs@163.com

<mpvue-echarts class="ec-canvas" :onInit="onInit" canvasId="line" ref="lineChart" />
这里有误
<mpvue-echarts class="ec-canvas" @onInit="onInit" canvasId="line" ref="lineChart" />

@onInit

  • 海角自己

    onlin我们是自定义的地图,这边是个接口所以需要:onInit

    2019-06-27 17:50

18005178464@163.com

18005178464@163.com

楼主解决了吗?根据上报的解决方法报错越来越多了,求指点一下,

悠悠默笙

悠悠默笙 - 选择生日的日历组件,含阴历阳历

我的已经解决了,有需要联系我。19807198428微信同号。

changyiwuyu@163.com

changyiwuyu@163.com

那个大佬能给个demo实例

  • 1445569471@qq.com

    看这篇文章https://blog.csdn.net/qq_18283943/article/details/100940800,很清楚,已经解决

    2019-10-29 15:13

开门丨送快递

开门丨送快递

说不管用的,建议替换完重启下。有缓存,替换没生效。

要回复问题请先登录注册