vue中使用element ui的弹窗与echarts之间的问题详解

 更新时间:2019年10月25日 10:48:12   作者:纯白棒球帽  
这篇文章主要介绍了vue中使用element ui的弹窗与echarts之间的问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到;

这就陷入疑惑,平时都是这样获取的,怎么今天就不行了呢,搜索了很多答案之后才知道,在刚进入页面的时候抽屉是关闭的,那echarts不进行获取dom,当点击抽屉出来的时候,有个opened事件,在这个事件里边进行echarts的初始化,执行数据;

<el-drawer
   title="分析图表"
   :modal="false"
   :close-on-click-modal="false"
   :modal-append-to-body="false"
   size="600px"
   :visible.sync="dataVisible"
   @opened="opens"
  >
  <div ref="main" style="width: 100%;height:100%;"></div>
</el-drawer>

export default {
 data() {
  return {
   isColor: true,
   option1: {
    title: {
     text: '总资产占比分析',
     x: 'left'
    },
    tooltip: {
     trigger: 'item',
     formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
     orient: 'vertical',
     right: '10%',
     top: '35%',
     data: ['A', 'B', 'C', 'D']
    },
    series: [
     {
      name: '访问来源',
      type: 'pie',
      radius: '70%',
      center: ['25%', '60%'],
      data: [
       { value: 335, name: 'A' },
       { value: 310, name: 'B' },
       { value: 234, name: 'C' },
       { value: 135, name: 'D' }
      ],
      label: {
       normal: {
        show: false,
        position: 'center'
       }
      }
     }
    ]
   },
}}
}
method:{
  opens(){
     this.$nextTick(() => {
      this.pie1()
   })
  },
  pie1(){
    this.$echarts.init(this.$refs.main).setOption(this.option1)
  }
}

这样防止dom没有渲染之前,数据先加载,主要是用了element ui弹窗的open方法,具体的为啥用这个方法,还需要研究下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue基于Echarts的拖拽数据可视化功能实现

    vue基于Echarts的拖拽数据可视化功能实现

    这篇文章主要给大家介绍了关于vue基于Echars的拖拽数据可视化功能实现的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 详解VS Code使用之Vue工程配置format代码格式化

    详解VS Code使用之Vue工程配置format代码格式化

    这篇文章主要介绍了详解VS Code使用之Vue工程配置format代码格式化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • VUE+Canvas 实现桌面弹球消砖块小游戏的示例代码

    VUE+Canvas 实现桌面弹球消砖块小游戏的示例代码

    这篇文章主要介绍了VUE+Canvas 实现桌面弹球消砖块小游戏,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • vue 获取url参数、get参数返回数组的操作

    vue 获取url参数、get参数返回数组的操作

    这篇文章主要介绍了vue 获取url参数、get参数返回数组的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 在vue项目实现一个ctrl+f的搜索功能

    在vue项目实现一个ctrl+f的搜索功能

    刚刚接到领导通知,需要实现搜索功能,因为项目是vue的而且是手机端,对我来说有点小难度。经过小编的一番思索最终还是解决了,今天小编把实现过程分享到脚本之家平台,需要的朋友参考下
    2020-02-02
  • Vue中关闭弹窗组件时销毁并隐藏操作

    Vue中关闭弹窗组件时销毁并隐藏操作

    这篇文章主要介绍了Vue中关闭弹窗组件时销毁并隐藏操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue生成token保存在客户端localStorage中的方法

    vue生成token保存在客户端localStorage中的方法

    本篇文章主要介绍了vue生成token保存在客户端localStorage中的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 解决vue v-for src 图片路径问题 404

    解决vue v-for src 图片路径问题 404

    今天小编就为大家分享一篇解决vue v-for src 图片路径问题 404,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue2.0 axios跨域并渲染的问题解决方法

    vue2.0 axios跨域并渲染的问题解决方法

    下面小编就为大家分享一篇vue2.0 axios跨域并渲染的问题解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue 数据操作相关总结

    vue 数据操作相关总结

    这篇文章主要介绍了vue 数据操作的相关资料,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-12-12

最新评论