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 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
理解javascript对象继承
Apr 17 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
如何利用node转发请求详解
Sep 17 Javascript
Echarts.js无法引入问题解决方案
Oct 30 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
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
2016/09/20 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python中ConfigParse模块的用法
2014/09/29 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python open()文件处理使用介绍
2014/11/30 Python
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
个人收入证明范本
2014/01/12 职场文书
家长给老师的道歉信
2014/01/13 职场文书
中学生个人自我评价
2014/02/06 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
python如何进行基准测试
2021/04/26 Python
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript