Vue中实现echarts图形大小自适应
Vue中实现echarts图形大小自适应一、设置div二、设置挂起三.效果如下总结一、设置div宽度不要写死,写成百分比:<template><div id="chart" style="width: 50%; height: 400px"></div></template>二、设置挂起设置mounted()以实现根据窗口大小自适应:mounted(
·
一、设置div
宽度不要写死,写成百分比:
<template>
<div id="chart" style="width: 50%; height: 400px">
</div>
</template>
二、设置挂起
设置mounted()以实现根据窗口大小自适应:
mounted() {
let _this = this;
window.onresize = function () {
_this.chart.resize();
};
}
三.效果如下
echarts图形随窗口大小改变


总结
在已有vue中已实现的echarts中,设置div宽度为百分比,设置挂起实现动态自适应宽度。
本文是本人第一篇博客,用以分享自己学习开发的经验以及记录,如有错误,还请指正。
更多推荐



所有评论(0)