描边环形图

描述:当前是关于Echarts图表中的 饼图 示例。
 
            var img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEAAABBCAYAAACO98lFAAAHiUlEQVR4nN2bCbRVUxzGf6+Z0ItisSJjWFkhc2spYSXiRabMQ2UWQsZMGZIhq0yFTGUIafVMJZ7MMqbQpFhlDKXBKk3Wv/Udzjvdc84+9+7bffnWOqve3fvus+939v7v7z+csjGHH0CJ0BTYH9gIaAwsBGYD04H5ulYWe2odKquoUyoGgMXAZKANcASwO7ACmAl8DUwEPgY+A/4q5kRKSYL9sGnAt8CHwMVAd2AvXYa/gVnAy8CrwCTgF98TqeV7wDxgT38KcA6wK/AEsFzD1AN2BHoBrwPjgfuBdj4nUBNICOMr4DTgQP0/CiPkXOBNYBRwqI+b1jQSArwDtAceiGm3eXcWEUOBPQq5WU0lwTAXOA84A/gtpk89tY/XdsoLNYGEspT2x7QqPkjo01Cr5mFg46wTKDUJ5bL656f0m6xjtDKlXzfZi71S+lVDKUmwJ/YccAhwL3BJSv/fgS7A8JR+dsKMBY5xnUipSLAV8AxwcOizu4G+Kd+zo/Nk4A6H8UcAh7tMphhiaTOgQhNeqn+Xh/5eBVwryRyFfd4EuED6IQ69JamvSOhjtmaQlOfspAn7JmEL7dvWBYxhVr4FcCrwQ0K/K7WleiT02Rp4yVyEJKXpcztsqj1eCAEBzGdY4NDvLP3IJLRK2z6+SNhABquNh7Gu0lNe6NjfJPWvKX1O0crKCR8kNAJGR4xcvuinKwumO5wshjuBbYtBQrmka3sPBDykVZAPnnLQEE21LWpHGwohwVTa04CPqMwI7e9C0NthW3SRLqmGfEmwU+VJoGOBEze84aAYXTBFY6Xhwmh7PiQ0AF4AjvI08e4JDlJWPCIdkoSOURc8Kwn1tf8qPEzYQmidgO88jBXgbXmUabg83J6FhDL57j5WABIvMz2NFWAZMM6hn6nV3YI/spBg1vvEvKe3JtpKW/j2Xz5x6FNHXulquEygTL56t8LmtgZqi9RhCo74wgSHUwKt6PVwJGFQIVEbB5ygbebLj7F8xecO/XYB9sGBhLs8HV9pOAl40NNYdjp879CvbuDJxpFQLvnay9PEXNBN4XQfSHSdQ9iZBBLapfjqxYKF0wd6GPtnx37bjz2ifaM4Et6Xw1EKmKK7p8D7uuYwbSU0iSNhrgTFZSUi4iKg/1q4j4UAGrsYxh4SIa4Y6miY0nC5Q8wxDnUz9C1zOSItln8ksMih7wAZuIoM+zIJFnO8Lo/vNc7Qd5WrWntFTsechD79Q6fJl4rrzcowmTjcCFyT8TuNMvR1WgkB3pXU/DRH2w05TpNJUmVTMtwjDjcrXuCKlhn6Oq+EAF8AXYExoc966WnlwkRJ41wZ5qy4XTUMaSjPEOucB/yRj/MyQ1LXwlnXyw4kwSTs0Z6IGCAtkQRTgZs4jmer9cd89fq8jDGFqbIRo7LmCXPgXiVmhsS050rqxGFSh8qqJWszDfejiHurwHFszoMVkYqiQdhFdsBkSpCL/Fk5gLEexhqiscIwkndy/P4ynWIlScjOkdc4xqFvEsqkYYLsc10HexHGVzLcJctK/6bJv1LgOPUUlNlPKfks9uBTlRGWtD5hkZToswWOU18Vb31zJVYS8HrQ5HI6NNZpUAwsU7XaEv2bL7bX5YqpqpBZjTTD+JAYy6LAssJqFs4EHi3iPaIYGM56x5GwsfIL3VUe95r2XbGwUkQMXQsEfB0t+clFggUgX5QqDNBMRLQt8gR9htjicB/wZ7gtSsL+IiDXj91IUvnIIk/yfNUvFQOzVCtVDQEJtVUQVZliYIyIkcDVRaUBLnUozsoHZgv+iH4vvBK6OvrhJlJu0dFWTIPZ23OI7aW42GVAwgqVxyZVjUZxHFCl0pos4awssBjFrZ7GapmrNoHISrDg6ukZo0FW/XGbjtFOcmB8wsprtvI03jYqKdg32hA1jNPk+2d9saKdlptdx8p2FALLGN8EfCNb5QsNVWG3YxIJKAiSb6D0IJXe2DbpmdFmbC7VOFr1yX08J2oDNJPz9u8BECebJygJ+6y0eVa01jVX1zQVY8yXdV4Zuv9OIqu5x6WfhuaSAvawZ0XfhitXVep6ihse5lCKvy7DHvbZ4ZWwnYTEnv/jHx3F3iYNAptghuz5FAKyZKHWFVgJYj8joZbi+rulTPw91Qnf4Fh3XNNhwZiTO1RWzTcCdkiq+xUWKTk7SbZiS1Wf+kisFIKFeoBZSwCfUo51tYE2EvZ0kMtTIpmnBSriaCV3u2qt/ez/ME6pwT4KuLq+RTtc1bNLgg+MhBkO+z2uLG6ZCigPlMgaVcQoFCrFGSnJ3lFbFLn5nXUEJ+FpxS0Wh/vY6TBBUZ2k2mKXyPBIkbC1tlgbSVRLtmyYZ2HWCukKiwp/pNeFP4ypWh0Xekdq8xztwyTG1ijgsImtkjBamqvuV56Xa8JkpQo0Z4q4Ojp5WqsQ3FTa+tIjDSXEGsgBW6Bgh73t8pOSNRP1oxeHXh1Ogm3L44HH5SsEqGYDcpGAiOip5VWh8NoisTvYkYBcWK4nOS5hSzWSOPNRz4Derq2Qs9RCBFSzAVFEl6jJ5EJD4FlhT79auMsDLL1mNsqSPOblVrMB1QD8A1xujbKcvHFsAAAAAElFTkSuQmCC'
    var data = [{
        name: '2020',
        value: 120
    }, {
        name: '2019',
        value: 85
    },];    
    let color2 = ['rgba(0,150,254,1)', 'rgba(0,204,254,0.3)', 'rgba(0,255,217,0.3)', 'rgba(138,255,0,0.3)', 'rgba(29, 246, 255, 0.3)'];
    let color1 = ['rgba(0,150,254,.2)', 'rgba(0,204,254,0)', 'rgba(0,255,217,0)', 'rgba(138,255,0,.3)', 'rgba(29, 246, 255,.3)'];
    let baseData1 = [];
    let baseData2 = [];
    for (var i = 0; i < data.length; i++) {
        baseData1.push({
            value: data[i].value,
            name: data[i].name,
            itemStyle: {
                normal: {
                    color: color1[i],

                }
            }
        }, {
            value: 1,
            itemStyle: {
                normal: {
                    color: 'transparent',
                    borderColor: 'transparent',

                }
            }
        });
    }
    for (var i = 0; i < data.length; i++) {
        baseData2.push({
            value: data[i].value,
            name: data[i].name,
            itemStyle: {
                normal: {
                    color: color2[i],

                }
            }
        }, {
            value: 1,
            itemStyle: {
                normal: {
                    color: 'transparent',
                    borderColor: 'transparent',

                }
            }
        });
    }
    option = {
        backgroundColor: "black",
        graphic: {
            elements: [{
                name: '中间图片',
                type: "image",
                z: 3,
                style: {
                    image: img,
                    width: 250,
                    height: 250
                },
                position: [420, 300]
            }]
        },
        series: [{
                type: 'pie',
                hoverAnimation: false,
                radius: ['68%', '-100%'],
                center: ['50%', '50%'],
                tooltip: {
                    show: false
                },
                label: {
                    normal: {
                        show: false
                    }
                },
                data: baseData1
            },
            {
                type: 'pie',
                hoverAnimation: false,
                color: color1,
                radius: ['68%', '70%'],
                center: ['50%', '50%'],
                tooltip: {
                    show: false
                },
                label: {
                    show: false,
                    position: 'center'
                },
                data: baseData2
            },
        ]
    };