echarts设置内环颜色，在内环添加文字

echarts设置内环颜色，在内环添加文字

效果如下：

1、通过两个叠加的圆达到内外环不同颜色的效果

	series: [
        {
            color:['#0c2968'],  //内圆颜色
            type: 'pie',
            radius: '60%',  
            center:['50%','50%'],  //设置圆的位置，两个圆的位置必须一致
            data: [
                {value: 100, name: ''},  //只设置一个值占整圆
            ],
            emphasis: {
                scale: false,  //鼠标悬停到内圆时，取消放大效果
            },
            label:{
                show:false,  //关闭牵引线
            }
        },
        {
            type: 'pie',
            radius: ['60%', '95%'],  //第一个值必须与内圆的radius一致
            center:['50%','50%'],  
            avoidLabelOverlap: false,
            label: {  //设置牵引线的文字
                show: true,
                fontSize:12,
                formatter: `{b}: {c}`
            },
            //设置牵引线长度
            labelLine: {
                show: true,
                length: 35,
                length2: 10,
            },
            data: [
                {value: 535, name: '在途超时工单'},
                {value: 1048, name: '在途工单'},

            ]
        }
    ]

2、内环中间添加文字

graphic:[
    {
        type:'text',
        left:'center',
        top:'42%',
        z:10,  
        style:{
            fill:'#fff', //填充色，即文字颜色
            fontSize:13,  //文字大小
            text:'在途超时占比'
        }
    },
    {
        type:'text',
        left:'center',
        top:'56%',  
        z:10,  
        style:{
            fill:'#fff',
            text:'51.04%',
            fontSize:15,
            font: '30px Microsoft YaHei'
        }
    }
],

3、完整代码

let option = {
    color:['#ffcc33','#ff6633'],  //外环颜色数组   
    graphic:[
        {
            type:'text',
            left:'center',
            top:'42%',
            z:10,
            style:{
                fill:'#fff',
                fontSize:13,
                text:'在途超时占比'
            }
        },
        {
            type:'text',
            left:'center',
            top:'56%',
            z:10,
            style:{
                fill:'#fff',
                text:'51.04%',
                fontSize:15,
                font: '30px Microsoft YaHei'
            }
        }
    ],
    series: [
        {
            color:['#0c2968'],
            type: 'pie',
            radius: '60%',
            center:['50%','50%'],
            data: [
                {value: 100, name: ''},
            ],
            emphasis: {
                scale: false
            },
            label:{
                show:false
            }
        },
        {
            type: 'pie',
            radius: ['60%', '95%'],
            center:['50%','50%'],
            avoidLabelOverlap: false,
            label: {
                show: true,
                fontSize:12,
                formatter: `{b}: {c}`
            },
            labelLine: {
                show: true,
                length: 35,
                length2: 10,
            },
            data: [
                {value: 535, name: '在途超时工单'},
                {value: 1048, name: '在途工单'},

            ]
        }
    ]
}