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

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'], //三组数据对应的颜色
        toolbox: {
          show : true,
          feature : {
            restore : {show: true}, //还原工具
          },
          top:5, //工具栏的位置
          right:15,
          iconStyle:{
            borderColor:'white'
          }
        },
        grid:{ //图标位于整个canvas画布的位置
          x:50,
          y:50,
          x2:30,
          y2:25
        },
        legend: { //多组数据切换,是否显示
          data:[
            {
              name:'数据一',
              textStyle:{
                color:'#3398DB'
              }
            },{
              name:'数据二',
              textStyle:{
                color:'#67c23a'
              }
            },{
              name:'数据三',
              textStyle:{
                color:'#e6a23c'
              }
            }
          ],
          y:'10px'
        }, 
        xAxis : [
          {
            type : 'category',
            data : [], //横坐标数据,后台返回
            axisLabel:{
              color:'white'
            }
          }
        ],
        yAxis : [
          {
            type : 'value',
            axisLabel:{
              color:'white'
            }
          }
        ],
        series: [{ 
          name:'数据一',
          data: [],  //后台返回
          type: 'bar',
          barCategoryGap:'30%',
        },{
          name:'数据二',
          data: [], //后台返回
          type: 'bar',
          barCategoryGap:'30%',
        },{
          name:'数据三',
          data: [], //后台返回的数据是纵坐标的值
          type: 'bar',
          barCategoryGap:'30%',//柱状图各组数据间的距离
        }
        ]
      }

4.数据改变后，重绘canvas,在watch中进行深度监听

watch:{
    activityData:{
      deep:true,
      handler(newValue,oldValue){
        this.activity.setOption(newValue)
      }
    }
}

详细配置

https://echarts.apache.org/v4/zh/option.html#title