ECharts3 IE8渲染新数据时不在原位置渲染

发布于 2022-09-04 09:10:22 字数 2625 浏览 36 评论 0

1.ECharts3 IE8渲染新数据时不在原位置渲染,如图
2.
出现的BUG:
ECharts3 IE8 Bug

想要的效果:
图片描述
3.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .nj_zb{height:270px;}
    </style>
    <!--ECharts 3-->
    <script src="echarts.common.min.js"></script>
    <script>
        //    echarts绘画饼图
        function xrzh02(id,datas){
            var zh02_labels = new Array();
            var zh02_values = new Array();
            for(var key in datas){
                zh02_labels.push(key);
                zh02_values.push({value:datas[key][0],name:key,itemStyle:{normal:{color:datas[key][3]}}});
            }

            //渲染表格(想看明白请看ECharts 3.0官方api)
            var zh02_Chart = echarts.init(document.getElementById(id));
            zh02_option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{b} <br/>{a} : {d}%"
                },
                legend: {
                    x : 'center',
                    y : 'bottom',
                    data:zh02_labels
                },
                calculable : true,
                series : [

                    {
                        name:'占比',
                        type:'pie',
                        radius : [30, 110],
                        center : ['50%', '50%'],
                        roseType : 'area',
                        label:{normal:{formatter:"{b}\n{c}%",textStyle:{fontSize:16},show:true}},
                        data:zh02_values
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            zh02_Chart.setOption(zh02_option);
        }
    </script>
</head>
<body>
<div style="width:400px">
    <div class="nj_zb" id="notAvalon"></div>
    <button onclick="CMY.change()">点击我切换另一组数据</button>
</div>
<script>
    window.onload=function(){
        var Rows={
            "高一":[30],
            "高二":[5]
        };
        xrzh02("notAvalon",Rows);
    };

    //点击我切换另一组数据
    var CMY={};
    CMY.change=function(){
        var Rows2={
            "高一":[7],
            "高二":[8]
        };
        xrzh02("notAvalon",Rows2);
    };
</script>
</body>
</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

骄兵必败 2022-09-11 09:10:22

clipboard.png
IE8奇怪的bug..
先清空掉容器内容就好了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文