在這里插入圖片描述
基于案例修改后效果圖如下：
image
image
image
image
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>環(huán)形圖</title>
<style>
.container {
width: 600px;
margin: 100px auto;
padding: 20px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
border-radius: 12px;
text-align: center;
}
h1 {
border-bottom: 3px solid #000;
padding-bottom: 12px;
}
</style>
</head>
<body>
<div class="container">
<h1>游客渠道來源</h1>
<div id="highchart"></div>
</div>
<script src="./js/jquery.js"></script>
<script src="./js/highchart.js"></script>
<script>
// highcharts 配置選項(xiàng)
var option = {
// 設(shè)置圖例
legend: {
// 設(shè)置圖例圓角為 0
symbolRadius: 0,
},
// 圖表標(biāo)題
title: {
// 是否設(shè)置浮動(dòng)
floating: true,
// 是否使用 HTML 標(biāo)簽
useHTML: true,
// 格式化顯示內(nèi)容
text: "總?cè)藬?shù)：1924",
// 設(shè)置標(biāo)題樣式
style: {
fontSize: "18px",
color: "#809CC1",
textAlign: "center",
fontWeight: "normal"
},
},
// 隱藏 highchart標(biāo)簽
credits: {
enabled: false,
},
// 配置環(huán)形圖項(xiàng)
plotOptions: {
pie: {
// 是否允許點(diǎn)擊
allowPointSelect: true,
// 鼠標(biāo)移動(dòng)到圓環(huán)上變手指
cursor: "pointer",
// 圓環(huán)大小
size: 220,
dataLabels: {
// 格式化數(shù)據(jù)標(biāo)簽顯示的內(nèi)容
format: "<b>{point.name}:</b>{point.y}",
// 設(shè)置鼠標(biāo)標(biāo)簽離圓環(huán)的距離
distance: 10,
},
// 是否顯示圖例
showInLegend: true,
},
},
// 配置數(shù)據(jù)項(xiàng)
series: [
{
// 圖表類型（環(huán)形圖）
type: "pie",
// 內(nèi)圓大小
innerSize: "70%",
// 數(shù)據(jù)名字（數(shù)據(jù)類型）
name: "總?cè)藬?shù)",
// 數(shù)據(jù)
data: [
{ name: "涂牛", y: 399, color: "#E8110F" },
{ name: "去哪兒", y: 197, color: "#FBC723" },
{ name: "攜程", y: 254, color: "#1B6AA5" },
{ name: "飛豬", y: 358, color: "#fed95c" },
{ name: "窗口購票", y: 508, color: "#fa6e57" },
{ name: "東山旅行", y: 208, color: "#f69e53" },
],
},
],
};
$("#highchart").highcharts(option, function (c) {
// 回調(diào)函數(shù)設(shè)置標(biāo)題居中
var centerY = c.series[0].center[1],
titleHeight = parseInt(c.title.styles.fontSize);
c.setTitle({
y: centerY + titleHeight / 2 ,
});
});
</script>
</body>
</html>
