![]()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container" style="width: 600px;height:400px;"></div>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts-3d.js"></script>
<script>
// 圖表配置
var options = {
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 58,
beta: 0
},
backgroundColor: 'rgba(1,1,1,1)'
},
credits: {//關閉版權信息的標籤
enabled: false
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 70,
dataLabels: {
enabled: true,
formatter: function () {
let percentage = this.percentage.toFixed(0);
return '<p style="color:#fff;">' + percentage + '%</p><br/><p style="color:#C6E5FF;font-size:26px;">'+this.key+'</p>';
},
style: {
fontSize: '38px',
fontWeight: '400',
textOutline: 'none'
}
},
states:{
halo:{
pacity:1
}
},
borderWidth: 0.5,
center: ['50%', '40%']
}
},
series: [
{
type: 'pie',
size:'68%',
zIndex:1,
data: [
{'name':'demo2',y:30,color:'rgba(0,120,244,9)'},
{'name':'demo1',y:70,color:'rgba(255,46,10,0.85)'},
]
},
{
type: 'pie',
depth:45,
zIndex:2,
size:'68%',
dataLabels:{
enabled:false
},
data: [
{'name':'demo2',y:30,color:'rgba(0,120,244,9)'},
{'name':'demo1',y:70,color:'rgba(239,228,56,0)'},
]
}
]
};
// 圖表初始化函數
var chart = Highcharts.chart('container', options);
</script>
</body>
</html>
