Just click on an icon on the page, and a drawer-like pop-up window will pop up (the pop-up window is the drawer of element UI). Inside the pop-up window is the data presented by echarts. When I use echarts directly, the error dom is not obtained;
This is confused. I usually get it like this. Why doesn’t it work today. After searching for a lot of answers, I learned that the drawer was closed when I first entered the page. Then echarts does not get the dom. When I click the drawer, it comes out. At that time, there is an opened event, in which echarts is initialized and data is executed;
<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)
}
}
Reprinted: In vue, the problem between the pop-up window using element ui and echarts