echarts实现在饼图环形中间显示切换各项数据

不多说，直接上js

function pie(id,data,total){//传参根据项目实际情况需要
    var index = 0;//默认选中高亮模块索引
    var chart = echarts.init(document.getElementById(id));
    var  option = {
        tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)",
            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|{b}}',
                            '({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});    
    });

调用方法

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

上效果图

image.png

image.png