想法:将1级2级3级.等分别存放单独的数组,将加入的点击事件将指定等级的数组加入特定数组中实现展开效果 和 和 合并效果。
echart 2.0 必须 3.0 没有
首先将echart 的容器加载出来 !
<body>
<div id="swdt" style="display:inline-block;width:100%;height:594px"></div></body>
在js 中的写法--》
<script type="text/javascript">
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
}
},
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
}
]
};
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>
<!-- 引入 ECharts 文件 -->
<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>
<html>
<!-- 引入 ECharts 文件 -->
<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>