forked from cxinping/PythonFullStack
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathecharts3.html
More file actions
94 lines (86 loc) · 2.43 KB
/
Copy pathecharts3.html
File metadata and controls
94 lines (86 loc) · 2.43 KB
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jslib/echarts.min.js"></script>
</head>
<body>
<button id="showChart_btn" onclick="showChart()">show chart</button>
<div id="chart_div" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
// data = [];
function showChart() {
var data = [
{value: Math.ceil(Math.random() * 100), name: "python"},
{value: Math.ceil(Math.random() * 100), name: "java"},
{value: Math.ceil(Math.random() * 100), name: "c#"},
{value: Math.ceil(Math.random() * 100), name: "php"},
{value: Math.ceil(Math.random() * 100), name: "c++"}
];
// alert('echarts');
var chart = echarts.init(document.getElementById("chart_div"));
option = {
title : {
text: '编程语言使用情况',
subtext: '2018年最新数据',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['python','java','c#','php','c++']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:data
}
]
};
timeTicket1 = setInterval(function () {
data = [
{value: Math.ceil(Math.random() * 100), name: "python"},
{value: Math.ceil(Math.random() * 100), name: "java"},
{value: Math.ceil(Math.random() * 100), name: "c#"},
{value: Math.ceil(Math.random() * 100), name: "php"},
{value: Math.ceil(Math.random() * 100), name: "c++"}
];
option.series[0].data = data;
chart.setOption(option);
console.log(data);
}, 2000);
// timeTicket1();
}
</script>
</body>
</html>