<template>
<div>
<div id="tree"></div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
mounted(){
this.tree();
},
methods:{
tree(){
let tr = this.$echarts.init(document.getElementById("tree"));
tr.setOption({
title : {
show:false
},
calculable : false,
series : [{
name:'树图',
type:'tree',
//排列方式，横向、纵向
orient: 'vertical',
left: '2%',
right: '2%',
top: '12%',
bottom: '12%',
//连接线长度
layerPadding: 30,
//结点间距
nodePadding: 20,
//图形形状
symbol: 'circle',
//尺寸大小
symbolSize: 40,
label:{
normal:{
show:true,
formatter:function(param){
if(param.name=="销售部"){
return ''
}else{
return param.name
}
},
},
emphasis:{
show:false,
}
},
leaves: {//最底部文字样式
label: {
normal: {
position: 'bottom',
rotate: -90,
verticalAlign: 'middle',
align: 'left',
show:false
},
emphasis:{
show:false
}
}
},
lineStyle:{//正常情况显示
color: 'red',
width: 1,
},
data: [
{
name: '销售部',
//图片大小
symbolSize: [60, 80],
//自定义图片
symbol: 'image://https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
children: [
{
name: '销售一部',
symbol: 'circle',
lineStyle:{
color:"red"
},
symbolSize: [60, 60],
children: [
{
name: '李大',
symbol: 'image://https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
symbolSize: [60, 80],
lineStyle:{
color:"red"
}
},
{
name: '利尔',
symbol: 'image://https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
symbolSize: [60, 80],
lineStyle:{
color:"red"
}
},
{
name: '离散',
symbol: 'image://https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
symbolSize: [60, 80],
lineStyle:{
color:"red"
}
},
{
name: '李屋',
symbol: 'image://https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
symbolSize: [60, 80],
lineStyle:{
color:"red"
}
}
]
},
{
name: '销售二部',
symbol: 'circle',
symbolSize: [60, 60],
lineStyle:{
color:"blue"
},
children: [
{
name: '王一',
symbol: 'image://https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
symbolSize: [60, 80],
lineStyle:{
color:"blue"
}
},
{
name: '网二',
symbol: 'image://https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
symbolSize: [60, 80],
lineStyle:{
color:"blue"
}
}
]
},
{
name: '销售三部',
symbol: 'circle',
symbolSize: [60, 60],
lineStyle:{
color:"#aaa"
},
children: [
{
name: '六大',
symbol: 'image://https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
symbolSize: [60, 80],
lineStyle:{
color:"#aaa"
}
},
{
name: '六二',
symbol: 'image://https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
symbolSize: [60, 80],
lineStyle:{
color:"#aaa"
}
}
]
},
{
name: '销售四部',
symbol: 'circle',
symbolSize: [60, 60],
lineStyle:{
color:"green"
},
children: [
{
name: '张一',
symbol: 'image://https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
symbolSize: [60, 80],
lineStyle:{
color:"green"
}
},
{
name: '张二',
symbol: 'image://https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
symbolSize: [60, 80],
lineStyle:{
color:"green"
}
}
]
}
]
}
]
}]
})
}
}
}
</script>
<style scoped>
#tree{
display:inline-block;
width:900px;
height:460px;
background-color:#1d273e;
}
</style>
symbol里面的图片地址均为网络图片可以直接显示，格式要求就是 image：// url
echarts在vue-cli安装后，在main.js进行了注册，就可以在页面上直接使用this.$echarts
import Echarts from "echarts";
Vue.prototype.$echarts = Echarts;
Vue.use(Echarts)代码效果：
