ページ上のアイコンをクリックするだけで、ドロワースタイルのポップアップウィンドウがポップアップします(ポップアップウィンドウは要素UIのドロワーです)。ポップアップウィンドウ内には、echartsによって表示されるデータがあります。 echartsを直接使用すると、エラーdomは取得されません。
これは疑わしいです。私はいつもこのようになります。今日はなぜうまくいかないのですか。たくさんの答えを探した後、最初にページに入ったときに引き出しが閉じていることを知りました。その後、echartsはdomを取得しません。引き出しをクリックすると出てきます。その時、echartsが初期化されてデータが実行されるopenedイベントがあります。
<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)
}
}