效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/* css 代码 */
</style>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>
<body>
<div id="container" style="height: 400px"></div>
<script>
var colors = Highcharts.getOptions().colors,
categories = ["Chrome", "Firefox", "IE"],
data = [{
y: 50,
color: colors[3],
drilldown: {
name: "Chrome",
categories: [
"Chrome v65.0",
"Chrome v64.0",
"Chrome v63.0",
],
data: [2, 2, 2],
},
}, {
y: 50,
color: colors[4],
drilldown: {
name: "Firefox",
categories: [
"Firefox v58.0",
"Firefox v57.0",
"Firefox v56.0",
],
data: [2, 2, 2],
},
}, {
y: 50,
color: colors[5],
drilldown: {
name: "IE",
categories: ["IEV11", "IEv10.0", "IEv9.0"],
data: [2, 2, 2],
},
}, ],
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
var rotateNum = -90,
rotateTimer;
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - j / drillDataLen / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color)
.brighten(brightness)
.get(),
});
}
}
var option = {
chart: {
type: "pie",
options3d: {
enabled: true,
alpha: 60,
beta: 0,
depth: 0,
},
// events: {
// load: startRotate
// },
},
yAxis: {
title: {
text: "Total percent market share",
},
},
plotOptions: {
pie: {
stacking: "normal",
allowPointSelect: true,
// innerSize:40,
shadow: false,
depth: 120,
center: ["50%", "50%"],
},
series: {
animation: false
}
},
tooltip: {
valueSuffix: "%",
},
series: [{
name: "Browsers",
data: browserData,
size: "66%",
zIndex: 99,
center: ["50%", "25%"],
startAngle: rotateNum,
dataLabels: {
formatter: function() {
return this.y > 1 ? this.point.name : null;
},
color: "#ffffff",
distance: -30,
},
}, {
name: "Versions",
data: versionsData,
size: "100%",
innerSize: "66%",
zIndex: 1,
startAngle: rotateNum,
dataLabels: {
formatter: function() {
// display only if larger than 1
return this.y > 1 ?
"<b>" +
this.point.name +
":</b> " +
this.y +
"%" :
null;
},
distance: 30,
zIndex: 2,
},
id: "versions",
}, ],
}
var chart = Highcharts.chart('container', option);
function xingYongPie() {
// Create the chart
// var chart = Highcharts.chart("container", option);
}
window.onload = function() {
xingYongPie();
setTimeout(startRotate, 500);
};
function rotate() {
console.log(rotateNum)
rotateNum = rotateNum + 5;
if (rotateNum == 270) {
rotateNum = -90;
}
option.series[0].startAngle = rotateNum;
option.series[1].startAngle = rotateNum;
Highcharts.chart('container', option);
}
function startRotate() {
rotateTimer = setInterval(rotate, 500);
}
function stopRotate() {
clearInterval(rotateTimer);
rotateTimer = null;
}
</script>
</body>
</html>
6739
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
