1、问题来源

我们在asp.net开发中常使用到frameset的框架结构，比如上左中右方式，在中间部分是一个可以控制左侧部分显示隐藏的功能，这时右边内容区域如果有使用echarts进行图表显示时，就会出现不能随浏览器自适应，我们该如何做呢？

2、解决方法

需要在生成图表的js方法中增加一个定时器，当浏览器窗口发生大小改变时，触发chart图表控件同时改变大小，核心代码如下：

setTimeout(function () {
                 window.onresize = function () {
                           myChart.resize();
               }
       }, 200);

全部代码类似如下：（这里myChart是定义图表的名称，我们要使用到）

 <script type="text/javascript">function ShowMonthChart() {var myChart = echarts.init(document.getElementById('monthChart'));try {myChart.setOption({title: {text: '当年总用电走势图',x: 'center',textStyle: { fontWeight: 'normal' }},tooltip: {trigger: 'axis',formatter: function (a, b, c) {var result = "";result += a[0].name + '月: </br>';for (var i = 0; i < a.length; i++) {result += a[i].seriesName + ": " + a[i].value + '<%=EngeryUnit%>' + '</br>';}return result;},textStyle: {fontSize: 12}},legend: {data: ['去年总用电', '今年总用电'],y: 'bottom'},dataZoom: {show: false},grid: {x: 100,y: 30,x2: 30,y2: 60},toolbox: {show: true,feature: {magicType: { show: true, type: ['line', 'bar'] },restore: { show: false },saveAsImage: { show: true }}},xAxis: [{type: 'category',boundaryGap: false,data: [<%=xCategory%>],axisLabel: {formatter: '{value}月'}}],yAxis: [{type: 'value',axisLabel: {formatter: '{value}'},name: '单位：<%=EngeryUnit%>',nameLocation: 'end',nameTextStyle: {color: '#000000000'}}],series: [{name: '去年总用电',type: 'line',smooth: true,data: [<%=lastDataSeries%>]},{name: '今年总用电',type: 'line',smooth: true,data: [<%=curDataSeries%>]}]});}catch (e) {}//解决echarts图表不随浏览器缩放而自适应改变大小setTimeout(function () {window.onresize = function () {myChart.resize();}}, 200);}</script>

3、实际效果图

===========================================================================

如果觉得对您有帮助，微信扫一扫支持一下：