zoukankan      html  css  js  c++  java
  • vue中,使用element ui的弹窗与echarts之间的问题

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

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

     1  <el-drawer
     2       title="分析图表"
     3       :modal="false"
     4       :close-on-click-modal="false"
     5       :modal-append-to-body="false"
     6       size="600px"
     7       :visible.sync="dataVisible"
     8       @opened="opens"
     9     >
    10     <div ref="main" style=" 100%;height:100%;"></div>
    11 </el-drawer>
    12 
    13 export default {
    14   data() {
    15     return {
    16       isColor: true,
    17       option1: {
    18         title: {
    19           text: '总资产占比分析',
    20           x: 'left'
    21         },
    22         tooltip: {
    23           trigger: 'item',
    24           formatter: '{a} <br/>{b} : {c} ({d}%)'
    25         },
    26         legend: {
    27           orient: 'vertical',
    28           right: '10%',
    29           top: '35%',
    30           data: ['A', 'B', 'C', 'D']
    31         },
    32         series: [
    33           {
    34             name: '访问来源',
    35             type: 'pie',
    36             radius: '70%',
    37             center: ['25%', '60%'],
    38             data: [
    39               { value: 335, name: 'A' },
    40               { value: 310, name: 'B' },
    41               { value: 234, name: 'C' },
    42               { value: 135, name: 'D' }
    43             ],
    44             label: {
    45               normal: {
    46                 show: false,
    47                 position: 'center'
    48               }
    49             }
    50           }
    51         ]
    52       },
    53 }}
    54 }
    55 method:{
    56     opens(){
    57          this.$nextTick(() => {
    58             this.pie1()
    59       })
    60     },
    61     pie1(){
    62        this.$echarts.init(this.$refs.main).setOption(this.option1)
    63     }
    64 }
    65 
    66     

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

  • 相关阅读:
    python 进度条
    linux中利用Shell脚本实现自动安装部署weblogic服务
    Linux虚拟机如何上网
    常用Python脚本
    Allure测试框架
    软件评测师 第二小时
    保险项目测试流程(一)
    电子商务网站测试总结
    Python随机生成电话号码&号码段分析
    Python中的*args和**kwargs
  • 原文地址:https://www.cnblogs.com/yanyanliu/p/11729876.html
Copyright © 2011-2022 走看看