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>