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、实际效果图

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

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