实现这个效果之前我们先来看一个onresize事件
onresize 事件会在窗口或框架被调整大小时发生。
-
拓展下
当浏览器窗口大小改变的时候将会触发onresize事件。window.onresize(function(){ //code })
接下来，我们直接上代码
<template>
<div
class = "test_box"
id = "main"
style = "width:80%;height:80%;"
>Test page</div>
</template>
<script>
export default {
name: "test",
data() {
return {};
},
mounted() {
this.drawBar();
},
methods: {
drawBar: function() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("main"));
let option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
yAxis: {
type: "value"
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar"
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
// 当窗口或者大小发生改变时执行resize，重新绘制图表
window.onresize = myChart.resize;
}
}
};
</script>
<style scoped>
.test_box {
background-color: #beb9b9;
margin : 10px auto;
}
</style>
重点是window.onresize
这个是在vue的一个组件中实现的，窗口大小发生改变的时候，承载图表的盒子也会发生变化，从而触发onresize事件。
这里卿洋
愿喜❤️
