本文同步发表于个人的CSDN博客
echarts5以上的版本,echarts容器支持直接设定百分比宽高,但是仍然会有低版本的一个问题,就是浏览器尺寸变动的时候,echarts容器不会响应式的变化。
为了解决这个问题,有了如下解决方案:
- 首先echarts容器外要放置一个父元素
<div ref="ct" style="height: 100%; width: 100%">
<div ref="charts" style="height: 100%; width: 100%"></div>
</div>
其中父元素一定要使用行内样式的方式设定宽高。
-
重新刷新尺寸的工具函数:
/** *@description 为图表计算高度 *@param container 父容器 *@param charts echarts对象 *@param offsetX 横轴偏移,可不填,默认50px *@param offsetY 纵轴偏移,可不填,默认70px */ export function chartssize(container, charts, offsetX =50 , offsetY = 70) { function getStyle(el) { if (window.getComputedStyle) { const doc = window.getComputedStyle(el); const height = parseInt(doc.height); const width = parseInt(doc.width); return {height, width}; } else { return {height: container.clientHeight, width:container.clientWidth}; } } const {height, width} = getStyle(container, null) charts.resize({width: parseInt(width - offsetX), height: parseInt(height - offsetY)}) }
-
以VUE为例:
使用:
import * as echarts from "echarts"; import { option } from "./config.js"; import { chartssize } from "@/utils/resize"; export default { data() { return { charts: {}, }; }, created() { this.$nextTick(() => { this.echartsinit(); }); }, mounted() { const ct = this.$refs["ct"]; window.addEventListener("resize", () => { chartssize(ct, this.charts, 0, 0); }); // window.onresize = () => { // const ct = this.$refs["ct"]; // chartssize(ct, this.areaLine, 0, 0); // }; }, methods: { echartsinit() { if (process.client) { this.charts = echarts.init(this.$refs["charts"]); this.charts.setOption(option); } }, }, };
==注意==:mounted里的方法为重新设置echarts容器的方法。实际上就是监听窗口的resize事件,在这里有两种方式监听resize事件。一种是重写
window.onresize
,但是使用这种方式会有一个问题,如果同一个页面内有多个echarts图表,那么只有最后一个被渲染的才会生效。这个时候只要使用window.addEventListener
的方式即可解决
函数节流
在处理echarts图表的时候,往往需要使用window.onresize
来监听页面大小,从而进一步去改变echarts的大小,但是resize
事件触发的频率极其频繁,如果页面的echarts图表又很多,这无疑是一件十分灾难的事情。
首先定义一个节流函数,需要接收一个函数,并且返回一个函数,示例如下:
throttle = (fn) => {
let timer;
return function () {
console.log("执行次数");
if (timer) {
return;
}
timer = setTimeout(() => {
fn();
clearTimeout(timer);
timer = null;
}, 2000);
};
};
原理很简单,就是使用setTimeout
延迟执行,如果尚未执行完毕,则直接返回。
应用如下:
window.onresize = this.throttle(function () {
console.log(new Date().toLocaleTimeString());
});
效果还是很明显的:
浏览器日志
网友评论