官網代碼：
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
}
]
});
});
可以看到每一層都是以name，children的形式
附上一段我自己寫的代碼得到的結果，數據少一點看起來更清晰：
https://www.easy-mock.com/mock/5d11d32c679aaa1a2f412f0a/example/data
自己寫來用的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
}
]
});
再列出一些我覺得可能會用到的參數，方便以后使用：
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：定義樹圖邊的樣式