echarts中的樹形結構圖（參數分析）

先上echarts官網示例圖，可以點開鏈接查看，這里先上一張截圖，以及官網代碼

官網代碼：

myChart.showLoading();    //顯示Loading標志； var myChart = echarts.init(document.getElementById('頁面中div的id')); 
$.get('data/asset/data/flare.json', function (data) {
    myChart.hideLoading();    //得到數據后隱藏Loading標志
 
    echarts.util.each(data.children, function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });    //間隔展開子數據，animate，display，physics，scale，vis是展開的
 
    myChart.setOption(option = {
        tooltip: {    //提示框組件
            trigger: 'item',    //觸發類型，默認：item（數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用）。可選：'axis'：坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。'none':什么都不觸發。
            triggerOn: 'mousemove'    //提示框觸發的條件，默認mousemove|click（鼠標點擊和移動時觸發）。可選mousemove：鼠標移動時，click：鼠標點擊時，none：        
        },
        series: [    //系列列表
            {
                type: 'tree',    //樹形結構
 
                data: [data],    //上面從flare.json中得到的數據
 
                top: '1%',       //距離上
                left: '7%',      //左
                bottom: '1%',    //下
                right: '20%',    //右的距離
 
                symbolSize: 7,   //標記的大小，就是那個小圓圈，默認7
 
                label: {         //每個節點所對應的標簽的樣式
                    normal: {
                        position: 'left',       //標簽的位置
                        verticalAlign: 'middle',//文字垂直對齊方式，默認自動。可選：top，middle，bottom
                        align: 'right',         //文字水平對齊方式，默認自動。可選：top，center，bottom
                        fontSize: 9             //標簽文字大小
                    }
                },
 
                leaves: {    //葉子節點的特殊配置，如上面的樹圖示例中，葉子節點和非葉子節點的標簽位置不同
                    label: {
                        normal: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    }
                },
 
                expandAndCollapse: true,    //子樹折疊和展開的交互，默認打開
                animationDuration: 550,     //初始動畫的時長，支持回調函數,默認1000
                animationDurationUpdate: 750//數據更新動畫的時長，默認300
            }
        ]
    });
});

附上一張官網的flare.json數據結構的截圖

可以看到每一層都是以name，children的形式

附上一段我自己寫的代碼得到的結果，數據少一點看起來更清晰：

        {
            "children": [
                {
                    "children": [
                        {
                            "children": [
                                {
                                    "children": [],
                                    "name": "低壓車間表計82"
                                }
                            ],
                            "name": "低壓關口表計1"
                        }
                    ],
                    "name": "高壓子表計122"
                },
                {
                    "children": [
                        {
                            "children": [],
                            "name": "低壓關口表計101"
                        }
                    ],
                    "name": "高壓子表計141"
                }
            ],
            "name": "高壓總表計102"
        }

自己寫來用的js代碼，該樹狀圖垂直模式：

myChart.setOption(option = {
            tooltip: {
                // show：'true',//默認：true；是否顯示提示框組件，包括提示框浮層和 axisPointer。
                trigger: 'item',//默認：item；觸發類型。item：數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。'axis'：坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。'none':什么都不觸發。
                triggerOn: 'mousemove'
            },
            series:[
                {
                    type: 'tree',
 
                    data: [data],
 
                    left: '2%',
                    right: '2%',
                    top: '15%',
                    bottom: '10%',
 
                    symbol: 'emptyCircle',
 
                    orient: 'vertical',
 
                    expandAndCollapse: true,//默認：true；子樹折疊和展開的交互，默認打開 。
 
                    initialTreeDepth:2,//默認：2，樹圖初始展開的層級（深度）。根節點是第 0 層，然后是第 1 層、第 2 層，... ，直到葉子節點
 
                    label: {
                        normal: {
                            position: 'top',//標簽的位置。
                            rotate: -90,//標簽旋轉。從 -90 度到 90 度。正值是逆時針。
                            verticalAlign: 'middle',//文字垂直對齊方式，默認自動。
                            align: 'right',//文字水平對齊方式，默認自動。
                            fontSize: 12,//文字的字體大小
                        }
                    },
 
                    leaves: {
                        label: {
                            normal: {
                                position: 'bottom',
                                rotate: -90,
                                verticalAlign: 'middle',
                                align: 'left',
                                fontSize: 8,//文字的字體大小
                            }
                        }
                    },
 
                    animationDurationUpdate: 750
                    
                }
            ]
        });

附上我寫出來的效果圖：

 

echarts官網中tooltip的參數文檔

echarts官網中tree的series參數文檔

echarts官網中.setOption參數文檔

 

再列出一些我覺得可能會用到的參數，方便以后使用：

series（系列列表）

1. layout：樹圖的布局，有 正交 和 徑向 兩種（正交就是水平或垂直；徑向就是以根節點為原點，每一層為一環）
2. orient：樹圖中 正交布局 的方向
3. symbol：標記的圖形（默認：emptyCricle）
4. initialTreeDepth：樹圖初始展開的層級（深度）（默認：2）
5. itemStyle：樹圖中每個節點的樣式
6. label：每個節點所對應的文本標簽的樣式
7. rich：自定義富文本樣式，在標簽中做出非常豐富的效果。
8. leaves：葉子節點的特殊配置
9. emphasis：樹圖中個圖形和標簽高亮的樣式
10. data：數據格式是樹狀結構
11. lineStyle：定義樹圖邊的樣式

 

轉：https://blog.csdn.net/qq_40594137/article/details/80263015