Echarts跟随容器自适应大小

Echarts跟随容器自适应大小

浏览器缩放，echarts图表大小可以随着浏览器窗口变化而改变。可以兼容各种分辨率。也可以获取echarts容器父级高度和宽度改变echarts图表的大小。

dom层放置一个echarts图表容器，

<template>
	<div ref="main_div" >
		<div id="ChartEcharts">div>
	div>
template>

JavaScript代码

mounted方法里监听页面变化的方法。geth方法是获取页面高度的方法。这里有一个递归调用。为啥递归调用呢？因为页面最开始加载echarts，echarts的容器还没准备好，echarts找不到容器。咱们就用递归算法什么时候有高度了宽度了就加载echarts,100毫秒调用一次。

	var ChartEcharts;
	export default {
  		data() {
			return {
				main_div_w: 0,
				main_div_h: 0
			}
		},
		methods: {
            initDoubleEncircle() {
				let that = this;
				//有的话就获取已有echarts实例的DOM节点。
				ChartEcharts= echarts.getInstanceByDom(document.getElementById('ChartEcharts')); 
				// 如果不存在，就进行初始化。
				if (ChartEcharts== null) {
					ChartEcharts= echarts.init(document.getElementById('ChartEcharts'));
				}
				// 根据你的业务自己设计图表
			    let option = {...}
				ChartEcharts.setOption(option)
			},
			get_echarts_h_w() {
				var that = this;
				that.$nextTick(function () {
					that.geth()
				})
			},
			geth() {
				let that = this;
				setTimeout(function () {
				// 获取浏览器窗口或者其他的容器都行的
				var docEl = document.documentElement;
					that.main_div_w = docEl.clientWidth; //that.$refs.main_div.offsetWidth
					that.main_div_h = docEl.clientHeight;//that.$refs.main_div.offsetHeight
					if (that.main_div_h < 10) {
						that.geth()
					} else {
						that.$nextTick(() => {
							that.initDoubleEncircle();
							ChartEcharts.resize({ width: (that.main_div_w * 0.3), height: (that.main_div_h * 0.1) });
						})
					}
				}, 100)
			},
		},
		mounted() {
			var that = this
			// 可以监听到浏览器窗口的变化 
			window.addEventListener('resize', function () {
				  that.get_echarts_h_w()
			});
		}
	}

本人爱分享。文章有不对的地方，联系我哦。