echarts树图的配置与叶子节点点击切换样式
这边就只放series里的代码了 大部分比较实用的功能都做了注释 具体可以参照官方文档
叶子节点点解切换的样式我个人也找了蛮久 害 echarts就是这样功能强大 但文档。。。。你懂的
现在来说一下具体怎么实现的吧
//叶子节点点击高亮方法
selectedMode: "single", //单选
select: {
label: {
formatter: function (params) {
if (params.data.levelNum == "3") {
return "{three|" + params.name + "}";
}
if (params.dataIndex == "3") {
return "{three|" + params.name + "}";
}
},
rich: {
//三级栏目样式
three: {
color: "#1186F8",
backgroundColor: "#fff",
borderColor: "#1584F7",
},
},
},
},
需要先添加selectedMode属性 可选为单选和多选
再加上选中后的样式
记住 这里我的label是用formater改过的 当然对应的select中的label也需要这样书写
在图表生成完之后再加上
myChart.dispatchAction({
type: "select",
dataIndex: 3,
});
这个是公用方法 type可以多种变化 包括它的参数 具体文档写的很清楚
戒骄戒躁 问题都会得到解决
series: [
{
type: "tree",
data: [data],
clickable: false, //关闭节点收缩
left: "6%",
right: "18%",
top: "15%",
bottom: "20%",
symbol: "emptyCircle",
// symbolSize: 30,
edgeShape: "polyline",
edgeForkPosition: "50%",
// initialTreeDepth: 3,
label: {
position: "bottom",
rotate: -90,
verticalAlign: "middle",
align: "right",
fontSize: 9,
},
//叶子节点点击高亮方法
selectedMode: "single", //单选
select: {
label: {
formatter: function (params) {
if (params.data.levelNum == "3") {
return "{three|" + params.name + "}";
}
if (params.dataIndex == "3") {
return "{three|" + params.name + "}";
}
},
rich: {
//三级栏目样式
three: {
color: "#1186F8",
backgroundColor: "#fff",
borderColor: "#1584F7",
},
},
},
},
lineStyle: {
width: 2,
},
selectedMode: true,
//名称字体样式
label: {
//根据level判断123级的样式
formatter: function (params) {
if (params.data.levelNum == "1") {
return "{one|" + params.name + "}";
} else if (params.data.levelNum == "2") {
return "{two|" + params.name + "}";
} else if (params.data.levelNum == "3") {
return "{three|" + params.name + "}";
}
},
rich: {
//一级栏目样式
one: {
align: "center",
color: "#fff",
position: "bottom",
lineHeight: 25,
width: 30,
padding: [10, 5, 10, 5],
backgroundColor: "#1385F8",
borderType: "solid",
borderColor: "#1385F8",
borderWidth: 1,
fontSize: 16,
},
//二级栏目样式
two: {
position: "inside",
align: "center",
color: "#1385F8",
width: 150,
// height: 50,
padding: [15, 5, 15, 5],
backgroundColor: "#D3E8F8",
borderType: "solid",
borderColor: "#D3E8F8",
borderWidth: 1,
fontSize: 16,
},
//三级栏目样式
three: {
align: "center",
color: "#999999",
width: 140,
height: 35,
backgroundColor: "#fff",
borderType: "solid",
borderColor: "#CCCCCC",
borderWidth: 1,
fontSize: 16,
},
four: {
align: "center",
width: 140,
height: 35,
borderType: "solid",
borderWidth: 1,
fontSize: 16,
color: "#1186F8",
backgroundColor: "#fff",
borderColor: "#1584F7",
},
},
},
expandAndCollapse: false,
animationDurationUpdate: 750,
},
],
