echarts 树图点击展开关闭加数据！

来源：互联网发布：echarts动态获取数据编辑：程序博客网时间：2024/06/10 01:54

想法：将1级2级3级.等分别存放单独的数组，将加入的点击事件将指定等级的数组加入特定数组中实现展开效果和和合并效果。

echart 2.0 必须 3.0 没有

首先将echart 的容器加载出来！

<body>

</body>

在js 中的写法--》

var myCharts = echarts.init(document.getElementById('swdt'));

//1级数组 symbol 是点击的图片的样式，去掉默认是方块，为了更好的视觉效果可选择不同的样式

var arr1=[{"name":"爷爷"，“children”:"","symbol":"image://+图片地址路径"}] ;

//首先解释一下这里的children 为空是为了加入点击事件给其添加数据

//2级菜单

var arr2 =[{"name":"爸爸"，“children”:"","symbol":"image://+图片地址路径"}，{"name":"叔叔"，“children”:"","symbol":"image://+图片地址路径"}]

//3级菜单

var arr3 =[{"name":"我"，“children”:"","symbol":"image://+图片地址路径"}]

option = {
title : {
text: '专项救治'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'树图',
type:'tree',
orient: 'horizontal', // vertical horizontal
rootLocation: {x: 100,y: 230}, // 根节点位置 {x: 100, y: 'center'}
nodePadding: 8,
layerPadding: 200,
hoverable: false,
roam: true,
symbolSize: 6,
itemStyle: {
normal: {
color: '#4883b4',
label: {
show: true,
position: 'right',
formatter: "{b}",
textStyle: {
color: '#000',

fontSize: 5
}
},
lineStyle: {
color: '#ccc',
type: 'curve' // 'curve'|'broken'|'solid'|'dotted'|'dashed'

}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
borderWidth: 0
}
},

//默认初始化加载1级菜单
data:arr1

}
]

};

myCharts.setOption(option);

//节点的点击事件

myCharts.on('click',function(params){

var aname =params.name;

//判断点击的节点名称

if(aname=="爷爷"){

//判断节点下的children是不是空空展开即加入数据，不为空关闭

if(params.data.children==""){

arr1[0].children=arr2;

}else{

arr1[0].children="";

}

}else if(aname=="爸爸"){

if(params.data.children==""){

arr2[0].children=arr3;

}else{

arr2[0].children="";

}

myCharts.setOption(option,true);

}

//以此类推可扩展有更好的点击判断节点的方法可留言

})

整体代码：

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">

<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>专项救治</title>
<script src="echarts-all.js"></script>
</head>
<body>
<div id="swdt" style="display:inline-block;width:100%;height:594px"></div>
</body>
<script type="text/javascript">
var myCharts = echarts.init(document.getElementById('swdt'));
var arr1=[{"name":"爷爷","children":""}] ;
var arr2=[{"name":"爸爸","children":""},{"name":"叔叔","children":""}];
var arr3=[{"name":"我","children":""}] ;
option = {
title : {
text: '专项救治'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'专项救治',
type:'tree',
orient: 'horizontal', // vertical horizontal
rootLocation: {x: 100,y: 230}, // 根节点位置 {x: 100, y: 'center'}
nodePadding: 8,
layerPadding: 200,
hoverable: false,
roam: true,
symbolSize: 6,
itemStyle: {
normal: {
color: '#4883b4',
label: {
show: true,
position: 'right',
formatter: "{b}",
textStyle: {
color: '#000',
fontSize: 5
}
},
lineStyle: {
color: '#ccc',
type: 'curve' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
color: '#4883b4',
label: {
show: false
},
borderWidth: 0
}
},
data:arr1
}
]
};
myCharts.setOption(option);
myCharts.on('click',function(params){
var aname =params.name;
//判断点击的节点名称
if(aname=="爷爷"){
//判断节点下的children是不是空空展开即加入数据，不为空关闭
if(params.data.children==""){
arr1[0].children=arr2;
}else{
arr1[0].children="";
}
}else if(aname=="爸爸"){

if(params.data.children==""){
arr2[0].children=arr3;
}else{
arr2[0].children="";
}
}
myCharts.setOption(option,true);
})

</script>

</html>

阅读全文

1 0