全国服务热线:4008-888-888

技术知识

南宁微信小程序优化_vue中使用element ui的弹窗与

vue中使用element ui的弹窗与echarts之间的问题详解       这篇文章主要介绍了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" /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方法,具体的为啥用这个方法,还需要研究下

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




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服