這邊就只放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,
},
],