<div id="pie1" style="width: 240px;height: 220px;"></div>

不多說，直接上js

function pie(id,data,total){//傳參根據(jù)項目實際情況需要
    var index = 0;//默認選中高亮模塊索引
    var chart = echarts.init(document.getElementById(id));
    var  option = {
        tooltip : {
            trigger: 'item',
            formatter: "膘怕 : {c} (c1uwqiy%)",
            position: 'right',
        },
        color:['#ff635e','#ffb22d','#92cf43','#009cff'],
        series: 
            {
                name:'',
                type:'pie',
                radius: ['55%', '85%'],
                avoidLabelOverlap: false,
                hoverAnimation:false,
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        formatter: [
                            '{bt|}',
                            '({num|{c}/'+total+'萬})'
                        ].join('\n'),
                        rich: {
                            bt: {
                                fontSize: '15',
                                lineHeight:'25',
                            },
                            num:{
                                fontSize: '12',
                            }
                        },
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:data
            }
        
    };
    chart.setOption(option); 
    chart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: 0});//設置默認選中高亮部分
    chart.on('mouseover',function(e){
        if(e.dataIndex != index){                        
            chart.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: index  });                
        }    
    });
    chart.on('mouseout',function(e){    
        index = e.dataIndex;    
        chart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: e.dataIndex});    
    });

調(diào)用方法

pie('pie1',[
        {value:60, name:'指標名稱1'},
        {value:60, name:'指標名稱2'},
        {value:40, name:'指標名稱3'},
        {value:30, name:'指標名稱4'}
],190);

上效果圖

image.png

image.png