在實際項目中使用echarts越來越多了，今天從一個組織結構圖開始，手把手教大家開發echarts圖表。
公司里的組織結構圖如下：
可以參考echarts入門教程：http://echarts.baidu.com/echarts2/doc/start.html
完整代碼實現：
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main_orgStructure" style="width:1200px; height:400px;position: absolute; top: 10%; left: 10%;"></div> <!-- ECharts單文件引入 --> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路徑配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/tree' // 使用樹狀圖就加載tree模塊，按需加載 ], function (ec) { // 基於准備好的dom，初始化echarts圖表 var myChart = ec.init(document.getElementById('main_orgStructure')); var commonStyle = { } var option = { title : { text: '組織結構圖' }, tooltip : { show: false, trigger: 'item', formatter: "{b}: {c}" }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : false, series : [ { name:'樹圖', type:'tree', orient: 'vertical', // vertical horizontal rootLocation: {x: '50%', y: '15%'}, // 根節點位置 {x: 'center',y: 10} nodePadding: 20, layerPadding:40, symbol: 'rectangle', borderColor:'black', itemStyle: { normal: { color: '#fff',//節點背景色 label: { show: true, position: 'inside', textStyle: { color: 'black', fontSize: 15, //fontWeight: 'bolder' } }, lineStyle: { color: '#000', width: 1, type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed' } }, emphasis: { label: { show: false } } }, data: [ { name: '董事會', value: 6, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { borderWidth: 2, borderColor: 'black' } }, children: [ { name: '總經理', value: 6, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { borderWidth: 2, borderColor: 'black' } }, children: [ { name: '營銷中心', value: 4, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, children: [ { name: '市場部', value: 4, symbolSize: [60, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, }, { name: '銷售部', value: 4, symbolSize: [60, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, }, { name: '客服部', value: 4, symbolSize: [60, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, } ] }, { name: '項目中心', value: 4, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, children: [ { name: '售前支持部', value: 4, symbolSize: [90, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, }, { name: '項目一部', value: 4, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, }, { name: '項目二部', value: 4, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, }, { name: '項目三部', value: 4, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, } ] }, { name: '技術中心', value: 4, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, children: [ { name: '開發部', value: 4, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, }, { name: '設計部', value: 4, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, }, { name: '系統部', value: 4, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, } ] }, { name: '行政部', value: 4, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } } }, { name: '財務部', value: 4, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } } }, { name: '其他分支', value: 4, symbolSize: [70, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, children: [ { name: '汕頭分公司', value: 4, symbolSize: [90, 30], symbol: 'rectangle', itemStyle: { normal: { label: { show: true, position: 'inside' }, borderWidth: 2, borderColor: 'black' } }, } ] }, ] }] } ] } ] }; // 為echarts對象加載數據 myChart.setOption(option); }); </script> </body>