绘制的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下绘图正常了。。。。。