前言
网上找了好久资料，没有一个完整实例，所以研究出来立马发布，共享下，希望能帮助到大家。
一、实现效果
方式1：提供视频方式大家看下符不符合要求
方式2：Demo演示地址
点击此处，可查看演示地址 https://it__distant_branch.gitee.io/echarts-tree/
二、源码提供
免费下载源码地址，点击下载 https://download.csdn.net/download/Qin_HongKun/14935641
三、代码分享
HTML代码如下：
<title>Tree</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#echart-id {
width: 100%;
height: calc(100% - 85px);
padding: 20px;
background-color: #fbfbfb;
overflow: auto;
}
.search-con {
width: 70%;
margin: 0 auto;
text-align: center;
}
#tip-botton {
display: black;
position: absolute;
z-index: 999999999;
pointer-events: none;
}
.height-auto {
height: 100%;
}
.overflow-auto {
height: calc(100% - 45px);
overflow: auto;
overflow-x: hidden;
}
</style>
<body>
<div>
<input class="gxtb-echart-search-input" type="text" id="search-canves-input" name="title" required lay-verify="required" placeholder="请输入搜索内容" autocomplete="off" class="layui-input" style="width:calc(100% - 120px);display: inline-block;height:45px;border: 2px solid #06c;padding-left: 2px;">
<button onclick="searchCanves()" class="layui-btn" style="width:80px;height: 42px;">搜索</button>
</div>
<div class="overflow-auto">
<div id="echart-id">
</div>
</div>
</body>
<script src="./js/jquery.js"></script>
<script src="./echarts/echarts.js"></script>
<script src="./data/data.js"></script>JS代码如下：
<script>
//存储echart对象
$chart = ''
/**
* 判断是否存在值
* @param {Object} data
* @param {Object} value
*/
var is_exit_value = function(data, value) {
var is_exit = false
if ($.isArray(data)) {
$.each(data, function(index, item) {
if (item == value) {
is_exit = true
}
})
}
return is_exit
}
//获取子节点数量
var getEchartNotExpandCount = function(list, options, isjs) {
$.each(list, function(i, k) {
var flag = true;
$.each(options.data, function(i, kk) {
if (kk === k) {
flag = false;
}
})
if (flag && !isjs) {
options.lengthH++;
options.data.push(k)
}
if (k.children.length) {
getEchartNotExpandCount(k.children, options)
}
})
}
//获取某个节点父节点，一直递归获取
var getEchartParentNode = function(item, options) {
var flag = false;
options[item.dataIndex] = item
if (item.parentNode) {
getEchartParentNode(item.parentNode, options)
}
}
//根据某个echart节点中所唯一索引来获取某个节点
var getEchartNode = function(list, dataIndex, options) {
var flag = false;
$.each(list, function(i, k) {
if (flag)
return;
if (k.dataIndex == dataIndex) {
console.log(dataIndex, k)
options.data = k
flag = true;
return
} else if (k.children.length) {
getEchartNode(k.children, dataIndex, options)
}
})
}
//设置点击某个节点之后选中线条变色，其他节点线条变成未选中颜色
var setLineStyle = function(node) {
//获取当前点击的节点,用来获取当前节点下是否存在点击的索引 存在说明是父级，则更换颜色 否则正常颜色
var currentParentNode = {}
getEchartParentNode(currentNode, currentParentNode)
if (node.dataIndex in currentParentNode) {
node.data.lineStyle = {
color: '#ED143D',
borderColor: '#ED143D'
}
} else {
node.data.lineStyle = {
color: '#2979ff',
borderColor: '#2979ff'
}
}
}
/**
* 节点点击收缩或者放大之后，获取隐藏的节点数量跟所有节点的数量，从而实现自适应高度
* */
var resize = function() {
var id = document.getElementById('echart-id')
var elesArr = $chart._chartsViews[0]._data.tree._nodes
var options = {
lengthH: 0,
lengthZh: 0,
data: []
}
var lengthH = elesArr.length
var isTowExpand = false;
$.each(elesArr, function(i, i1) {
//获取点击的节点
if (i1.dataIndex == currentIndex) {
currentNode = i1
}
//获取未展开节点下的子节点数量
if (!i1.isExpand && i1.children.length) {
getEchartNotExpandCount([i1], options, true)
}
//获取所有二级节点，如果都未展示，指定固定宽度
if (i1.depth === 2 && i1.isExpand) {
console.log(i1)
isTowExpand = true;
}
if (i1.isExpand) {
}
})
//减去为展开节点数量
lengthH = lengthH - options.lengthH
var height = $(".overflow-auto").height(); // 这里限制最小高
var currentHeight = 35 * (lengthH - 1) || 200;
var newHeight = Math.max(currentHeight, height);
id.style.height = newHeight + 'px';
var paramOptions = {
width: $("#echart-id").width()
}
if (!isTowExpand) paramOptions = {
width: $("#echart-id").width() / 2 + "px"
}
$chart.resize(paramOptions);
}
//保存点击后的节点值
var currentIndex = ''
var currentNode = {}
//搜索后重新渲染echart
searchCanves = function() {
currentIndex = ''
$chart && $chart.showLoading();
//dataJson 从./data/data.js定义的
setChart(dataJson, [$(".gxtb-echart-search-input").val()])
}
var setChart = function(data, keywords) {
//echart对象存在则销毁，目的当请求后台之后，树的数据发生该百年，重新渲染树，否则会导致树的数据不正确
if ($chart) {
$chart.dispose();
}
$chart = echarts.init(document.getElementById('echart-id'));
//树的节点点击事件
$chart.on('click', function(params, params1) {
//获取当前节点唯一索引值
currentIndex = params.dataIndex
if (params.componentType === 'series') {
// 点击到了 series 上
if (!params.value) {
// 点击节点收缩放大之后，重新计算高度，实现自适应高度
resize()
}
}
//如果点击的是最后一级执行
if (!params.data.children) {
location.href = 'https://blog.csdn.net/Qin_HongKun?spm=1011.2124.3001.5343'
}
});
//初始化echart 参数
$chart.setOption(option = {
height: "100%",
backgroundColor: "#fbfbfb",
series: [{
//默认只展开两级，当有检索条件时全部展开
initialTreeDepth: $("#search-canves-input").val().trim() ? 4 : 1,
// 当此节点下还有子节点时候，设置的节点样式，用于区别 没有子节点的节点的样式
itemStyle: {
normal: {
color: '#06c',
borderColor: '#06c',
},
emphasis: {
borderColor: '#06c',
color: '#06c'
}
},
lineStyle: {
color: '#2979ff',
},
type: 'tree',
data: [data],
top: '1%',
left: '200px',
bottom: '1%',
right: '250px',
symbolSize: 18,
symbol: function(params, params1, params2) {
//点击之后 实现连接线变色
setLineStyle(params1)
//加号svg
var svgAdd = 'image://data:image/png;base64,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'
//减号svg
var svgD = 'image://data:image/png;base64,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'
//最后一级展示圆圈图标
if (!params1.data.children) {
return 'emptyCircle'
} else
if ($chart._chartsViews[0]._data) {
//此列表中可以获取节点是否展开
var treeList = $chart._chartsViews[0]._data.tree._nodes
//获取唯一索引
var dataIndex = params1.dataIndex;
//获取节点
var currentTreeNode = {}
getEchartNode(treeList, dataIndex, currentTreeNode)
console.log("currentTreeNode=>", currentTreeNode)
if (!currentTreeNode.data.isExpand && params1.data.children.length) {
return svgAdd
}
} else {
//节点没有展开，显示+号图标
if (params1.data.children.length) {
return svgAdd
}
}
return svgD
},
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
color: '#293c55',
margin: [2, 4],
borderWidth: 1,
borderColor: '#aaa',
backgroundColor: 'white',
borderRadius: 2,
padding: [5, 4],
rich: {
keywords: {
color: "red",
fontSize: '12'
},
index: {
fontSize: 12,
color: '#2979ff',
position: '10%'
},
},
formatter: function(data, data1) {
var newName = data.data.name
//默认样式
data.data.label = {
fontSize: 12,
padding: [5, 4],
backgroundColor: 'rgb(238, 243, 246)',
borderColor: 'rgb(115, 161, 191)',
color: '#000000',
}
//如果是最后一级，设置样式不带框
if (!data.data.children) {
// debugger
data.data.label.borderWidth = 0
data.data.label.fontSize = 12
data.data.label.padding = [5, 4]
data.data.label.backgroundColor = 'transparent'
data.data.symbolSize = 12
data.data.label.color = '#2979ff'
} else
newName = data.data.children.length >= 0 ? newName + '(' + data.data.children.length + '类)' : newName;
var arr = []
//关键字标红
if (keywords.length) {
var splitName = newName
$.each(keywords, function(index, item) {
splitName = splitName.replace(item, '`' + item + '`')
})
$.each(splitName.split('`'), function(i, item) {
if (is_exit_value(keywords, item))
arr.push('{keywords|' + item + '}');
else
arr.push(item);
})
} else {
arr.push(newName);
}
return arr.join('');
},
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left',
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}]
}, true);
$chart.hideLoading();
resize()
}
/**
* 初始化echarts数据
* */
searchCanves()
</script>以上代码中引用了三个js 提供链接，点击之后可以打开对应代码，可下载可复制
<script src="./js/jquery.js"></script>
总结
echart tree中一些实现方式，官方并没有提供，可以通过一些奇妙的方式解决哈哈，希望能帮到大家。
实现 echarts tree label样式修改、symbol图标自定义、formatter添加样式、