Chart-for-Apache-Weex icon indicating copy to clipboard operation
Chart-for-Apache-Weex copied to clipboard

TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

Open NoraGithub opened this issue 8 years ago • 1 comments
trafficstars

I run weex plugin add weex-gcanvasand modified it because of version conflict issue .

  1. I globally registered gcanvas in my entry.js, otherwise , it's reminded that it's not registered.
...
import GCanvas from 'weex-gcanvas'
Vue.component('gcanvas',GCanvas)

new Vue(Vue.util.extend({ el: '#root', router, store }, App));
...
  1. In order to get rid of file type inspector(we is no longer supported ), I don't use original weex-chart plugin, but rewrite chart.we as chart.vue;
/**
* Copy from node_modules
*/
<template>
    <gcanvas id="wxc_gcanvas" :style="{ width:width, height:height}"></gcanvas>
</template>
<style scoped>
    .wxc_gcanvas{
        background-color:#ffffff
    }
</style>
<script>
    import CanvasElement from 'weex-chart/CanvasElement'
    import  Chart from 'weex-chart/chart'
    export default {
        name:'chart',
        data: function(){
           return{ 
            width: 750,
            height: 375
            }
        },
        created: function () {
            console.log('this');
            CanvasElement.reset();
        },
        mounted: function () {
            console.log(this);
            console.log(this.$el);
            console.log(this.$refs.wxc_gcanvas);
            CanvasElement.init(this.$el ).then(function (context) {
                console.log(2);
                Chart.ready(context);
            });
            //this.$el('wxc_gcanvas')
        }
    }
</script>

And now I got the ERROR below in the console, and I don't think at the moment google would help any longer, would you please give a hand?

[Vue warn]: Error in render function: "TypeError: Cannot read property 'render' of null"

found in

---> <Gcanvas>
       <Chart> at /Users/NoraChan/Desktop/geekhacker.tech/datahub_weex/src/components/weex-chart/chart.vue
         <Pivot> at /Users/NoraChan/Desktop/geekhacker.tech/datahub_weex/src/components/pivot.vue
           <WeexDiv>
             <Root>
warn @ vue.runtime.js:481
handleError @ vue.runtime.js:564
Vue._render @ vue.runtime.js:4121
updateComponent @ vue.runtime.js:2538
get @ vue.runtime.js:2879
Watcher @ vue.runtime.js:2868
mountComponent @ vue.runtime.js:2542
Vue$3.$mount @ vue.runtime.js:7388
init @ vue.runtime.js:3495
createComponent @ vue.runtime.js:5134
createElm @ vue.runtime.js:5077
patch @ vue.runtime.js:5557
Vue._update @ vue.runtime.js:2414
updateComponent @ vue.runtime.js:2538
get @ vue.runtime.js:2879
Watcher @ vue.runtime.js:2868
mountComponent @ vue.runtime.js:2542
Vue$3.$mount @ vue.runtime.js:7388
init @ vue.runtime.js:3495
createComponent @ vue.runtime.js:5134
createElm @ vue.runtime.js:5077
patch @ vue.runtime.js:5557
Vue._update @ vue.runtime.js:2414
updateComponent @ vue.runtime.js:2538
get @ vue.runtime.js:2879
Watcher @ vue.runtime.js:2868
mountComponent @ vue.runtime.js:2542
Vue$3.$mount @ vue.runtime.js:7388
init @ vue.runtime.js:3495
createComponent @ vue.runtime.js:5134
createElm @ vue.runtime.js:5077
updateChildren @ vue.runtime.js:5357
patchVnode @ vue.runtime.js:5432
patch @ vue.runtime.js:5562
Vue._update @ vue.runtime.js:2424
updateComponent @ vue.runtime.js:2538
get @ vue.runtime.js:2879
run @ vue.runtime.js:2956
flushSchedulerQueue @ vue.runtime.js:2724
(anonymous) @ vue.runtime.js:703
nextTickHandler @ vue.runtime.js:650
Promise resolved (async)
timerFunc @ vue.runtime.js:665
queueNextTick @ vue.runtime.js:713
queueWatcher @ vue.runtime.js:2811
update @ vue.runtime.js:2946
notify @ vue.runtime.js:780
reactiveSetter @ vue.runtime.js:1002
proxySetter @ vue.runtime.js:3071
tabTo @ index.web.js:formatted:3006
boundFn @ vue.runtime.js:188
click @ index.web.js:formatted:7038
invoker @ vue.runtime.js:1816
handler @ index.js:7577
invoker @ vue.runtime.js:1812
fireEvent @ index.js:110
touchendHandler @ index.js:410
11:56:58.859 vue.runtime.js:568 TypeError: Cannot read property 'render' of null
    at Proxy.render (index.web.js:formatted:15588)
    at VueComponent.Vue._render (vue.runtime.js:4119)
    at VueComponent.updateComponent (vue.runtime.js:2538)
    at Watcher.get (vue.runtime.js:2879)
    at new Watcher (vue.runtime.js:2868)
    at mountComponent (vue.runtime.js:2542)
    at VueComponent.Vue$3.$mount (vue.runtime.js:7388)
    at init (vue.runtime.js:3495)
    at createComponent (vue.runtime.js:5134)
    at createElm (vue.runtime.js:5077)

vue.runtime.js:481 [Vue warn]: Error in mounted hook: "TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'."

found in

---> <Pivot> at /Users/NoraChan/Desktop/geekhacker.tech/datahub_weex/src/components/pivot.vue
       <WeexDiv>
         <Root>
warn @ vue.runtime.js:481
handleError @ vue.runtime.js:564
callHook @ vue.runtime.js:2667
insert @ vue.runtime.js:3520
invokeInsertHook @ vue.runtime.js:5456
patch @ vue.runtime.js:5626
Vue._update @ vue.runtime.js:2424
updateComponent @ vue.runtime.js:2538
get @ vue.runtime.js:2879
run @ vue.runtime.js:2956
flushSchedulerQueue @ vue.runtime.js:2724
(anonymous) @ vue.runtime.js:703
nextTickHandler @ vue.runtime.js:650
Promise resolved (async)
timerFunc @ vue.runtime.js:665
queueNextTick @ vue.runtime.js:713
queueWatcher @ vue.runtime.js:2811
update @ vue.runtime.js:2946
notify @ vue.runtime.js:780
reactiveSetter @ vue.runtime.js:1002
proxySetter @ vue.runtime.js:3071
tabTo @ index.web.js:formatted:3006
boundFn @ vue.runtime.js:188
click @ index.web.js:formatted:7038
invoker @ vue.runtime.js:1816
handler @ index.js:7577
invoker @ vue.runtime.js:1812
fireEvent @ index.js:110
touchendHandler @ index.js:410
11:56:58.877 vue.runtime.js:568 TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at Object.getStyle (index.web.js:formatted:14297)
    at Object.getWidth (index.web.js:formatted:14300)
    at r.__initCanvas (index.web.js:formatted:14036)
    at r.__init (index.web.js:formatted:14011)
    at new r (index.web.js:formatted:13904)
    at new o.Chart (index.web.js:formatted:2457)
    at VueComponent.mounted (index.web.js:formatted:2876)
    at callHook (vue.runtime.js:2665)
    at Object.insert (vue.runtime.js:3520)
    at invokeInsertHook (vue.runtime.js:5456)

NoraGithub avatar Nov 12 '17 04:11 NoraGithub

Would anyone please give a hand?

NoraGithub avatar Nov 25 '17 03:11 NoraGithub