Chart-for-Apache-Weex
Chart-for-Apache-Weex copied to clipboard
TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
trafficstars
I run weex plugin add weex-gcanvasand modified it because of version conflict issue .
- I globally registered
gcanvasin myentry.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));
...
- In order to get rid of file type inspector(
weis no longer supported ), I don't use originalweex-chartplugin, but rewritechart.weaschart.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)
Would anyone please give a hand?