1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>饼图绘制</title>
6 <script type="text/javascript" src=".\\js\\jquery-3.4.1.min.js"></script>
7 <script type="text/javascript" src=".\\js\\highcharts.js"></script>
8 <script type="text/javascript">
9 $(function(){
10 var options = {
11 chart: {
12 type: 'pie'
13 },
14 title: {
15 text: '2020年网站浏览器浏览量占比'
16 },
17 series: [
18 {
19 id: 'exSeries',
20 name: '浏览器访问量占比',
21 data: [
22 ["FireFox", 40],
23 ["IE", 20],
24 ["Chrome", 15],
25 ["Safari", 10],
26 ["Opera", 10],
27 ["其他", 15]
28 ]
29 }
30 ]
31 };
32 $("#container").highcharts(options);
33 var exSeries = $('#container').highcharts().get('exSeries');
34 setInterval(function () {
35 var rand, Ie_num;
36 rand=Math.ceil(Math.random()*10);
37 Ie_num = 35 - rand;
38 var tmp_data = [
39 ["FireFox", 40],
40 ["IE", Ie_num],
41 ["Chrome", rand],
42 ["Safari", 10],
43 ["Opera", 10],
44 ["其他", 15]
45 ];
46 exSeries.setData(tmp_data, true, false, false);
47 }, 2000);
48
49 })
50 </script>
51 </head>
52 <body>
53 <div id="container" style="width: 600px; height: 400px;"></div>
54 </body>
55 </html>
