IE8下 Echarts通过Tab切换ajax加载的形式 图表时会出现红色背景

memetoo 发布于 2014/01/13 20:07
阅读 3K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:

IE8下 Tab切换ajax加载图表时会出现红色背景

看起来似乎是canvas导致的,不知道有没有设置项可以去掉这个血腥的红色。

加载中
0
Kener-林峰
Kener-林峰
下个版本干掉excanvas里这个红色
0
Kener-林峰
Kener-林峰
不懂,如何复现?
memetoo
memetoo
我这边使用的是echarts-plain-map.js 然后用red作为关键字在里面搜到了r.style.backgroundColor="red"这句,然后我把这个改成了白色,似乎这个诡异的加载前的红色闪现就解决了。 不知道这句的含义是?是不是可以考虑升级时改成白色比较好?
0
memetoo
memetoo

看了下IE8下echarts生成的canvas

<canvas style="POSITION: absolute; WIDTH: 735px; HEIGHT: 367px; TOP: 0px; LEFT: 0px" width="735" height="367" data-id="1">
    <DIV style="POSITION: absolute; WIDTH: 735px; HEIGHT: 367px; OVERFLOW: hidden">
    <g_vml_:shape style="POSITION: absolute; WIDTH: 10px; HEIGHT: 10px" coordsize = "100,100" filled = "f" stroked = "t" strokecolor = "#ccc" strokeweight = "1.5pt" path = " m500,3170 l6850,3170 e">
        <g_vml_:stroke opacity = "1" miterlimit = "10" joinstyle = "miter" endcap = "flat"></g_vml_:stroke>
    </g_vml_:shape>
    </DIV>
    <DIV style="POSITION: absolute; FILTER: alpha(opacity=0); BACKGROUND-COLOR: red; WIDTH: 735px; HEIGHT: 367px; OVERFLOW: hidden"></DIV>
</canvas>

会生成很多个这样的canvas元素,里面都有一个background-color为red的div

不知道这个有没有地方可以设置覆盖掉这个red?

这个是不是跟IE8依赖的excanvas有关?

0
Kener-林峰
Kener-林峰
恩,确实看到excanvas里的代码了,能告诉我怎么看到这个红色吗?我看看是否需要改掉
0
memetoo
memetoo

引用来自“Kener-林峰”的答案

恩,确实看到excanvas里的代码了,能告诉我怎么看到这个红色吗?我看看是否需要改掉
<div>
	<span class="tab">Switch Tab 1</span>
	<span class="tab">Switch Tab 2</span>
</div>

<div id="container">
</div>

<script type="text/javascript">
	$(document).ready(function(){
		$(".tab").each(function(){
			$(this).click(function(){
				$("#container").empty().append("<div id='main' style='height:530px;'></div>");
				var myChart = echarts.init( document.getElementById("main") );
				myChart.setOption(
			{
			    title : {
			        text: '某地区蒸发量和降水量',
			        subtext: '纯属虚构'
			    },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['蒸发量','降水量']
			    },
			    toolbox: {
			        show : true,
			        feature : {
			            mark : true,
			            dataView : {readOnly: false},
			            magicType:['line', 'bar'],
			            restore : true,
			            saveAsImage : true
			        }
			    },
			    calculable : true,
			    xAxis : [
			        {
			            type : 'category',
			            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value',
			            splitArea : {show : true}
			        }
			    ],
			    series : [
			        {
			            name:'蒸发量',
			            type:'bar',
			            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
			            markPoint : {
			                data : [
			                    {name : '年最高', value : 162.2, xAxis: '8月', yAxis: 163, symbolSize:18},
			                    {name : '年最低', value : 2.0, xAxis: '1月', yAxis: 3}
			                ]
			            }
			        },
			        {
			            name:'降水量',
			            type:'bar',
			            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
			            markPoint : {
			                data : [
			                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
			                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
			                ]
			            }
			        }
			    ]
			}
				);
			});
		});	
	});
</script>

↑↑↑简单写了下html结构及脚本实现

js引用:

<script type="text/javascript" src="./js/jquery-1.8.3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/echarts-plain-original-map.js" charset="utf-8"></script>

来回切换两个Tab时,在ie8下可以见到红色

具体效果我截了下屏:http://vdisk.weibo.com/lc/ljgkW31LeDr8bYWQ7 验证码:L8HK

ps:很疑惑的是 我直接写的html及上述js引用,在ie8下会报document.body为空或未定义这种错误 实在不明白原因 有感ie时代前端的生存环境是有多费解orz

0
Kener-林峰
Kener-林峰

奇怪,看到你的红色了,但我用自己的IE10切换的IE8模式下没发现,这种tab切换的使用太常见了,不应该有问题,你也是唯一一个反馈红色问题的人,你机器什么配置?我看excanvas,那是占位的dom不应该被看到。

另外,关于报错,用plain引入,把script标签放到body结束后就好了,看这例子源码

http://echarts.baidu.com/doc/example/www2/index.html

0
Kener-林峰
Kener-林峰
另外,你试试把 myChart弄成全局变量,在切换tab时初始化新的myChart前先dispose掉原来那个,避免可能造成对的内存泄漏和未被释放的事件绑定。这也是使用多实例类型的库时要注意的地方
Kener-林峰
Kener-林峰
回复 @memetoo : 没有,但dom容器不应该必须放body里吗?放别的地方浏览器怎么解释谁都不知道
memetoo
memetoo
非常感谢。 这边继续测试的时候在ipad上碰到了棘手的问题。 图表的tooltip效果,柱状图的click事件,在实际项目结构中,会失效。 比较诡异的是,把图表容器放在页面顶部(<body>标签下方),这些功能运转良好;放在某些区块之间,这些功能会部分失效(某些柱子点击事件失效);而且就算把页面所有css样式去掉,也是一样失效。 不知道有木有人反映过这个情况,目前完全费解中.......
返回顶部
顶部