在这里插入图片描述
基于案例修改后效果图如下：
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>环形图</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 配置选项
var option = {
// 设置图例
legend: {
// 设置图例圆角为 0
symbolRadius: 0,
},
// 图表标题
title: {
// 是否设置浮动
floating: true,
// 是否使用 HTML 标签
useHTML: true,
// 格式化显示内容
text: "总人数：1924",
// 设置标题样式
style: {
fontSize: "18px",
color: "#809CC1",
textAlign: "center",
fontWeight: "normal"
},
},
// 隐藏 highchart标签
credits: {
enabled: false,
},
// 配置环形图项
plotOptions: {
pie: {
// 是否允许点击
allowPointSelect: true,
// 鼠标移动到圆环上变手指
cursor: "pointer",
// 圆环大小
size: 220,
dataLabels: {
// 格式化数据标签显示的内容
format: "<b>{point.name}:</b>{point.y}",
// 设置鼠标标签离圆环的距离
distance: 10,
},
// 是否显示图例
showInLegend: true,
},
},
// 配置数据项
series: [
{
// 图表类型（环形图）
type: "pie",
// 内圆大小
innerSize: "70%",
// 数据名字（数据类型）
name: "总人数",
// 数据
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) {
// 回调函数设置标题居中
var centerY = c.series[0].center[1],
titleHeight = parseInt(c.title.styles.fontSize);
c.setTitle({
y: centerY + titleHeight / 2 ,
});
});
</script>
</body>
</html>
