echarts图表在ie8上不显示的解决办法

我页面上的写法如下

首先引入需要的css和js文件

 <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
 <script src="js/echarts.js" language="javascript" type="text/javascript"></script>

<script src="js/jquery.min.js" language="JavaScript" type="text/javascript"></script>  
 <script src="js/bootstrap.min.js" language="javascript" type="text/javascript"></script>  
<script>

                var myChart = echarts.init(document.getElementById("Lb"));
             var option = {
               /* title:{
               text:"统计表",
               }, */
              grid: {
                  show:true,
                  left: "10%",
                  top: "10%",
                  right: "5%",
                  bottom: "10%"
                },
               tooltip:{
                 tigger:'axis',
                 axisPointer:{
                   type:'shadow'
                 }
               },
               /* legend:{
                 data:['AA','BB','CC','DD']
               }, */
               toolbox:{
                 show:'vertical',
                 x:'right',
                 y:'center',
                 
                /*  feature:{
                   mark:{show:true},
                   dataView:{show:true,readOnly:false},
                   magicType:{show:true, type:['line','bar','stack','tiled']},
                   restore:{show:true},
                   saveAsImage:{show:true}
                 }  */
               },
               
               calculable:true,
               xAxis:[{
                type:"category",
                data:["迁入测试","省外测试","出生测试","死亡测试"]
                }],
                yAxis:[{
                  type:'value'
                }],
                series:[
                {
//                name:'AA',
                type:'bar',
                barWidth: 30,
                data:[5,6,12,20],
                itemStyle: {
              normal: {
                //这里是重点
                color: function(params) {
                  //注意,如果颜色太少的话,后面颜色不会自动循环,最好多定义几个颜色
                  var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
                  //给大于颜色数量的柱体添加循环颜色的判断
                  let lindex = params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                   lindex = params.dataIndex - colorList.length;
                  }
                  return colorList[lindex]
                      }
                   }    
                   },
                markLine:{
                 data:[
                   [
                   {
                   name:'两个坐标之间的标线',
                   coord:[10,10]
                   },
                   {
                    coord:[20,30]
                   }          
                   ],
                 ]
                }
                },
                ]
             };
         myChart.setOption(option);

</script>

这样写完,谷歌上可以正常显示,但是IE8上不显示。

在网上查了半天,有的说要加meta标签,有的说使用的echart版本对不上。

后面当拖动浏览器窗口时,未被渲染的图表就会被渲染,
于是一查代码发现window.resize绑了一个用来做图表自适应的,mycharts.resize方法。

抱着试一试的态度测了一下这个方法,没想到真的解决了这个问题

下贴方法,不保证非饼图能用,仅做参考和记录

 最终效果图如下所示:

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值