问题遇到的现象和发生背景
问题相关代码,请勿粘贴截图
index.html中引入echarts文件
<!-- 引入echarts文件后 window.echarts -->
<script src="static/lib/echarts.min.js"></script>
在main.js中 将全局echarts挂载到Vue的原型对象上
// 将全局echarts挂载到Vue的原型对象上
// 别的组件中 this.$echarts
Vue.prototype.$echarts = window.echarts
在trendCom.vue中实例化echarts对象
this.chartInstance = this.$echarts.init(this.$refs.trend_ref)
运行结果及报错内容
[Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'getAttribute')"
found in
---> <TrendCom>
<TrendPage> at src/views/trendPage.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?c320:619
logError @ vue.runtime.esm.js?c320:1893
globalHandleError @ vue.runtime.esm.js?c320:1888
handleError @ vue.runtime.esm.js?c320:1848
invokeWithErrorHandling @ vue.runtime.esm.js?c320:1871
callHook @ vue.runtime.esm.js?c320:4235
insert @ vue.runtime.esm.js?c320:3158
invokeInsertHook @ vue.runtime.esm.js?c320:6390
patch @ vue.runtime.esm.js?c320:6609
Vue._update @ vue.runtime.esm.js?c320:3963
updateComponent @ vue.runtime.esm.js?c320:4081
get @ vue.runtime.esm.js?c320:4495
run @ vue.runtime.esm.js?c320:4570
flushSchedulerQueue @ vue.runtime.esm.js?c320:4326
eval @ vue.runtime.esm.js?c320:1989
flushCallbacks @ vue.runtime.esm.js?c320:1915
Promise.then (async)
timerFunc @ vue.runtime.esm.js?c320:1942
nextTick @ vue.runtime.esm.js?c320:1999
queueWatcher @ vue.runtime.esm.js?c320:4418
update @ vue.runtime.esm.js?c320:4560
Vue.$forceUpdate @ vue.runtime.esm.js?c320:3984
eval @ index.js?0e5a:244
eval @ index.js?0e5a:242
eval @ index.js?0e5a:119
eval @ trendCom.vue?6f0b:28
./src/components/trendCom.vue @ app.js:41
__webpack_require__ @ app.js:374
_requireSelf @ app.js:648
apply @ app.js:1352
(anonymous) @ app.js:890
internalApply @ app.js:888
(anonymous) @ app.js:825
waitForBlockingPromises @ app.js:779
(anonymous) @ app.js:823
Promise.then (async)
(anonymous) @ app.js:822
Promise.then (async)
(anonymous) @ app.js:802
Promise.then (async)
hotCheck @ app.js:793
check @ dev-server.js?2743:14
eval @ dev-server.js?2743:55
emit @ events.js?b914:153
reloadApp @ reloadApp.js?7531:46
ok @ index.js?abc1:175
eval @ socket.js?d6e0:60
client.onmessage @ WebSocketClient.js?5586:50
vue.runtime.esm.js?c320:1897 TypeError: Cannot read properties of undefined (reading 'getAttribute')
at echarts.min.js:22:210725
at Yd (echarts.min.js:22:210761)
at Object.t.init (echarts.min.js:22:748697)
at VueComponent.initChart (trendCom.vue?15e1:29:1)
at VueComponent.mounted (trendCom.vue?15e1:18:1)
at invokeWithErrorHandling (vue.runtime.esm.js?c320:1863:1)
at callHook (vue.runtime.esm.js?c320:4235:1)
at Object.insert (vue.runtime.esm.js?c320:3158:1)
at invokeInsertHook (vue.runtime.esm.js?c320:6390:1)
at VueComponent.patch [as __patch__] (vue.runtime.esm.js?c320:6609:1)