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

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;
}

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

微信图片_20220429165453.png 微信图片_20220429165447.png

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