<!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>