Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[gauge]图表在IE11下的问题 #1130

Closed
pc61551 opened this issue Jan 8, 2015 · 3 comments
Closed

[gauge]图表在IE11下的问题 #1130

pc61551 opened this issue Jan 8, 2015 · 3 comments

Comments

@pc61551
Copy link

pc61551 commented Jan 8, 2015

你们好：

  我在应用仪表盘组件中发现了一个奇怪的问题。

  背景说明：我开发了一个KPI页面，然后这个页面中大约需要加载显示六七十个仪表盘。我在火狐跟IE10下边测试都是正常显示。但是在IE11下测试发现有一部分仪表盘未能加载显示。

   DEMO页面源码如下：

   <!DOCTYPE html>
<title>test</title> <script type="text/javascript" src="js/echarts.js"></script> <style> .chart{ width:300px; height:300px; float:left; } </style> 
<script type="text/javascript">
    require.config({
        paths: {
            echarts: 'js'
        }
    });
    require(
        [
            'echarts',
            'echarts/chart/gauge'
        ],
        function (ec) {
            for (var i = 1; i < 101; i++) {
                var chart = ec.init(document.getElementById('Div' + i + ''));
                var option = {
                    "animation": false,
                    "series": [
                                    {
                                        "name": "chart",
                                        "type": "gauge",
                                        "min": 0,
                                        "max": 200,
                                        "splitNumber": 10,
                                        "axisLine": {
                                            "lineStyle": {
                                                "color": "auto",
                                                "width": 8
                                            }
                                        },
                                        "axisTick": {
                                            "splitNumber": 10,
                                            "length": 12,
                                            "lineStyle": {
                                                "color": "auto"
                                            }
                                        },
                                        "axisLabel": {
                                            "textStyle": {
                                                "color": "auto"
                                            }
                                        },
                                        "splitLine": {
                                            "show": true,
                                            "length": 16,
                                            "lineStyle": {
                                                "color": "auto"
                                            }
                                        },
                                        "pointer": {
                                            "width": 5
                                        },
                                        "detail": {
                                            "formatter": i,
                                            "offsetCenter": [0, "50%"],
                                            "textStyle": {
                                                "color": "blue",
                                                "fontWeight": "bolder",
                                                "fontSize": 30
                                            }
                                        },
                                        "data": [{ "value": i, "name": ""}]
                                    }
                                ]
                };
                                chart.setOption(option);
            }
        }
    );
</script>

在火狐下的显示效果：
default

在IE10下也是显示正常：
ie10

在IE11默认情况下，显示到【36】后，下边的仪表盘就没能正常加载：
ie11

但是奇怪的是，在IE11下边，按F12打开开发工具后，重新刷新页面，后面的仪表盘有能正常显示了：
ie11_2

我有怀疑过是不是echarts.js里边的console对象判断的问题，但是我全部注释了console后重新测试，发现问题还是存在。

谢谢！
@kener
Copy link
Contributor

kener commented Jan 8, 2015

IE11做了些“性能优化”，他有时候会直接跳过了“远离”可视区域的canvas渲染，我只能这样描述，我也确实碰到过。so，建议滚动时触发当前视区内图表更新（resize或refresh啥的），要不就是分页显示不要太过“远离”

@pc61551
Copy link
Author

pc61551 commented Jan 8, 2015

好的。。我试试。。谢谢解答！

@pc61551
Copy link
Author

pc61551 commented Jan 8, 2015

你好：

   但我在Demo页面做了修改，缩小了仪表盘的尺寸。让所有的仪表盘都在同一页面上显示。可是在IE11上。还是会在【36】这边停了：

​谢谢！

在 2015年1月8日 下午3:56，linfeng notifications@github.com写道：

IE11做了些“性能优化”，他有时候会直接跳过了“远离”可视区域的canvas渲染，我只能这样描述，我也确实碰到过。so，建议滚动时触发当前视区内图表更新（resize或refresh啥的），要不就是分页显示不要太过“远离”

—
Reply to this email directly or view it on GitHub
#1130 (comment).

@kener kener closed this as completed in bfa7ddd Jan 9, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kener @pc61551