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 繪制內(nèi)心圓以及在圓上旋轉(zhuǎn)的圓點+拖尾
        <div class="partyCompositionCircularList">
        //  內(nèi)心圓中的文案
        </div>
    </div>
</div>

最外面一層餅圖+淡一點的環(huán)形：（代碼）

function academicCompositionChat(){
    let Chart = echarts.init(document.getElementById('academicCompositionChat'));
    let option = {
        title:{
              text: '黨員學(xué)歷組成情況',
               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);
}

圓點在圓的邊緣上拖尾旋轉(zhuǎn)：（代碼）

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軌道（內(nèi)心圓）
    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();
    //轉(zhuǎn)動速度
    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); //第四個參數(shù)配合createLinearGradient里的參數(shù)控制拖尾的長度
    ctx.lineWidth = 3;
    ctx.strokeStyle = gr;
    ctx.stroke();
  
    //繪制拖尾前面的圓點
    ctx.beginPath();
    ctx.translate(40, 0);
    ctx.arc(-45, 45, 3, 0, 2 * Math.PI, false);//前兩個參數(shù)可以控制圓點的位置
    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

如果這篇文章對你有用話的炼杖，請帥哥美女點個贊Ｇ衅健Ｍ烁觥Ｖ瓷摹（嚴禁轉(zhuǎn)載）