echart_demo/qjson.html at master · hecore/echart_demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/jsonTool.js"></script>
</head>
<body style="height: 600px; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    myChart.showLoading();
    $.getJSON('data/hecore.json', function (json) {
        myChart.hideLoading();
        console.log(json);
        var graph=json;
        //var graph = echarts.jsonTool.json.parse(json);
        //转换未Links和nodes;
        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 > 10
	            }
	        };
	        node.category = node.attributes.modularity_class;
	    });
	     option = {
	        title: {
	            text: 'Les Miserables',
	            subtext: 'Circular layout',
	            top: 'bottom',
	            left: 'right'
	        },
	        tooltip: {},
	        legend: [{
	            // selectedMode: 'single',
	            data: categories.map(function (a) {
	                return a.name;
	            })
	        }],
	        animationDurationUpdate: 1500,
	        animationEasingUpdate: 'quinticInOut',
	        series : [
	            {
	                name: 'Les Miserables',
	                type: 'graph',
	                layout: 'circular',
	                circular: {
	                    rotateLabel: true
	                },
	                data: graph.nodes,
	                links: graph.links,
	                categories: categories,
	                roam: true,
	                label: {
	                    normal: {
	                        position: 'right',
	                        formatter: '{b}'
	                    }
	                },
	                lineStyle: {
	                    normal: {
	                        color: 'source',
	                        curveness: 0.3
	                    }
	                }
	            }
	        ]
	    };

	    myChart.setOption(option);
	}, 'json');
    if (option && typeof option === "object") {
        var startTime = +new Date();
        myChart.setOption(option, true);
        var endTime = +new Date();
        var updateTime = endTime - startTime;
        console.log("Time used:", updateTime);
    }
</script>
</body>
</html>