echarts树图tree绘制工作流，包含有rich自定义富文本样式、点击事件并且一个节点有多个不同的点击事件

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是换行用的

// 树节点点击数据
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标签来判断
        clickBtn(data);
    } else { // 点的是节点内,但 +增加子活动 按钮外的地方
        checkNode(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(); //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();

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": []
　　}]
}