最近项目要用到echarts画图，踩了个自适应的坑，vue+element项目中浏览器响应式，跟随浏览器缩放/放大缩小理

关键代码

window.addEventListener("resize", () => {
	if(myChart){
		myChart.resize()
	}
})

myChart.setOption({
	tooltip: {
		trigger: 'axis',
		axisPointer: { // 坐标轴指示器，坐标轴触发有效
			type: 'none' // 默认为直线，可选为：'line' | 'shadow'
		}
	},
	grid: {
		containLabel: true,
		left: "4%",
		right: "4%",
		bottom: "4%",
		top: "4%",
	},
	xAxis: {
		axisLabel: {
			color: '#8f95b2',
			fontSize: 14,
			interval: 0,
		},
		axisTick: {
			show: false,
		},
		splitLine: {
			show: false,
		},
		axisLine: {
			show: false,
		},
		data: ['一季度', '二季度', '三季度'],
		type: 'category',
	},
	yAxis: {
		axisLabel: {
			color: '#8f95b2',
			fontSize: 14,
		},
		axisTick: {
			show: false,
		},
		splitLine: {
			show: true,
			lineStyle: {
				color: '#f1f1f1'
			}
		},
		axisLine: {
			show: false,
		},
		name: '',
	},
	series: [{
			data: [353, 66, 112, 270, 315, 418, 500],
			type: 'bar',
			barMaxWidth: 'auto',
			barWidth: 16,
			itemStyle: {
				normal: {
					color: '#3c82fe',
					barBorderRadius: [4, 4, 4, 4],
				}
			},
			label: {
				show: false,
				// position: 'top',
				// distance: 10,
				// color: '#fff'
			},
		},
		{
			data: [241, 432, 342, 500, 500, 500, 500],
			type: 'bar',
			barMaxWidth: 'auto',
			barWidth: 16,
			itemStyle: {
				borderRadius: [4, 4, 4, 4],
				color: '#22ba7d',
			},
		},
	],
});
window.addEventListener("resize", () => {
	if(myChart){
		myChart.resize()
	}
})