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="width: 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     
 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="width: 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     

1<el-drawer
2title=”分析图表” 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=”width: 100%;height:100%;”></div>11</el-drawer>1213export default {
14 data() {
15 return {
16 isColor: true,
17 option1: {
18 title: {
19 text: ‘总资产占比分析’,
20 x: ‘left’
21 },
22 tooltip: {
23 trigger: ‘item’,
24<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}
55method:{
56 opens(){
57 this.$nextTick(() => {
58 this.pie1()
59 })
60 },
61 pie1(){
62 this.$echarts.init(this.$refs.main).setOption(this.option1)
63 }
64}
6566

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

» 本文来自:前端开发者 » 《vue中,使用element ui的弹窗与echarts之间的问题_哒哒_前端开发者》
» 本文链接地址:https://www.rokub.com/73853.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!