echarts 统计图自适应的核心配置
实现原理:
在浏览器窗口变化时调用 Echarts 提供的resize
方法,该方法的描述是:改变图表尺寸,在容器大小发生改变时需要手动调用。这就需要你的外部容器也是自适应的。
配置方法:
在 echarts 的 js 代码中前半部分加上宽高处理
// 基于准备好的dom,初始化echarts图表
var myChart = document.getElementById('${id}');
//自适应宽高,这里配置宽度和高度
var myChartContainer = function () {
myChart.style.width = document.body.clientWidth*0.5+'px';
myChart.style.height = document.body.clientHeight*0.5+'px';
alert(myChart.style.width );
};
myChartContainer();
var myChart = ec.init(myChart);
最后加上 resize() 方法的调用:
//浏览器大小改变时重置大小
window.onresize = function () {
myChartContainer();
myChart.resize();
};
附完整示例:
echarts.zip
showReport.jsp 中通过 js 实现了报表的宽高自适应,而对应 rpx 中的 echarts 统计图则添加了对应自适应代码配置