<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <title>Echarts關係圖解析</title> </head> <body style="height: 100%; margin: 0"> <!-- 爲 ECharts 準備一個具備大小(寬高)的 容器 --> <div id="container" style="height:900px;"></div> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/dataTool.js"></script> <script type="text/javascript"> // 基於準備好的容器(這裏的容器是id爲chart1的div),初始化echarts實例 var dom = document.getElementById("container"); var myChart = echarts.init(dom); myChart.showLoading(); $.get('data/les-miserables2.gexf', function (xml) { myChart.hideLoading(); var graph = echarts.dataTool.gexf.parse(xml); var categories = []; for (var i = 0; i < 9; i++) { categories[i] = { name: '類目' + i }; } graph.nodes.forEach(function (node) { node.itemStyle = null; node.value = node.symbolSize; node.symbolSize /= 1.5; node.label = { normal: { show: node.symbolSize > 30 } }; node.category = node.attributes.modularity_class; }); option = { title: { text: 'Les Miserables', subtext: 'Default layout', top: 'bottom', left: 'right' }, tooltip: {}, legend: [{ // selectedMode: 'single', data: categories.map(function (a) { return a.name; }) }], animationDuration: 1500, animationEasingUpdate: 'quinticInOut', series : [ { name: 'Les Miserables', type: 'graph', layout: 'none', data: graph.nodes, links: graph.links, categories: categories, roam: true, focusNodeAdjacency: true, itemStyle: { normal: { borderColor: '#fff', borderWidth: 1, shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.3)' } }, label: { position: 'right', formatter: '{b}' }, lineStyle: { color: 'source', curveness: 0.3 }, emphasis: { lineStyle: { width: 10 } } } ] }; myChart.setOption(option); }, 'xml'); </script> </body> </html>
Echarts關係圖
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.