echarts的树图tree做个类似工作流的营销活动管理，而且每个节点可以新增子节点和修改当前节点。如下图：
实现几个知识点：横向的echarts树图tree、点按钮是新增节点、点按钮其它地方是修改或查看、随着节点增多宽高自适应。
横向的echarts树图tree略过，参考官网。https://echarts.apache.org/zh/option.html#series-tree.type
1、节点加两个点击事件，并且节点内每行表示不同，这个得用到echarts的rich自定义富文本样式：https://echarts.apache.org/zh/option.html#series-tree.label.rich
在series.label.rich下加自定义标签和series.label.formatter加自定义标签组合成的html，如：
1）series.label.rich加自定义标签
rich:{
h6:{
color: '#333',
lineHeight: 16,
fontSize: 10
},
div:{
width: 80,
color: '#333',
fontSize: 10,
lineHeight: 16,
padding: [4, 5, 4, 5],
wordBreak: 'break-all'
},
a:{
backgroundColor: '#4986F7',
borderRadius: 20,
padding: [4, 7, 4, 7],
color: '#fff',
fontSize: 10,
},
span:{
backgroundColor: '#87aff8',
borderRadius: 20,
padding: [4, 7, 4, 7],
color: '#ebebeb',
fontSize: 10,
cursor: 'no-drop',
}
}
2）series.label.formatter自定义标签组合html
formatter: function(param) { //param是节点的数据
return '{h6|'+param.data.code+'}\n{div|'+param.data.name+'}\n{div|'+param.data.purpose+'}\n{a|'+text+'}'
}
//code对应节点的第一行A1、name对应节点的第二行、purpose对应节点的第三行、text对应节点的按钮；\n是换行用的
这样就把节点的html做出来了。
接下来做同一个节点有两个不同的点击事件：
加点击事件：
// 树节点点击数据 myChart.on('click', function(param) { //也可以注册其他时间 hover 、mouseout等
debugger; // 这里打个debugger用chrome的sources看param里面有什么数据，然后分析点击节点按钮和点击节点其它地方有什么不同，做不同的判断然后分成不同的点击事件 console.log(param); var data = param.data; var style = param.event.target.style; if (style.fill == '#4986F7' || style.fill == '#fff') { //点的是 +增加子活动 按钮,根据上面rich配置a标签来判断 addNode(data); //新增节点的函数，往tree数据的json新增数据，然后重新加载树图的函数就好。 } else { // 点的是节点内,但 +增加子活动 按钮外的地方 checkNode(data);//更改节点数据的函数，修改tree数据的json，然后重新加载树图的函数就好。
} });
节点加两个不同的点击事件完成。
接下来做宽高自适应：参考https://blog.csdn.net/yezitoo/article/details/89677773
const nodes = myChart._chartsViews[0]._data._graphicEls; let allNode = 0; for (let index = 0; index < nodes.length; index++) { const node = nodes[index]; if (node === undefined) { continue } allNode++; } const height = $('workflow0'+index).height(); //workflow0是每个树图tree的div容器
const width = $('workflow0'+index).width();
const currentHeight = 70 * allNode;
const currentWidth = 120 * allNode;
const newHeight = Math.max(currentHeight, height);
const newWidth = Math.max(currentWidth, width);
const tree_ele = document.getElementById('workflow0'+index);
tree_ele.style.height = newHeight + 'px';
tree_ele.style.width = newWidth + 'px';
myChart.resize();
点击新增或更新节点时，记得重新加载树图tree的函数，需求全部完成。
全部代码：
var myChart = echarts.init(document.getElementById('workflow0'+index));
var data = [itemData] //每个树图tree的数据json格式，一定要用[]括住var option = { tooltip: { //鼠标放上去显示的内容
trigger: 'item', triggerOn: 'mousemove', formatter: function(params, ticket, callback) { return '营销主题：'+params.data.name+'</br>'+'营销目的：'+params.data.purpose+'</br>'; }, }, series:[ { type: 'tree', name: '自动营销活动流程', data: data, top: '1%', left: 50, bottom: '1%', right: 50, edgeForkPosition: '50%', symbol: 'rect', symbolSize: ['90', '70'], edgeShape: 'polyline', edgeForkPosition: '50%', initialTreeDepth: -1, lineStyle: { width: 2 }, itemStyle: { normal: { color: '#f9f9f9', borderWidth: 1, borderColor: '#cccccc' } }, label: { height: 70, width: 80, position: 'inside', verticalAlign: 'middle', align: 'center', fontSize: 12, overflow: 'truncate', ellipsis: '...', formatter: function(param) { //status: 4:已提交;9:MOT未开启;10:MOT已启用;11:MOT暂停;12:MOT营销上限;13:MOT已过期;99:已删除 let text = '+增加子活动'; switch (param.data.status) { case '4': text = '已提交' break case '9': text = '+增加子活动' break case '10': text = 'MOT已启用' break case '11': text = 'MOT暂停' break case '12': text = 'MOT营销上限' break case '13': text = 'MOT已过期' break case '99': text = '已删除' break case null: text = '已失效' break default: text = '+增加子活动' } if (param.data.name.length > 9) { param.data.name = param.data.name.substring(0,9)+'...'; } if (param.data.purpose.length > 9) { param.data.purpose = param.data.purpose.substring(0,9)+'...'; }if (param.data.status == 9) { //按钮可以点 return '{h6|'+param.data.code+'}\n{div|'+param.data.name+'}\n{div|'+param.data.purpose+'}\n{a|'+text+'}' } else { //按钮不可以点 return '{h6|'+param.data.code+'}\n{div|'+param.data.name+'}\n{div|'+param.data.purpose+'}\n{span|'+text+'}' } }, rich:{ h6:{ color: '#333', lineHeight: 16, fontSize: 10 }, div:{ width: 80, color: '#333', fontSize: 10, lineHeight: 16, padding: [4, 5, 4, 5], wordBreak: 'break-all' }, a:{ backgroundColor: '#4986F7', borderRadius: 20, padding: [4, 7, 4, 7], color: '#fff', fontSize: 10, }, span:{ backgroundColor: '#87aff8', borderRadius: 20, padding: [4, 7, 4, 7], color: '#ebebeb', fontSize: 10, cursor: 'no-drop', } } }, leaves: { label: { position: 'inside', // 节点的文字是放在节点里面的 verticalAlign: 'middle', align: 'center' } }, emphasis: { focus: 'descendant' }, expandAndCollapse: false,//一定要false，echarts树图tree点击节点不收缩或伸展，要不然点击节点时节点会收缩或伸展 animationDuration: 550, animationDurationUpdate: 750 } ] }; myChart.setOption(option, true); // 树节点点击数据 myChart.on('click', function(param) { //也可以注册其他时间 hover 、mouseout等 console.log(param); var data = param.data; var style = param.event.target.style; if (style.fill == '#4986F7' || style.fill == '#fff') { //点的是 +增加子活动 按钮 addChildAutoMarketing(data); } else { // 点的是节点内,但 +增加子活动 按钮外的地方 showNodeInfo(data); } }); // 树容器宽高自适应 const nodes = myChart._chartsViews[0]._data._graphicEls; let allNode = 0; for (let index = 0; index < nodes.length; index++) { const node = nodes[index]; if (node === undefined) { continue } allNode++; } const height = $('workflow0'+index).height(); const width = $('workflow0'+index).width(); const currentHeight = 70 * allNode; const currentWidth = 120 * allNode; const newHeight = Math.max(currentHeight, height); const newWidth = Math.max(currentWidth, width); const tree_ele = document.getElementById('workflow0'+index); tree_ele.style.height = newHeight + 'px'; tree_ele.style.width = newWidth + 'px'; myChart.resize();
//节点数据：
var itemData = {
"activityId": "1166",
"code": "A1",
"name": "测试自动营销活动1-A2.1",
"purpose": "测试自动营销活动1-A2.1",
"status": "9",
"children": [{
"activityId": "1",
"code": "A1.1",
"name": "自动-A1.1",
"purpose": "自动-A1.1",
"status": "9",
"children": []
},
{
"activityId": "2",
"code": "A1.2",
"name": "自动A1.2",
"purpose": "自动A1.2",
"status": "9",
"children": []
}]
}