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 相关文章推荐
javascript编程起步(第三课)
Feb 27 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
Apr 04 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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
很实用的一个完整email发送程序
2006/10/09 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
PHP CURL CURLOPT参数说明(curl_setopt)
2013/09/30 PHP
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
javascript 限制输入脚本大全
2009/11/03 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
jQuery 选择器详解
2015/01/19 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python的迭代器和生成器
2015/07/29 Python
python实现按任意键继续执行程序
2016/12/30 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
如何验证python安装成功
2020/07/06 Python
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
网上卖盒饭创业计划书
2014/01/26 职场文书
就业协议书怎么填
2014/04/11 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
教师远程研修感悟
2015/11/18 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
详解非极大值抑制算法之Python实现
2021/06/28 Python
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android