现在位置首页 / 前端开发 /正文

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

作者: IT小兵 | 2016年3月4日| 热度:℃ | 评论: |参与:

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




原文地址:http://blog.csdn.net/zdw_wym/article/details/49641429

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询