<!DOCTYPE html> <html style=“height: 100%”>
<head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="width: 99%; height:98%; position: absolute; margin: 0; padding: 0;"></div> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; myChart.showLoading(); function index(json){ myChart.hideLoading(); myChart.setOption(option = { title: { text: 'Dependencies' }, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', series : [ { type: 'graph', layout: 'none', //progressiveThreshold: 700, hoverAnimation: false, data: json.nodes.map(function (node) { return { x: node.x, y: node.y, id: node.id, name: node.label, symbolSize: node.size, itemStyle: { normal: { color: node.color } } }; }), edges: json.edges.map(function (edge) { return { source: edge.sourceID, target: edge.targetID }; }), label: { emphasis: { position: 'bottom', show: true, formatter: '{b}', distance: 5 } }, roam: true, focusNodeAdjacency: true, symbol: 'roundRect', lineStyle: { normal: { width: 0.3, curveness: 0, opacity: 0.7, color: 'source', } }, itemStyle: { normal: { borderColor: '#fff', borderWidth: 1, shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.3)' } }, emphasis: { lineStyle: { width: 3 } } } ] }, true); myChart.setOption(option); } </script> <script type="text/javascript" src="./pod_dependency.json?cb=index"></script> </body>
</html>