ECharts树形图问题echarts tree配置项内容和展示
为什么树形图不连接线不支持直线了,单独改变线条颜色也不可以
配置项如下
option = {
title : {
show:false
},
tooltip : {
trigger: 'item',
formatter: "{b}"
//formatter: "{b}: {c}"
},
//那个右上角的工具栏
toolbox: {
show : false,
},
calculable : false,
series : [
{
name:'树图',
type:'tree',
//排列方式，横向、纵向
orient: 'vertical',
//根节点的位置
rootLocation: {x: 'center',y: '10%'},
//连接线长度
layerPadding: 30,
//结点间距
nodePadding: 20,
initialTreeDepth:3,//展开的层级
//图形形状
symbol: 'circle',
//尺寸大小
symbolSize: 40,
//图的一些样式设置
itemStyle: {
//正常情况显示
normal: {
abel: {
show: true,
position: 'inside',
textStyle: {
color: '#cc9999',
fontSize: 15,
fontWeight: 'bolder'
}
},
lineStyle: {
color: '#000',
width: 1,
type: 'solid'
}
},
//鼠标移上去样式
emphasis: {
label: {
show: false,
textStyle:{
align:'center',
verticalAlign:'middle'
}
},
color:'#fff',
borderWidth: 1
}
},
data: [
{
name: '张三',
//图片大小
symbolSize: [60, 80],
//图片
symbol: 'square',
itemStyle: {
normal: {
label: {
show: false
}
},
},
children: [
{
name: '小明',
symbol: 'square',
symbolSize: [150, 80],
//value: 4,
itemStyle: {
color:'#fff',
normal: {
lineStyle: {
color: '#000',
width: 1,
type: 'solid'
},
label: {
show: true,
position: 'bottom'
},
}
},
children:[{
name:'小小明1',
symbol: 'square',
symbolSize: [150, 80],
value: 4,
itemStyle: {
normal: {
label: {
show: true,
position: 'bottom'
}
}
},
children:[{
name:'小小小明1',
symbol: 'square',
symbolSize: [150, 80],
value: 4,
itemStyle: {
normal: {
label: {
show: true,
position: 'bottom'
}
}
},
}]
},{
name: '+',
},{
name:'小小明2',
symbol: 'square',
symbolSize: [150, 80],
value: 4,
itemStyle: {
normal: {
label: {
show: true,
position: 'bottom'
}
}
},
}]
},
{
name: '小黄',
symbol: 'square',
symbolSize: [150, 80],
value: 4,
itemStyle: {
normal: {
label: {
show: true,
position: 'bottom'
}
}
},
children:[{
name:'小小黄1',
symbol: 'square',
symbolSize: [150, 80],
value: 4,
itemStyle: {
normal: {
label: {
show: true,
position: 'bottom'
}
}
},{
name:'小小黄2',
symbol: 'square',
symbolSize: [150, 80],
value: 4,
itemStyle: {
normal: {
label: {
show: true,
position: 'bottom'
}
}
},
}]
}
]
}
]
}
]
};
截图如下
