| /* |
| title: NPM Dependencies |
| category: graph |
| titleCN: NPM 依赖关系图 |
| difficulty: 9 |
| */ |
| |
| interface RawNode { |
| x: number; |
| y: number; |
| id: string; |
| label: string; |
| size: number; |
| color: string; |
| } |
| |
| interface RawEdge { |
| sourceID: string; |
| targetID: string; |
| } |
| |
| myChart.showLoading(); |
| $.getJSON( |
| ROOT_PATH + '/data/asset/data/npmdepgraph.min10.json', |
| function (json) { |
| myChart.hideLoading(); |
| myChart.setOption( |
| (option = { |
| title: { |
| text: 'NPM Dependencies' |
| }, |
| animationDurationUpdate: 1500, |
| animationEasingUpdate: 'quinticInOut', |
| series: [ |
| { |
| type: 'graph', |
| layout: 'none', |
| // progressiveThreshold: 700, |
| data: json.nodes.map(function (node: RawNode) { |
| return { |
| x: node.x, |
| y: node.y, |
| id: node.id, |
| name: node.label, |
| symbolSize: node.size, |
| itemStyle: { |
| color: node.color |
| } |
| }; |
| }), |
| edges: json.edges.map(function (edge: RawEdge) { |
| return { |
| source: edge.sourceID, |
| target: edge.targetID |
| }; |
| }), |
| emphasis: { |
| focus: 'adjacency', |
| label: { |
| position: 'right', |
| show: true |
| } |
| }, |
| roam: true, |
| lineStyle: { |
| width: 0.5, |
| curveness: 0.3, |
| opacity: 0.7 |
| } |
| } |
| ] |
| }), |
| true |
| ); |
| } |
| ); |
| |
| export {}; |