vue使用echarts简单教程（错误：Error in mounted hook: “TypeError: Cannot read property ‘getAtrribute’ of undef）

原创

于 2020-05-21 17:50:41 发布 · 4k 阅读

CC 4.0 BY-SA版权

1.安装依赖

npm install echarts -S

2.在main.js中引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在组件中使用（报错主要是在渲染的时候没有获取到dom元素，解决方法mounted中）

html标签,一定要设置宽高

<div ref="activity" style="width:100%;height:285px"></div> 




定义一个初始化的方法中写

echartsInit(){
    let activity = this.$echarts.init(this.$refs.activity)
    activity.setOption(this.activityData)
    this.activity = activity
}



在mounted中调用,确保activity需要展示的标签渲染出来

mounted () {
    this.$nextTick(()=>{
      setTimeout(() => {
        this.echartsInit()
      });
    })
  }

data中写入activityData的数据

activityData:{
        title : { 
          text: '活跃度',
          textStyle:{
            color:'white',
            fontSize:'18px'
          },
          x:'15px', //标题的位置
          y:'10px'
        },
        color: ['#3398DB','#67c23a','#e6a23c'], //三组数据对应的颜色
        toolbo