本文讲述了在项目中如何使用ECharts解决宽高自适应问题，包括使用$(window).height()获取浏览器高度、调整echarts DOM高度，并在窗口调整时动态调用resize方法。还介绍了在多个图表场景下，如何通过addEventListener监听resize事件以确保所有图表同步更新。
1.ECHARTS动态设置宽高RESIZE()
今天在项目中遇到了Echarts宽高自适应问题，几经波折终于把问题解决了，下面直接上代码：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// window.onresize = function () {
// myChart.resize();
// }
window.addEventListener("resize", function () {
height= $(window).height();//浏览器的高度
myChart.getDom().style.height = this.height+ "px";
myChart.resize();
});
其中如果不写一下代码会出现高度为“0”的问题，这问题困扰我很久。
height= $(window).height();//浏览器的高度
myChart.getDom().style.height = this.height+ "px";
当然也可以使用下面这种方法：
window.onresize = function () {
height= $(window).height();//浏览器的高度
myChart.getDom().style.height = this.height+ "px";
myChart.resize();
}
当页面有多个echarts时使用addEventListener，页面中有一个echarts使用onresize。最后贴一下我的完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>平整度PQI</title>
<link rel="stylesheet" href="../../js/layui/css/layui.css" />
<script type="text/javascript" src="../../js/echarts/echarts.min.js"></script>
<!-- <script type="text/javascript" src="../../js/hcharts/modules/exporting.js"></script> -->
<script type="text/javascript" src="../../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../../js/config.js"></script>
<script type="text/javascript" src="../../js/layui/layui.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<style type="text/css">
html,
body {
height: 94%;
}
body {
width: 96%;
margin-left: 2%;
}
.searchDiv {
width: 100%;
background: #fff;
border-radius: 6px;
margin-top: 10px;
padding-top: 5px;
padding-bottom: 13px;
position: relative;
box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
}
.chart_box{
width: 100%;
height: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="chart_box">
<div id="main" class="main"></div>
</div>
<script>
// 指定图表的配置项和数据
var timeData = [
['K0+000',92.01752395994401],['K0+100',94.41680058059887],['K0+200',94.51690258003522],
['K0+300',95.47765761019392],['K0+400',94.19067453695466],['K0+500',94.99757507671596],
['K0+600',95.35693076925763],['K0+700',93.92247663659853],['K0+800',93.71836575826592],
['K0+900',94.68277405922969],
['K1+000',92.56232552529856],['K1+100',93.72955245371271],
['K1+200',93.89243379737894],['K1+300',92.82839328035467],['K1+400',95.59801616751834],
['K1+500',94.51031719836116],['K1+600',94.3427163168764],['K1+700',95.57975693678478],
['K1+800',93.8493935850764],['K1+900',91.49034788231211],
['K2+000',93.83197677761953],
['K2+100',95.40819317211324],['K2+200',93.93025566074351],['K2+300',96.20912120728636],
['K2+400',91.26285809911494],['K2+500',94.48395299572667],['K2+600',94.17341073679233],
['K2+700',94.41414513382168],['K2+800',95.13962908136314],['K2+900',95.07437676398958],
['K3+000',88.22024909816928],
['K3+100',95.61276204679679],['K3+200',95.6856754966696],['K3+300',94.98373853770063],
['K3+400',94.56375026586436],['K3+500',90.22270205154712],['K3+600',94.39499037390935],
['K3+700',93.50129089894338],['K3+800',94.29612631237548],['K3+900',94.18655920063797],
['K4+000',94.81530813906906],
['K4+100',94.63179864256453],['K4+200',93.23563652516384],['K4+300',92.85775964545032],
['K4+400',95.33110738152101],['K4+500',95.15622593967682],['K4+600',93.11657865165435],
['K4+700',94.09980845847885],['K4+800',93.82440619288724],['K4+900',94.84988486262172],
['K5+000',92.32319480994794],
['K5+100',93.17158227207254],['K5+200',95.07229146493135],['K5+300',72.28460422334017],
['K5+400',96.70206967893753],['K5+500',87.15246171922549],['K5+600',63.087356003549985],
['K5+700',94.60821120400567],['K5+800',94.38448218384406]
];
var option = {
title: {
text: 'RQI'
},
tooltip: {
trigger: 'axis',
// formatter:function(timeData) {
// return timeData[1].toFixed(2);
// //或者是下面这种，效果是一样的
// //return datas.value.toFixed(2);
// }
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {onZero: true},
data: timeData.map(function (item) {
return item[0];
})
},
yAxis: {
splitLine: {
show: false
},
min:50
},
toolbox: {
left: 'center',
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
axisPointer: {
link: {xAxisIndex: 'all'}
},
dataZoom: [{
startValue: 'K0',
}, {
type: 'inside'
}],
visualMap: {
top: 10,
right: 10,
//可以使用 lt（小于，little than），gt（大于，greater than），
//lte（小于等于 lettle than or equals），gte（大于等于，greater than or equals）
//来表达边界：
pieces: [{
lt: 60,
color: '#096'
}, {
gte: 60,
lt: 70,
color: '#ffde33'
}, {
gte: 70,
lt: 80,
color: '#ff9933'
}, {
gte: 80,
lt: 90,
color: '#cc0033'
}, {
gte: 90,
// lte: 300,
color: '#660099'
},
// {
// gt: 300,
// color: '#7e0023'
// }
],
outOfRange: {
color: '#999'
}
},
series: {
name: 'RQI',
type: 'line',
data: timeData.map(function (item) {
return item[1];
}),
markLine: {
silent: true,
data: [{
yAxis: 60
}, {
yAxis: 70
}, {
yAxis: 80
}, {
yAxis: 90
}]
}
}
};
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("main"));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize = function () {
height= $(window).height();//浏览器的高度
myChart.getDom().style.height = this.height+ "px";
myChart.resize();
}
// window.addEventListener("resize", function () {
// height= $(window).height();//浏览器的高度
// myChart.getDom().style.height = this.height+ "px";
// myChart.resize();
// });
</script>
</body>
</html>
onresize 事件
定义和用法
onresize 事件会在窗口或框架被调整大小时发生。
语法
onresize="SomeJavaScriptCode"
| 参数 | 描述 |
|---|---|
| SomeJavaScriptCode | 必需。规定该事件发生时执行的 JavaScript。 |
支持该事件的 HTML 标签
<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>,
<dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1> to <h6>,
<hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>,
<pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>,
<textarea>, <tt>, <ul>, <var>
支持该事件的 JavaScript 对象
window
2.解决Echarts自适应：
mounted() {
window.onresize = () => {
// 根据窗口大小调整曲线大小
this.myChart1.resize();
this.myChart2.resize();
this.myChart3.resize();
this.myChart4.resize();
};
},
可能出现的问题：三个echarts图表,明明宽度设置的都是100%，却只有第一个生效以及如何实现自适应
解决办法
1.初始化时需要加上，确保操作的是最新的DOM
this.$nextTick(_ => {
});
2.echarts图表自适应实现，需要在渲染图表后加上
// 监听窗口变化 - 只刷新最后一个图表
window.onresize = function(){
myEcharts1 = resize();
}
//or
window.onresize = ()=> {
this.pieEcharts.resize();
}
// 监听窗口变化 - 多个图表同时刷新
window.addEventListener("resize", function() {
myChart.resize();
});
addEventListener
addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。
您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。
您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。
addEventListener()方法可以更容易地控制事件对冒泡的反应。
使用addEventListener()方法时，JavaScript与HTML标记分离，以提高可读性，
并允许您添加事件侦听器，即使您不控制HTML标记也是如此。
您可以使用removeEventListener()方法轻松删除事件侦听器。
语法：element.addEventListener(event, function, useCapture);
第一个参数 是事件的类型（如“ click”或“ mousedown”）。
第二个参数 是我们想要在事件发生时调用的函数。
第三个参数 是一个布尔值，指定是使用事件冒泡还是事件捕获。此参数是可选的。
请注意，您不要为事件使用“on”前缀; 用“ click”而不是“ onclick”。
document.getElementById("myBtn").addEventListener("click", displayDate);
将许多事件处理程序添加到同一元素
addEventListener()方法允许您向同一元素添加许多事件，而不会覆盖现有事件
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseover", myFunction);
element.addEventListener("mouseout", myThirdFunction);
将事件处理程序添加到window对象
addEventListener()方法允许您在任何HTML DOM对象上添加事件侦听器，例如HTML元素，HTML文档，window对象或支持事件的其他对象，
如xmlHttpRequest对象。
添加在用户调整窗口大小时触发的事件侦听器：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
扫一扫
9112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
