echart+vue写个关系图
<template>
<div class="abc" :style="{height:'350px',width:'1050px'}" />
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons");
export default {
data() {
return {
chart: null,
treeData:{
text1:'AM巴西子网系统部',text2:'',text3:'',text4:'',zb:5,
children:[
{text1:'副部长-解决方案',text2:'待评估/17C',text3:'宗勇',text4:'刚报到',zb:3},
{text1:'系统部部长',text2:'21/20C',text3:'卿长春',text4:'2019/3/29',zb:11,
children:[
{text1:'副部长-销售/SDT',text2:'20/2OC',text3:'Marcio Costa',text4:'2019/3/29',zb:11},
{text1:'AM(s)',text2:'/',text3:'5人',text4:'3+',zb:-3,
children:[
{text1:'AM',text2:'17/18',text3:'Marcio Costa',text4:'2018/3/29',zb:-3},
{text1:'AM',text2:'17/18',text3:'Marcio Costa',text4:'2018/3/29',zb:-3},
{text1:'AM',text2:'17/18',text3:'Marcio Costa',text4:'2018/3/29',zb:-3},
{text1:'AM',text2:'17/18',text3:'Marcio Costa',text4:'2018/1/29',zb:13},
]
},
{text1:'SM',text2:'17/17A',text3:'杨胜海',text4:'2019/05/13',zb:3},
{text1:'FM',text2:'18/18A',text3:'Wagner ',text4:'2019/06/10',zb:5},
{text1:'NPO',text2:'?/?',text3:'XX',text4:' ',zb:13},
{text1:'系统部CFO',text2:'?/?',text3:'常妙臻 ',text4:' ',zb:31}
]
},
{text1:'副部长-交付管理',text2:'19/18A',text3:'Vinicius',text4:'2019/07/15',zb:3,}
]
}
};
},
watch: {
treeData: {
deep: true,
handler(val) {
this.setOptions(val);
}
}
},
mounted() {
this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
chartLabel(zb){
let color = ''
if(zb>0&&zb<10) color = "#ffc000"
if(zb<0) color = "#c7000b"
if(zb>10) color = "#92d050"
let obj = {
label: {
formatter:['{a|%text1%}','{b|%text2%}','{c|%text3%}','{d|%text4%}'].join('\n'),
color: '#333',
fontSize: 12,
fontFamily: 'Arial',
verticalAlign:'middle',
backgroundColor:'transparent',
rich: {
a: {
backgroundColor:'#b9cde5',
width:120,
height:18,
fontSize: 12,
color: '#fff',
borderWidth: 1,
borderColor:'#385d8a',
align:'center'
},
b: {
backgroundColor:'#fff',
width:120,
height:18,
fontSize: 12,
color: '#505050',
borderWidth: 1,
borderColor:'#385d8a',
align:'center'
},
c: {
backgroundColor:'#fff',
width:120,
height:18,
fontSize: 12,
color: '#505050',
borderWidth:1,
borderColor:'#385d8a',
align:'center'
},
d:{
backgroundColor:color,
width:120,
height:18,
fontSize: 12,
color: '#fff',
borderWidth: 1,
borderColor:'#385d8a',
align:'center'
}
}
}
}
return obj
},
initChart() {
let data = this.treeData
for(let i =0;i<data.length;i++){
console.log(data)
}
this.chart = echarts.init(this.$el, "macarons");
this.setOptions(this.treeData);
},
format(s,c){
return s.replace(/%(\w+)%/g, function(m, p) { return c[p]; })
},
dataBack(data){
let obj = {}
obj.text1 = data.text1
obj.text2 = data.text2
obj.text3 = data.text3
obj.text4 = data.text4
let label = this.chartLabel(data.zb).label
let str = this.format(label.formatter,obj)
label.formatter = str
data.label = label
if(data.children&&data.children.length>0){
data.children.map((obj)=>{
this.dataBack(obj)
})
}
},
setOptions(data) {
this.dataBack(data)
console.log(data)
data.label.formatter = this.format('{a|%text1%}',{text1:data.text1})
this.chart.setOption({
series: [
{
width:1000,
height:240,
name: "统一授信视图",
type: "tree",
orient: "TB",
top: '20%',
left:'2%',
bottom:'5%',
initialTreeDepth: 10,
expandAndCollapse: true,
symbolSize: [118, 50],
roam:true,
symbol:'rect',
edgeForkPosition:'50%',
edgeShape:'polyline',
itemStyle: {
color: 'transparent',
borderWidth: 0,
},
lineStyle: {
color: '#D5D5D5',
width: 1,
curveness: 1,
},
data: [data]
}
]
});
},
sidebarResizeHandler(e) {
if (e.propertyName === "width") {
this.__resizeHandler();
}
}
}
};
</script>