Vue2.x使用echarts 在echarts实例化时报错

Question

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

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)

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1

注意看这个："TypeError: Cannot read properties of undefined (reading 'getAttribute')" 。看看你getAttribute方法有没有用错