ie10下绘制的echarts Tree图只显示树干未显示节点问题

绘制的tree类型的图在谷歌浏览器下显示正常:

 但是在ie下绘制出错:

 

代码如下:

        series: [
          {
            type: "tree",
            top: 0,
            bottom: 0,
            left: 150,
            right: 350,
            layout: "orthogonal",
            edgeShape: "polyline",
            edgeForkPosition: "20%",
            expandAndCollapse: true,
            // 可支持的树状层级
            initialTreeDepth: 14,
            // symbol: "image://../../../images/tree.png",
            // symbolSize: 14,
            lineStyle: {
              color: "#000",
            },
            label: {
              position: "left",
              align: "right",
              overflow: "breakAll",
              formatter: function (params) {
                var val;
                val = params.name;
                var pattern = new RegExp("[\u4E00-\u9FA5]+");
                // 中文截6个字符,英文截12个字符
                if (pattern.test(val)) {
                  val = val.length >= 6 ? val.slice(0, 6) + "..." : val;
                } else {
                  val = val.length >= 12 ? val.slice(0, 12) + "..." : val;
                }
                if (params.data.index === 0) {
                  return "{a|" + val + "}";
                } else if (params.data.index === -1) {
                  return;
                } else {
                  return "{e|" + val + "}";
                }
              },
              rich: {
                a: {
                  width: 100,
                  align: "center",
                  color: "#FF0000",
                  fontSize: "16",
                  padding: [10, 10, 10, 10],
                  backgroundColor: "#fff",
                  borderColor: "#000",
                  borderWidth: 1,
                  borderRadius: 4,
                },
                e: {
                  color: "#000",
                  fontSize: "14",
                  padding: [10, 10, 10, 10],
                  backgroundColor: "#fff",
                  borderColor: "#000",
                  borderWidth: 1,
                  borderRadius: 4,
                },
              },
            },
            leaves: {
              // 最后一级的文字样式
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left",
                overflow: "breakAll",
                color: "#333",
                fontSize: "14",
                lineHeight: "18",
              },
              lineStyle: {
                width: 1.5,
              },
              symbol: "none",
            },
            emphasis: {
              label: {
                fontWeight: "bold",
              },
            },
            data: this.treeChartData,
          },
        ],

一开始是以为formatter中使用了rich属性返回模板字符串导致的,测试后排除这个原因。

后仔细看配置项中有两项symbol: "image://../../../images/tree.png",symbolSize: 14,这个属性,就怀疑是不是因为symbol关键字导致的(symbol是es6新增的数据类型),将这两属性去掉后ie下绘图正常了。。。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值