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


Posted in Javascript onOctober 25, 2019

今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是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方法,具体的为啥用这个方法,还需要研究下

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

Javascript 相关文章推荐
jQuery中even选择器的定义和用法
Dec 23 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
详解Vue用axios发送post请求自动set cookie
May 10 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
详解jQuery中的easyui
Sep 02 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
JS实现移动端在线签协议功能
Aug 22 Javascript
一文搞懂redux在react中的初步用法
Jun 09 Javascript
浅谈layui 表单元素的选中问题
Oct 25 #Javascript
layUI的验证码功能及校验实例
Oct 25 #Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 #Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 #Javascript
Vue 用Vant实现时间选择器的示例代码
Oct 25 #Javascript
vue登录以及权限验证相关的实现
Oct 25 #Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 #Javascript
You might like
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
如何在PHP中使用Oracle数据库(3)
2006/10/09 PHP
php中的实现trim函数代码
2007/03/19 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
js获取变量
2006/08/24 Javascript
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
web打印小结
2017/01/11 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
对Python中type打开文件的方式介绍
2018/04/28 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
培训专员岗位职责
2014/02/26 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
党支部培养考察意见
2015/06/02 职场文书
工作简报范文
2015/07/21 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript