1.窗口缩小放大的时候，图表的大小自适应

宽非固定的
使用resize

windouw.addEventListener("resize",()=>{myEchart.resize()
})

2.侧边栏收缩的时候，图表的大小自适应

侧边栏收缩的时候

侧边栏展开的时候,内容显示不全

2.1 监听侧边栏的收缩

 watch: {"$store.state.collapse"(val) {console.log(val)setTimeout(() => {// myChart.resize() //echarts得重绘方法this.myChart1.resize()}, 300);},},

2.1.1 这里为什么加了个定时器，时间为什么是300s

因为elementUI的侧边栏收缩展开的延时时间是300

具体看官方文档

elementUI-navMenu侧边栏

3.实际使用

<template><div style="padding:20px;"><el-card><el-tabs type="border-card" v-model="tabName" @tab-click="handleClick"><el-tab-pane label="用户管理" name="用户管理"><div class="echart-top"><div id="echart1" style="width:100%;height:100%;"></div><div id="echart2" style="width:100%;height:100%;"></div></div></el-tab-pane><el-tab-pane label="配置管理" name="配置管理"><div class="echart-top"><div id="echart3" style="width:100%;height:100%;"></div><div id="echart4" style="width:100%;height:100%;"></div></div></el-tab-pane></el-tabs></el-card></div>
</template><script>
export default {name: "",data() {return {tabName: "配置管理",myChart1: "",myChart2: "",myChart3: "",myChart4: "",};},mounted() {this.init();},watch: {"$store.state.collapse"(val) {console.log(val)setTimeout(() => {//echarts得重绘方法this.myChart1.resize()this.myChart2.resize()this.myChart3.resize()this.myChart4.resize()}, 300);},},methods: {init() {this.getEchart1();this.getEchart2();this.getEchart3();this.getEchart4();},handleClick(value) {console.log("value", value);if (value.name === "用户管理") {this.getEchart1();this.getEchart2();} else {this.getEchart3();}},getEchart1() {this.$nextTick(() => {this.$echarts.init(document.getElementById("echart1")).dispose();this.myChart1 = this.$echarts.init(document.getElementById("echart1"));let option = {legend: {top: "bottom",},toolbox: {show: true,feature: {mark: { show: true },dataView: { show: true, readOnly: false },restore: { show: true },saveAsImage: { show: true },},},series: [{name: "面积模式",type: "pie",radius: [50, 250],center: ["50%", "50%"],roseType: "area",itemStyle: {borderRadius: 8,},data: [{ value: 40, name: "rose 1" },{ value: 38, name: "rose 2" },{ value: 32, name: "rose 3" },{ value: 30, name: "rose 4" },{ value: 28, name: "rose 5" },{ value: 26, name: "rose 6" },{ value: 22, name: "rose 7" },{ value: 18, name: "rose 8" },],},],};this.myChart1.setOption(option);window.addEventListener("resize", () => {this.myChart1.resize();});});},getEchart2() {this.$nextTick(() => {this.$echarts.init(document.getElementById("echart2")).dispose();this.myChart2 = this.$echarts.init(document.getElementById("echart2"));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",showBackground: true,backgroundStyle: {color: "rgba(180, 180, 180, 0.2)",},},],};this.myChart2.setOption(option);window.addEventListener("resize", () => {this.myChart2.resize();});});},getEchart3() {this.$nextTick(() => {this.$echarts.init(document.getElementById("echart3")).dispose();this.myChart3 = this.$echarts.init(document.getElementById("echart3"));let option = {xAxis: {type: "category",boundaryGap: false,data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},yAxis: {type: "value",},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: "line",areaStyle: {},},],};this.myChart3.setOption(option);window.addEventListener("resize", () => {this.myChart3.resize();});});},getEchart4() {this.$nextTick(() => {this.$echarts.init(document.getElementById("echart4")).dispose();this.myChart4 = this.$echarts.init(document.getElementById("echart4"));let option = {xAxis: {},yAxis: {},series: [{data: [[10, 40],[50, 100],[40, 20],],type: "line",},],};this.myChart4.setOption(option);window.addEventListener("resize", () => {this.myChart4.resize();});});},},
};
</script><style scoped>
.echart-top {display: flex;justify-content: space-between;width: 100%;height: 500px;
}
</style>

2.窗口大小改变和侧边栏收缩的时候，echarts图表的自适应相关推荐

Echarts图表大小自适应浏览器窗口大小
1.mixins文件:resize.js // 当调整浏览器窗口大小时,发生 resize 事件:监听resize,实现Echarts图表大小自适应浏览器窗口大小 export default {da ...
【Java】监听jframe窗口大小改变函数：addComponentListener
问题描述:主要用于解决Jframe窗口大小变化时,里面的组件的位置也会自适应的移动. 相当于js里面的窗口大小改变监听函数: window.onresize = function(){//js脚本接口 ...
jquery监听窗口大小改变事件jquery.resizeend
方法一: $(function(){// Bind the resize event. When any test element's size changes, update its// corre ...
vue使用Echart跟随窗口大小改变而重新绘制时出现读取窗口大小不及时的问题
通过原生自带的window.onresize监听窗口大小 + Echart自带的冲渲染函数.resize() 刚开始我改变大小时感觉挺好但是我一点窗口最大化就开始出现问题他没有时时根据窗口大小改 ...
窗口大小改变时，显示内容的处理(正投影情况)
当窗口大小改变时,对窗口显示内容不同的要求,我们要做的工作也不同. 1.显示内容不变,相对位置不变(例如始终居中) 视口大小不变,裁剪区域不变,视口的初始位置根据窗口大小进行调整. 2.显示内容长宽比 ...
当浏览器窗口大小改变时，设置显示内容的高度
1 window.οnlοad=function(){ 2 changeDivHeight(); 3 } 4 //当浏览器窗口大小改变时,设置显示内容的高度 5 window.οnresize=fun ...
MFC如何让背景图随窗口大小改变
==> 学习汇总(持续更新) ==> 从零搭建后端基础设施系列(一)-- 背景介绍刚开始做的时候,我理所当然的想,直接在OnPaint函数中改变图片的大小,但是发现,这样会导致图片出现如 ...
layui隐藏侧边栏_layui实现侧边栏收缩的方法
layui实现侧边栏收缩的方法:首先打开原生的左侧导航栏代码并进行修改:然后打开JavaScript代码文件:最后实现侧边栏收缩效果即可. 本教程操作环境:Windows7系统.layui2.4版,该 ...
echart vue 图表大小_vue中echarts图表大小适应窗口大小且不需要刷新案例
我就废话不多说了,大家还是直接看代码吧~ 内容如下: // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getEl ...

2.窗口大小改变和侧边栏收缩的时候，echarts图表的自适应

1.窗口缩小放大的时候，图表的大小自适应

2.侧边栏收缩的时候，图表的大小自适应

2.1 监听侧边栏的收缩

2.1.1 这里为什么加了个定时器，时间为什么是300s

3.实际使用

2.窗口大小改变和侧边栏收缩的时候，echarts图表的自适应相关推荐

最新文章

热门文章