1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <script src="js/highcharts.js"></script>
9 <script src="js/highcharts-3d.js"></script>
10
11 <title>Document</title>
12 </head>
13 <style>
14
15 </style>
16
17 <body>
18 <div id="container" style="height: 154px;width: 269px;border: 1px solid red;margin: auto"></div>
19 </body>
20 <script>
21 var chart = Highcharts.chart('container', {
22 chart: {
23 type: 'pie',
24 options3d: {
25 enabled: true,
26 alpha: 55
27 }
28 },
29 title: {
30 text: null,
31 floating: true,
32 y: 0
33
34 },
35 credits: {
36 enabled: false
37 },
38 plotOptions: {
39 pie: {
40 innerSize: 80,
41 depth: 40,
42 showInLegend: true,
43 allowPointSelect: true,
44 cursor: 'pointer',
45 dataLabels: {
46 enabled: false,
47 }
48 }
49 },
50 legend: {
51 align: "center",
52 verticalAlign: "center",
53 x: 15,
54 y: 160,
55 itemDistance: 0,
56 itemHoverStyle: {
57 color: 'red'
58 },
59 itemWidth: 90,
60 width: 305,
61 borderRadius: 29
62
63
64 },
65 series: [{
66 data: [
67 ['基础设施攻击', 10],
68 ['暴力破解', 20],
69 ['应用层攻击', 30],
70 ['木马', 20],
71 ['扫描', 5],
72 ['病毒', 15]
73 ]
74 }]
75 });
76 </script>
77
78
79
80 </html>
