echart自适应宽度的两种方法实例
作者：假装是个web狗
最近工作中element后台管理使用Echarts图表,在使用过程中也遇到了些问题,下面这篇文章主要给大家介绍了关于echart自适应宽度的两种方法,需要的朋友可以参考下
1.一个页面多个图表的自适应宽度可以用
注意：应写在多个图表的后面，不能一个一个写，会发生错误
//根据窗口的大小变动图表
window.onresize = function(){
myChart.resize();
myChart1.resize(); //若有多个图表变动，可多写
}2.若是一个页面的多个图表需要分别监听改变宽度的话用（可以一个一个写）
window.addEventListener("resize",function(){
myChart.resize();
});3.若是要自适应高度和宽度的话
- 首先你的初始div 必须有初始的高度和宽度（因为echart绘制需要宽和高）
- 需要写一个JavaScript方法去获取你当前div 的高度和宽度；
- 然后通过监听事件去监听你当前高度和宽度的变化
例如：
// es5
function fn(){//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
//var height=$("#divID").height()
//或
var height=document.getElementById("divID").offsetHeight
var width=document.getElementById("divID").offsetWidth
};
fn ();//设置容器高宽
//窗口大小发生了变化，代码：
//方法1
window.onresize = function () {//用于使chart自适的方法
fn ();//重置容器高宽
myChart.resize();
}
//方法2
window.addEventListener("resize",function(){ //监听
fn ();//重置容器高宽
myChart.resize();
})附：echart多图表切换时图表宽度变成100px，而不是100%
现页面中有如下图表需要显示
现我希望页面在进行缩放的时候，图表大小也跟着变。首先想到的就是宽度设置为100%，但是当我在“总计”，“加分”，“扣分”之前切换时，发现图表宽度变成了100px（如果你设置的宽度是固定大小的，比如500px，那就不会有这个问题），这是echart本身的原因。那么如何解决图表自适应问题呢，现在有如下代码（只展示了主要的部分代码）
<!--图表容器-->
<div class="tab-pane active" id="total">
<!-- 总计容器 -->
<div id="total_chart" style="width: 100%;height:518px;"></div>
</div>
<div class="tab-pane" id="add">
<!-- 加分容器 -->
<div id="add_chart" style="width: 100%;height:518px;"></div>
</div>
<div class="tab-pane" id="deduction">
<!-- 扣分容器 -->
<div id="deduction_chart" style="width: 100%;height:518px;"></div>
</div>
<script>
$.get('请求的url', function (response) {
var total_id = "total_chart";
var add_id = "add_chart";
var deduction_id = "deduction_chart";
// 总计表
chart(total_id);
// 加分表
chart(add_id);
// 扣分表
chart(deduction_id);
}, 'json')
function chart(chart_id) {
var myChart = echarts.init(document.getElementById(chart_id));
var myOption;
// 省略大部分代码
// 使用制定的配置项和数据显示图表
myChart.setOption(myOption);
// 监听点击事件
window.addEventListener("click", function () {
myChart.resize();
});
// 监听浏览器页面缩放事件
window.addEventListener("resize", function () {
myChart.resize();
});
}
</script>
echart中的chart.resize()就可以实现，所以我们需要做的就是如何在页面进行缩放或者切换tab时，触发这个resize()操作呢？注意上面代码中的两个事件监听。
第一个是监听点击操作。只要你切换页面中的“总计”，“加分”，“扣分”，那么就会触发myChart.resize()，这样图表的大小就会发生改变，因为我们设置width是100%，所以它就会根据当前图表容器来进行变化。
第二个是页面缩放事件，道理和点击是一样的。建议两个都写，这样无论是你切换tab，还是页面缩放，图表大小都会跟着变化的。
总结
到此这篇关于echart自适应宽度的文章就介绍到这了,更多相关echart自适应宽度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！