首先从http://echarts.baidu.com/download.html下载echarts.min.js,也可以在线定制，直接选择树图就好啦。
然后引入js
<!--echarts 其中只有echarts的树图部分-->
<script src="script/libs/echarts.min.js"></script>
html部分，写一个div容器装图表
<div id="main" style="height:550px;width: 900px !important;"></div>
在js部分编写代码，在函数应用时传入数据（data），数据格式为{name:"a",children:[{name:"aa",children:[{name:"aaa",children:[{name:"aaaa",value:"123"}]}]},{name:"ab",children:[{name:"abb",children:[{name:"abbb",value:"321"}]}]}]}
//树图
function treeChart(data) {
$("#main").css(‘width‘, $("#main").width());
var myChart = echarts.init(document.getElementById(‘main‘));
myChart.showLoading();
myChart.hideLoading();
myChart.setOption(option = {
tooltip: {
trigger: ‘item‘,
triggerOn: ‘mousemove‘,
formatter: "{b}" //也可也写为"{b}":"{c}",显示为name:value
},
series: [
{
type: ‘tree‘, //这里选树图
data: [data],
top: ‘18%‘, // 距离顶部的位置，根据自己数据调整
bottom: ‘18%‘, // 距离底部的位置
layout: ‘radial‘,
symbol: ‘emptyCircle‘,
symbolSize: 7,
initialTreeDepth: 3,
animationDurationUpdate: 750
}
]
});
};
这样就在页面中就显示出来了，我是在bootsrap的模态框中显示树图的，在关闭模态框后要销毁echarts，不然会报错
//关闭模态框销毁echarts
$(‘#treeChart‘).on(‘hide.bs.modal‘, function () {
echarts.dispose(document.getElementById(‘main‘));
});
目前大概是这样，后续会补充的