asp.net 呼叫echarts顯示圖表控制元件隨瀏覽器自適應解決方案
阿新 • • 發佈:2019-01-05
1、問題來源
我們在asp.net開發中常使用到frameset的框架結構,比如上左中右方式,在中間部分是一個可以控制左側部分顯示隱藏的功能,這時右邊內容區域如果有使用echarts進行圖表顯示時,就會出現不能隨瀏覽器自適應,我們該如何做呢?
2、解決方法
需要在生成圖表的js方法中增加一個定時器,當瀏覽器視窗發生大小改變時,觸發chart圖表控制元件同時改變大小,核心程式碼如下:
setTimeout(function () {
window.onresize = function () {
myChart.resize();
}
}, 200);
全部程式碼類似如下:(這裡myChart是定義圖表的名稱,我們要使用到)
3、實際效果圖<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>
===========================================================================
如果覺得對您有幫助,微信掃一掃支援一下: