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

阳光穿透心脏的1/2处 2021-08-29 19:08 278阅读 0赞

**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][https_echarts.apache.org_v4_zh_option.html_title]

[https_echarts.apache.org_v4_zh_option.html_title]: https://echarts.apache.org/v4/zh/option.html#title

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“

相关 Error in render: “TypeError: Cannot read property ‘0‘ of undefined“

相关 Error in render: “TypeError: Cannot read property ‘0‘ of null“

相关 [Vue warn]: Error in render: “TypeError: Cannot read property ‘0‘ of undefined

相关使用Echarts报错 Error in created hook: “TypeError: Cannot read property ‘getAttribute‘ of null“

相关 [Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘coordinateSystem‘ of undefined“

相关解决Error in created hook: “TypeError: Cannot read properties of undefined (reading ‘gutter‘)“的问题！

相关 Error in mounted hook: "TypeError: Cannot set property 'bottom' of undefined"

相关 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null"

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