一、问题现象
二、解决后的现象
三、代码
注:关键代码点
window.addEventListener("resize", function () {
myChart.resize();
});
<template>
<div class="box">
<div
class="recentDocument"
id="recentDocument"
style="width: 100%; height: 100%"
></div>
<div
class="recentDocument2"
id="recentDocument2"
style="width: 100%; height: 100%"
></div>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {
getPie() {
const myChart = this.$echarts.init(
document.getElementById("recentDocument")
);
var option = {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
getPie2() {
const myChart = this.$echarts.init(
document.getElementById("recentDocument2")
);
var option = {
title: {
text: "ECharts 入门示例",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
},
mounted() {
this.getPie();
this.getPie2();
},
};
</script>
<style lang="less" scoped>
.box {
width: 100%;
height: 100%;
display: flex;
.recentDocument {
flex: 1;
}
.recentDocument2 {
flex: 1;
}
}
</style>