多层饼图（球形饼图）+ 圆点在圆的边缘上拖尾旋转

HTML布局：

<div class="partyCompositionChat">
	<div class="wh-100" id="academicCompositionChat"></div>//两层饼图放进echarts里绘制，wh-100 是宽高百分百
	<div class="partyCompositionCircular">
		<canvas id="canvas" width="100" height="100"/></canvas> //canvas 绘制内心圆以及在圆上旋转的圆点+拖尾
		<div class="partyCompositionCircularList">
		//	内心圆中的文案
		</div>
	</div>
</div>

最外面一层饼图+淡一点的环形：（代码）

function academicCompositionChat(){
	let Chart = echarts.init(document.getElementById('academicCompositionChat'));
	let	option = {
		title:{
		      text: '党员学历组成情况',
		       textStyle: {
		      color: '#2E72E3',
		      fontSize: 20,
		    },
		    left: 'center',
		    y: 'bottom',
		  },
		legend: {
			width: 150,
	       itemWidth: 9,
		    itemHeight: 9,
		    icon: 'circle',
		    y: 'bottom',
		    padding: [0, 0, 50, 0],
		    textStyle: {
		      fontSize: 16,
		      fontFamily: 'Adobe Heiti Std',
		      color: '#fff'
		    }
	    },
	    series: [
	        {
	            name: '',
	            type: 'pie',
	            selectedMode: 'single',
	            radius: ['60%', '71%'],
	            center: ['50%', '35%'],
	            label: {
	                show: false
	            },
	            zlevel: 1,
	            labelLine: {
	                show: false
	            },
	            color: ['#0B4876'],
	            data: [
	                {value: 0},
	            ]
	        },
	        {
	            name: '',
	            type: 'pie',
	            radius: ['70%', '80%'],
	            center: ['50%', '35%'],
	            label: {
	               show: false
	            },
	            color: ['#ffffff', '#90E446', '#21BAD6', '#E4A746'],
	            itemStyle:{
	                borderWidth: 5,
	                borderColor: '#063065',
	            },
	            data: [
	                {value: 50, name: '硕士'},
	                {value: 50, name: '博士'},
	                {value: 100, name: '专科'},
	                {value: 100, name: '本科'},
	            ]
	        }
	    ]
    };
	Chart.setOption(option);
}

圆点在圆的边缘上拖尾旋转：（代码）

function draw(){
	var c   = document.getElementById("canvas");
	var ctx = c.getContext("2d");
	ctx.clearRect(0, 0, 100, 180);
    ctx.save();
    ctx.translate( 50, 50);
  
    //绘制earth轨道（内心圆）
    ctx.beginPath();
    ctx.arc(0, 0, 45, 0, 2 * Math.PI, true);
    ctx.fillStyle = 'rgba(33, 186, 214, 0.2)';
    ctx.strokeStyle = "rgba(33, 186, 214, 0.2)";
    ctx.fill();
    ctx.stroke();
    let time = new Date();
  
  //绘制拖尾
    ctx.beginPath();
    //转动速度
    ctx.rotate(2 * Math.PI / 6 * time.getSeconds() + 2 * Math.PI / 6000 * time.getMilliseconds());
    //控制渐变颜色
    var gr = ctx.createLinearGradient(60, 45, 90, 0);
    gr.addColorStop(0, '#21BAD6');
    gr.addColorStop(1, 'transparent');
    
    ctx.arc(0, 0, 45, 30, Math.PI / 2, false); //第四个参数配合createLinearGradient里的参数控制拖尾的长度
    ctx.lineWidth = 3;
    ctx.strokeStyle = gr;
    ctx.stroke();
  
  	//绘制拖尾前面的圆点
    ctx.beginPath();
    ctx.translate(40, 0);
    ctx.arc(-45, 45, 3, 0, 2 * Math.PI, false);//前两个参数可以控制圆点的位置
    ctx.fillStyle = '#21BAD6';
    ctx.strokeStyle = "#21BAD6";
    ctx.fill();
    ctx.stroke();
	//后面这两行代码非常重要，不能忽略
    ctx.restore();
    requestAnimationFrame(draw);
}

把它们组合在一起的样式

.partyCompositionChat{
	width: 30%;
	height: 100%;
	position: relative;
}

.partyCompositionCircular{
	width: 100px;
    height: 100px;
	position: absolute;
    left: 27%;
	top: 58px;
}


.partyCompositionCircularList{
	width: 50%;
	height: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 24px;
	font-family: Adobe Heiti Std;
	font-weight: normal;
	color: #B8D3F1;
	overflow: hidden;
	line-height: 25px;
}

.partyCompositionCircularList .partyOrganizationChatTextItem{
	padding: 0;
	font-size: 18px;
}

效果图：这是不同时间的两张效果图

如果这篇文章对你有用话的，请帅哥美女点个赞！！！（严禁转载）