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中,使用element ui的弹窗与echarts之间的问题的更多相关文章
- 在vue中关于element UI 中表格实现下载功能,表头添加按钮,和点击事件失效的解决办法。
因为在element 中表格是使用el-table的形式通过数据来支撑结构,所以,表格的样式没有自己写的灵活,所以有了没法添加按钮的烦恼.下面是解决的方法. 准备工作: 一.下载npm安装包两个 1. ...
- vue中修改Element ui样式不起作用
公司做的一个后台系统,由于Elemen ui是响应式的,在小屏笔记本中,一行两列的表单会自动变成一行一列,这样就很不美观了,由于是后台系统,当时也没考虑适配问题. 老总 地表最强的电脑 运行了一下,当 ...
- 在vue中使用Element的message组件
在vue中使用Element的message组件 在vue文件中使用 this.$message({ message: "提示信息", type: "success&qu ...
- FastAPI实践项目:SayHello(FastAPI + vue.js + axios + element ui)
目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...
- 如何在 Vite 中使用 Element UI + Vue 3
在上篇文章<2021新年 Vue3.0 + Element UI 尝鲜小记>里,我们尝试使用了 Vue CLI 创建 Vue 3 + Element UI 的项目,而 Vue CLI 实际 ...
- vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。
老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...
- vue项目使用element ui的Checkbox
最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...
- vue同时安装element ui跟 vant
记一个卡了我比较久的问题,之前弄的心态爆炸各种问题. 现在来记录一下,首先我vant是已经安装成功了的. 然后引入element ui npm i element-ui -S 接着按需引入,安装插件 ...
- Vue中组件化编码使用、实现组件之间的参数传递(实战练习二)
上一章节实现的是静态页面的设计.这一章节实现将数据抽取出来.通过组件间参数的传递来实现 上一章节链接地址:https://blog.csdn.net/weixin_43304253/article/d ...
随机推荐
- 学习笔记14Js使用技巧
**页面加载完毕时执行一段代码$(fuction(){ initialMethod(); }); *将一个<form>序列化为json对象并传给服务器var postData = $(&q ...
- Netty连接处理那些事
编者注:Netty是Java领域有名的开源网络库,特点是高性能和高扩展性,因此很多流行的框架都是基于它来构建的,比如我们熟知的Dubbo.Rocketmq.Hadoop等,针对高性能RPC,一般都是基 ...
- 01-MyBatis启动流程分析
目录 MyBatis简单介绍 启动流程分析 简单总结 附录 MyBatis内置别名转换 参考 MyBatis简单介绍 MyBatis是一个持久层框架,使用简单,学习成本较低.可以执行自己手写的SQL语 ...
- 由浅入深——从ArrayList浅谈并发容器
原创作品转载请附:https://www.cnblogs.com/superlsj/p/11655523.html 一.一个案例引发的思考 public class ArrayListTest { p ...
- SpringBoot 源码解析 (二)----- Spring Boot精髓:启动流程源码分析
本文从源代码的角度来看看Spring Boot的启动过程到底是怎么样的,为何以往纷繁复杂的配置到如今可以这么简便. 入口类 @SpringBootApplication public class He ...
- [java] 计算时间复杂度
一.精算: 1.所有的声明,都不计时间: 2.赋值语句占1个时间单位(下称:单位),比如sum=0: 3.return占1个单位,比如,reeturn sum. 我怀疑范围一个链表头,不止占1 ...
- VS2017,遇到异常:这可能是由某个扩展导致的
网上看的解决办法没有解决,干脆自己亲自动手搞吧! 具体问题如下: 解决方案: 按照提示路径打开日志文件定位问题所在,打开之后,拉倒最后看到如下图所示: 我的问题是因为安装了一个叫 "Clau ...
- nyoj 274-正三角形的外接圆面积 (R = PI * a * a / 3)
274-正三角形的外接圆面积 内存限制:64MB 时间限制:1000ms 特判: No 通过数:14 提交数:22 难度:0 题目描述: 给你正三角形的边长,pi=3.1415926 ,求正三角形的外 ...
- Apache中AllowOverride的详细配置使用
我们通常利用Apache的rewrite模块对URL进行重写,rewrite规则会写在 .htaccess 文件里.但要使 apache 能够正常的读取.htaccess 文件的内容,就必须对.hta ...
- python day 1 homework 1
作业一要求: 1 输入用户名密码 2 认证成功后显示欢迎信息 3 输错三次后锁定 import os #生成保存用户信息的字典 d_userinfo = {} #保存用户登录字典 input_logi ...