關於echarts 徑向樹狀圖
阿新 • • 發佈：2018-01-05
引入 http date main 12px ima dispose -- item
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‘)); }); 目前大概是這樣，後續會補充的
首先從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"}]}]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‘)); }); 目前大概是這樣，後續會補充的
關於echarts 徑向樹狀圖