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 统计图则添加了对应自适应代码配置