Echars 饼图添加纯色背景

先是要求图片：

再就是我的实现：

实现思路是嵌套饼图，内层一个实心的纯色无数据饼图，中间是数据图，外层是一个纯色无数据环图。

把代码贴出来：

var option1 = {
            title: {
                text:'任务分布占比',
                left:'15%',
                top:'41%',
                padding:[0,0],
                textStyle:{
                    color:'black',
                    fontSize:18,
                    fontWeght:'normal',
                    fontFamily:'SimHei',
                    align:'center'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                y: 'center',
                left: '60%',  //图例距离左的距离
                icon:"rect",
                itemGap: 20,//图例之间的间距
                itemWidth:10,
                itemHeight:10,
                formatter:function(name){
                    var total = 0;
                    var target;
                    for (var i = 0, l = pieData.length; i < l; i++) {
                        total += pieData[i].value;
                        if (pieData[i].name === name) {
                            target = pieData[i].value;
                        }
                    }
                    var arr;
                    if(total === 0){
                         arr = [
                                   '{a|'+name+'}',
                                   '{b|'+0+'%}'
                               ]
                    }else{
                        arr = [
                                '{a|'+name+'}',
                                '{b|'+((target/total)*100).toFixed(2)+'%}'
                        ]
                    }
                     
                    return arr.join('    ');
                },
                textStyle:{
                    rich:{
                        a:{
                            fontSize:14
                        },
                        b:{
                            fontSize:18,
                            fontWeight: '600'
                        }
                    }
                },
                data:['已完成任务','进行中任务','未开始任务','异常任务　']
            },
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['50%', '62%'],
                    center: ['27%', '45%'],
                    avoidLabelOverlap: false,
                    silent: true,
                    label: {
                        normal: {
                            show: false,
                            position: 'inner'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'normal'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:pieData
                },
                {
                    type:'pie',
                    silent: true,
                    radius: ['0%', '49.9%'],
                    center: ['27%', '45%'],
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[ {   
                        value:0,
                          name:'#F6FBFF',
                          itemStyle : {
                            normal : {
                                color : '#F6FBFF'
                            }
                          }
                      }]
                },{
                    type:'pie',
                    silent: true,
                    radius: ['62.1%', '75%'],
                    center: ['27%', '45%'],
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    itemStyle:{
                        normal: {
                            shadowBlur: 2,
                            shadowOffsetX: 0,
                            shadowColor: '#D3E8FB'
                        },
                        emphasis: {
                            shadowBlur: 1,
                            shadowOffsetX: 0,
                            shadowColor: '#D3E8FB'
                        }
                    },
                    data:[ {   
                        value:0,
                          name:'#F6FBFF',
                          itemStyle : {
                            normal : {
                                color : '#F6FBFF'
                            }
                          }
                      }]
                }
            ]
        };

　　在开发中遇到了一个问题

我想在外层圈加一个边框实现预想效果

不知道12点位置有条竖线无法解决，最终考虑使用阴影渲染解决问题

itemStyle:{
                        normal: {
                            shadowBlur: 2,
                            shadowOffsetX: 0,
                            shadowColor: '#D3E8FB'
                        },
                        emphasis: {
                            shadowBlur: 1,
                            shadowOffsetX: 0,
                            shadowColor: '#D3E8FB'
                        }
                    },

原文地址：https://www.cnblogs.com/zyrush/p/11926043.html

Echars 饼图 添加纯色背景

Echars 饼图添加纯色背景