There is a requirement in the project today, which is to click an icon on the page and a drawer-like pop-up window pops up (the pop-up window is the drawer of the element UI). The pop-up window is the data presented by echarts. When I use echarts directly, I reported an error dom and did not get it;
This makes me confused. I usually get it this way, why can't I do it today? After searching for a lot of answers, I realized that the drawer was closed when I first entered the page, so echarts did not obtain the dom. When the drawer came out, there was an open event, which initialized the echarts and executed the data in this event;
<el-drawer
title="Analysis Chart"
:modal="false"
:close-on-click-modal="false"
:modal-append-to-body="false"
size="600px"
:="dataVisible"
@opened="opens"
>
<div ref="main" style="width: 100%;height:100%;"></div>
</el-drawer>
export default {
data() {
return {
isColor: true,
option1: {
title: {
text: 'Analysis of total assets',
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: 'Access Source',
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.$(this.$).setOption(this.option1)
}
}
This prevents the data from loading before the dom is rendered, mainly using the open method of element ui pop-up window. The specific reason for using this method needs to be studied.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.