echarts树图高亮线路
时间: 2023-11-24 09:52:14 浏览: 95
echarts树图实现点击收缩子节点
4星 · 用户满意度95%
以下是实现echarts树图高亮线路的代码:
```javascript
// 获取树图实例
var myChart = echarts.init(document.getElementById('main'));
// 配置项
var option = {
// 其他配置项
series: [{
// 其他配置项
// 点击节点高亮显示路径
emphasis: {
lineStyle: {
color: '#ff0000'
}
}
}]
};
// 点击节点事件
myChart.on('click', function(params) {
// 获取当前节点的路径
var path = params.treePathInfo;
// 高亮显示路径
myChart.setOption({
series: [{
emphasis: {
lineStyle: {
color: '#ff0000',
curveness: 0.5, // 曲度
width: 3 // 线宽
}
},
data: [{
// 高亮显示路径
name: path[0].name,
itemStyle: {
color: '#ff0000'
}
}, {
name: path[1].name,
itemStyle: {
color: '#ff0000'
}
}, {
name: path[2].name,
itemStyle: {
color: '#ff0000'
}
}]
}]
});
});
// 渲染树图
myChart.setOption(option);
```
阅读全文