1.利用echarts实现
- 直接上源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>扇形图实例</title>
</head>
<body>
</body>
</html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="UTF-8" />
<title>Pie</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.1/echarts.min.js"></script>
<style type="text/css">
html {
height: 100%;
margin: 0;
}
body {
height: 100%;
margin: 0;
}
#main{
background-color: rgb(2,15,14, 0.7);
}
</style>
</head>
<body>
<div id="main" style="width: 100%;height:100%;">
</div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var data = {
"data_pie" : [
{"value":50, "name":"#1"},
{"value":50, "name":"#2"},
{"value":50, "name":"#3"},
{"value":50, "name":"#4"},
{"value":50, "name":"#5"}
]
};
myChart.setOption({
title: {
text: '扇形图展示',
subtext: '测试数据',
left: 'center'
},//标题
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},//鼠标移入属性
series: [
{
name:'第一圈',
type:'pie',
label: {
normal: {
show: false,
}
},
center: ['50%','60%'],
radius: ['0%', '40%'],
data: data.data_pie
},
{
name: '第二圈',
type: 'pie',
radius: ['40.2%', '55%'],
label: {
normal: {
show: false,
}
},
center: ['50%','60%'],
data: data.data_pie
},
{
name: '第三圈',//pie名称
type: 'pie',//形状类型
radius: ['55.2%','80%'],//扇形
center: ['50%', '60%'],//图形位置
data: data.data_pie//数据源
}
]
});
</script>
</body>
</html>
-
效果如图：
2.css3实现
- 源码如下：
<!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>使用css3绘制任意角度扇形</title>
<style>
.pie {
position: relative;
margin: 1em auto;
padding: 0;
width: 32em;
height: 32em;
border-radius: 100%;
list-style: none;
overflow: hidden;
border: 1px solid #eeeeee;
transform: rotate(0deg); /*针对mac safari浏览器兼容*/
}
.pie .pie2 {
position: relative;
margin-top: 1em;
margin-right: auto;
margin-bottom: 1em;
margin-left: auto;
padding-top: 75px;
padding-right: 75px;
padding-bottom: 0px;
padding-left: 0px;
width: 25em;
height: 25em;
border-radius: 100%;
list-style: none;
overflow: hidden;
background-color: rgba(254,254,5,0.05);
border: 1px solid yellow;
transform: rotate(0deg); /*针对mac safari浏览器兼容*/
}
.pie .pie2 .pie3{
position: relative;
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 92px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: 18em;
height: 18em;
border-radius: 100%;
list-style: none;
overflow: hidden;
background-color: rgba(152,203,204,0.05);
border: 1px solid rgba(152,203,204,0.7);
transform: rotate(0deg); /*针对mac safari浏览器兼容*/
}
.slice {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
transform-origin: 0% 100%;
}
.slice-1 {
border: 1px solid #eeeeee;
}
.slice-2 {
transform: rotate(-72deg) skewY(-54deg);
border: 1px solid #eeeeee;
}
.slice-3 {
transform: rotate(-108deg) skewY(-54deg);
border: 1px solid #eeeeee;
}
.slice-4 {
transform: rotate(-144deg) skewY(-54deg);
border: 1px solid #eeeeee;
}
.slice-5 {
border: 1px solid #eeeeee;
transform: rotate(-180deg) skewY(-54deg);
}
.slice-6 {
border: 1px solid #eeeeee;
transform: rotate(-216deg) skewY(-54deg);
}
.slice-7 {
border: 1px solid #eeeeee;
transform: rotate(-252deg) skewY(-54deg);
}
.slice-8 {
border: 1px solid #eeeeee;
transform: rotate(-288deg) skewY(-54deg);
}
.slice-9 {
border: 1px solid #eeeeee;
transform: rotate(-324deg) skewY(-54deg);
}
.slice-10 {
border: 1px solid #eeeeee;
transform: rotate(-360deg) skewY(-54deg);
}
.slice2-1 {
border: 1px solid yellow;
}
.slice2-2 {
transform: rotate(-72deg) skewY(-54deg);
border: 1px solid yellow;
}
.slice2-3 {
transform: rotate(-108deg) skewY(-54deg);
border: 1px solid yellow;
}
.slice2-4 {
transform: rotate(-144deg) skewY(-54deg);
border: 1px solid yellow;
}
.slice2-5 {
border: 1px solid yellow;
transform: rotate(-180deg) skewY(-54deg);
}
.slice2-6 {
border: 1px solid yellow;
transform: rotate(-216deg) skewY(-54deg);
}
.slice2-7 {
border: 1px solid yellow;
transform: rotate(-252deg) skewY(-54deg);
}
.slice2-8 {
border: 1px solid yellow;
transform: rotate(-288deg) skewY(-54deg);
}
.slice2-9 {
border: 1px solid yellow;
transform: rotate(-324deg) skewY(-54deg);
}
.slice2-10 {
border: 1px solid yellow;
transform: rotate(-360deg) skewY(-54deg);
}
.slice3-1 {
border: 1px solid rgba(152,203,204,0.7);
}
.slice3-2 {
transform: rotate(-72deg) skewY(-54deg);
border: 1px solid rgba(152,203,204,0.7);
}
.slice3-3 {
transform: rotate(-108deg) skewY(-54deg);
border: 1px solid rgba(152,203,204,0.7);
}
.slice3-4 {
transform: rotate(-144deg) skewY(-54deg);
border: 1px solid rgba(152,203,204,0.7);
}
.slice3-5 {
border: 1px solid rgba(152,203,204,0.7);
transform: rotate(-180deg) skewY(-54deg);
}
.slice3-6 {
border: 1px solid rgba(152,203,204,0.7);
transform: rotate(-216deg) skewY(-54deg);
}
.slice3-7 {
border: 1px solid rgba(152,203,204,0.7);
transform: rotate(-252deg) skewY(-54deg);
}
.slice3-8 {
border: 1px solid rgba(152,203,204,0.7);
transform: rotate(-288deg) skewY(-54deg);
}
.slice3-9 {
border: 1px solid rgba(152,203,204,0.7);
transform: rotate(-324deg) skewY(-54deg);
}
.slice3-10 {
border: 1px solid rgba(152,203,204,0.7);
transform: rotate(-360deg) skewY(-54deg);
}
</style>
</head>
<body>
<ul class='pie'>
<li class='slice-1 slice'> </li>
<li class='slice-2 slice'> </li>
<li class='slice-3 slice'> </li>
<li class='slice-4 slice'> </li>
<li class='slice-5 slice'> </li>
<li class='slice-6 slice'> </li>
<li class='slice-7 slice'> </li>
<li class='slice-8 slice'> </li>
<li class='slice-9 slice'> </li>
<li class='slice-10 slice'></li>
<ul class='pie2'>
<li class='slice2-1 slice'> </li>
<li class='slice2-2 slice'> </li>
<li class='slice2-3 slice'> </li>
<li class='slice2-4 slice'> </li>
<li class='slice2-5 slice'> </li>
<li class='slice2-6 slice'> </li>
<li class='slice2-7 slice'> </li>
<li class='slice2-8 slice'> </li>
<li class='slice2-9 slice'> </li>
<li class='slice2-10 slice'></li>
<ul class='pie3'>
<li class='slice3-1 slice'> </li>
<li class='slice3-2 slice'> </li>
<li class='slice3-3 slice'> </li>
<li class='slice3-4 slice'> </li>
<li class='slice3-5 slice'> </li>
<li class='slice3-6 slice'> </li>
<li class='slice3-7 slice'> </li>
<li class='slice3-8 slice'> </li>
<li class='slice3-9 slice'> </li>
<li class='slice3-10 slice'></li>
</ul>
</ul>
</ul>
</body>
</html>
-
效果图如下：
版权声明：本文为xiaobangsky原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。