asp.net 呼叫echarts顯示圖表控制元件隨瀏覽器自適應解決方案

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、實際效果圖

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

如果覺得對您有幫助，微信掃一掃支援一下：