インターネット上の多くの投稿はその考えに言及していませんでした。今日、同様の問題に対する根本的な解決策はVueだけではありません。
解決策：ページが再描画された後、描画コードが実行されます。vueでは、これに描画コードを入れることができます。$ nextTick
説明：
まず、ページのボタンをクリックして、ページ幅：80％、高さ：70％、およびechartを占めるボックスをポップアップします。内部の図はダイアログボックスの100％を占めています。100の比率が使用される理由については、もちろん、さまざまな解像度に適応するためです。以下に示すように：
コードは次のとおりです。
<template>
<div class="echartTest">
<Modal
v-model="modal1"
class-name="modal-wrap-cate"
footer-hide
:transfer="false">
<div ref="echart" class="echart-box"></div>
</Modal>
<Button type="primary" @click="drawEchart" >绘图</Button>
</div>
</template>
<script>
const echarts = require("echarts/lib/echarts"); // 引入 ECharts 主模块
require("echarts/lib/component/grid");
require("echarts/lib/chart/line");//引入折线
export default {
data(){
return{
modal1:false
}
},
methods:{
drawEchart(){
this.modal1=true
let myChart=echarts.init(this.$refs.echart)
let option = {
grid:{
left:50,
right:50,
top:50,
bottom:50
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
myChart.setOption(option)
}
}
}
</script>
<style lang="less">
.echartTest{
.modal-wrap-cate{
.ivu-modal{
width: 80% !important;
height:70% !important;
.ivu-modal-body {
padding: 54px 92px;
}
}
.ivu-modal-content {
width: 100%;
height: 100%;
.ivu-modal-body{
width: 100%;
height: 100%;
}
}
.echart-box{
width:100%;
height: 100%;
}
}
}
</style>
当然、効果はありません。ページ要素を見ると、100％に設定されたcanvas要素が実際には100pxになることがわかりました。これは、要素のサイズが見つからなかったため、基本的に合意された100pxのサイズを描画しました。次の図に示すように、
描画コードを$ nextTickに配置すると、コードは次のようになります。
<template>
<div class="echartTest">
<Modal
v-model="modal1"
class-name="modal-wrap-cate"
footer-hide
:transfer="false">
<div ref="echart" class="echart-box"></div>
</Modal>
<Button type="primary" @click="drawEchart" >绘图</Button>
</div>
</template>
<script>
const echarts = require("echarts/lib/echarts"); // 引入 ECharts 主模块
require("echarts/lib/component/grid");
require("echarts/lib/chart/line");//引入折线
export default {
data(){
return{
modal1:false
}
},
methods:{
drawEchart(){
this.modal1=true
this.$nextTick(()=>{
let myChart=echarts.init(this.$refs.echart)
let option = {
grid:{
left:50,
right:50,
top:50,
bottom:50
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
myChart.setOption(option)
})
}
}
}
</script>
<style lang="less">
.echartTest{
.modal-wrap-cate{
.ivu-modal{
width: 80% !important;
height:70% !important;
.ivu-modal-body {
padding: 54px 92px;
}
}
.ivu-modal-content {
width: 100%;
height: 100%;
.ivu-modal-body{
width: 100%;
height: 100%;
}
}
.echart-box{
width:100%;
height: 100%;
}
}
}
</style>
写真は次のとおりです。
ボタンをクリックすると、ボタンをトリガーするコード、ページのダイアログボックスがまだ表示されておらず、この時点で実際に描画が完了しています。したがって、表示される100pxは、実際にはダイアログボックスが表示される前に描画された画像です。this。$ nextTickは、ページがレンダリングされるまで待ってから実行します。つまり、ダイアログボックスが表示された後、echart要素のサイズが決まります。だから効果が出ます。