使echarts图表兼容ie浏览器

echarts 在谷歌浏览器中可以所向披靡,丝毫不会出现因兼容性问题出现图像不显示的结果。而在ie中似乎却不太混得开。

最近在做各种图表的展示,引入了资源echarts.js
谷歌中正常显示,而在ie中却出现了如下问题:
初始化的时候图表不显示,在F12开启的情况下 刷新页面,图表正常显示,经过调试发现 echarts.init(document.getElementById(‘firstEchart_left’));
这句代码没有执行。但是也不报错。苦思不得其解,网上搜寻了各种方式调试兼容性,比如:
1:通过 以谷歌内核渲染ie
2:模拟IE7进行渲染
但都不能解决问题。
最后查询echarts官方网站,发现了一个ecahrts简装包 echarts.common.min.js。

!function(t,e){“object”==typeof exports&&”object”==typeof module?module.exports=e():”function”==typeof define&&define.amd?define([],e):”object”==typeof exports?exports.echarts=e():t.echarts=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p=”“,e(0)}([function(t,e,n){t.exports=n(2),n(108),n(102),n(112),n(191),n(207),n(232),n(55),n(209),n(208),n(223),n(216),n(215),n(214),n(197),n(224),n(240)},function(t,e){function n(t){if(null==t||”object”!=typeof t)return t;var e=t,i=R.call(t);if(“[object Array]”===i){e=[];for(var r=0,o=t.length;r

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据ECharts官网的文档,ECharts 4.0及以上版本不再支持IE8及以下版本浏览器,但是可以通过引入兼容库来支持IE8。而ECharts Rich是ECharts的一个扩展,提供了更加丰富的图表展示效果,但是需要使用ECharts 4.0及以上版本。因此,如果要在IE8中使用ECharts Rich,需要使用ECharts 4.0及以上版本,并引入兼容库。 以下是在IE8中使用ECharts Rich的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts Rich Demo</title> <!-- 引入ECharts --> <!--[if lte IE 8]> <script src="https://cdn.bootcss.com/es5-shim/4.5.9/es5-shim.min.js"></script> <script src="https://cdn.bootcss.com/es5-shim/4.5.9/es5-sham.min.js"></script> <![endif]--> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/dataTool.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/bmap.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/liquidfill.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/map.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/wordCloud.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/graphic.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/tooltip.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/title.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/markLine.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/markPoint.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/dataZoom.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/visualMap.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/calendar.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/gauge.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/radar.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/sankey.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/treemap.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/parallel.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/funnel.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/boxplot.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/candlestick.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/effectScatter.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/lines.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/heatmap.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/pictorialBar.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/themeRiver.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/sunburst.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/extension/custom.min.js"></script> </head> <body> <!-- 容器 --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts Rich Demo' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值