業(yè)務(wù)顯示的是數(shù)據(jù)庫的字段對(duì)應(yīng)關(guān)系烙丛，都是1對(duì)1的關(guān)系憎账。因此不考慮增加高度，高度改變的網(wǎng)上有很多教程垫毙。此例子是寬度隨著層級(jí)的改變而改變霹疫。
HTML結(jié)構(gòu)：
<div class="col-sm-12" style="overflow-x: scroll;">
? ? ? <div id="showactivechart" style="height: 800px;width: 100%"></div>
?</div>
JS邏輯：
????????????????????myChart.setOption(option = {
? ? ? ? ? ? ? ? ? ? ? ? ? ? tooltip: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? trigger: 'item',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? triggerOn: 'mousemove'
? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? series: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? type: 'tree',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? data: [data],//data取自ajax
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? top: '1%',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? left: '15%',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? bottom: '1%',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? right: '15%',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? symbolSize: 7,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? position: 'left',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? verticalAlign: 'middle',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? align: 'right',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 12
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? tooltip: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? formatter: function (a) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return a.data.name;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? leaves: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? position: 'right',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? verticalAlign: 'middle',
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? align: 'left'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? expandAndCollapse: true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? initialTreeDepth: 1,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? animationDuration: 550,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? animationDurationUpdate: 750
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? ? ? ? ? });
????????//當(dāng)用戶點(diǎn)擊層級(jí)的時(shí)候
????????????????????????var maxDepth = 2;
? ? ? ? ? ? ? ? ? ? ? ? myChart.on('click',function(params){
? ? ? ? ? ? ? ? ? ? ? ? ? ? if(params.componentType === 'series'){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(!params.value){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var dataIndex = params.dataIndex;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var isExpand = false;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? const nodes = myChart._chartsViews[0]._data.tree._nodes;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for(var i = 0 ;i < nodes.length ; i ++){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(nodes[i].dataIndex === dataIndex){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(nodes[i].children.length == 0){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? isExpand = nodes[i].isExpand ;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? maxDepth = isExpand ? maxDepth : 2;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for(var i = 0 ;i < nodes.length ; i ++){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(nodes[i].depth == 2 && nodes[i].isExpand){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? for(var j = i + 1 ; nodes[j].isExpand; j++){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? maxDepth = Math.max(nodes[j].depth,maxDepth)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log('isExpand: '+ isExpand,'? ? maxDepth: '+maxDepth);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(maxDepth>3){//設(shè)置的超過3個(gè)層級(jí)，改變寬度
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cotainer.style.width = (100 + (maxDepth - 3)*20)+'%' ;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? myChart.resize()
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cotainer.style.width = '100%' ;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? myChart.resize()
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? })
