asp.net 调用echarts显示图表控件随浏览器自适应解决方案

转载 (原文地址) ziyingyewu 随笔 echarts 109阅读 2017-12-21 14:38:21 举报

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

2、解决方法
需要在生成图表的js方法中增加一个定时器,当浏览器窗口发生大小改变时,触发chart图表控件同时改变大小,核心代码如下:
setTimeout(function () {
window.onresize = function () {
myChart.resize();
}
}, 200);

全部代码类似如下:(这里myChart是定义图表的名称,我们要使用到)
[csharp] view plain copy
<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、实际效果图

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复