自定义label饼状图echarts 饼配置项内容和展示

自定义label 图片

      var uploadedDataURL = '/asset/get/s/data-1628214125329-rqaoNNySi.png';

var img = '/asset/get/s/data-1628212428005-4Lcn5RtIF.png';

// var img = 'data:image/png;base64,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'

var trafficWay = [
    {
        name: '山东',
        value: 20,
    },
    {
        name: '北京',
        value: 10,
    },
    {
        name: '广州',
        value: 30,
    },
    {
        name: '上海',
        value: 40,
    },
    {
        name: '杭州',
        value: 40,
    },
    {
        name: '天津',
        value: 40,
    },
];
var nameArray = trafficWay.map((item) => {
    return item.name;
});

var data = [];
var color = ['#2ca1ff', '#febe13', '#65e5dd', '#7b2cff', '#fd5151', '#f071ff'];
for (var i = 0; i < trafficWay.length; i++) {
    data.push(
        {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
                normal: {
                    borderWidth: 8,
                    shadowBlur: 20,
                    borderRadius: 20,
                    borderColor: color[i],
                    shadowColor: color[i],
                },
            },
        },
        {
            value: 8,
            name: '',
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                    },
                    labelLine: {
                        show: false,
                    },
                    color: 'rgba(0, 0, 0, 0)',
                    borderColor: 'rgba(0, 0, 0, 0)',
                    borderWidth: 0,
                },
            },
        }
    );
}
var seriesOption = [
    {
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [105, 109],
        hoverAnimation: false,
        center: ['50%', '50%'],
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'outside',
                    color: '#ddd',
                    formatter: function (params) {
                        var percent = 0;
                        var total = 0;
                        for (var i = 0; i < trafficWay.length; i++) {
                            total += trafficWay[i].value;
                        }
                        percent = ((params.value / total) * 100).toFixed(0);
                        if (params.name !== '') {
                            //                       var htmlStr = "<div>";
                            // htmlStr +=' {img1|}';
                            // htmlStr += "</div>";
                            // return htmlStr;
                            return '{img1|}' + '{font1|' + percent + '%}' + '\n' + '{font2|' + params.name + '}';
                        } else {
                            return '';
                        }
                    },
                    rich: {
                        font1: {
                            color: '#ffffff',
                            fontWeight: 'bold',
                            fontSize: '22',
                        },
                        font2: {
                            color: 'rgba(255,255,255,0.8)',
                            textAlign: 'left',
                        },
                        img1: {
                            backgroundColor: {
                                image: uploadedDataURL,
                            },
                            height: 25,
                            width: 25,
                        },
                    },
                },
                labelLine: {
                    length: 50,
                    // length2:100,
                    show: true,
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.0)',
                    },
                },
            },
        },
        data: data,
    },
];
option = {
    backgroundColor: '#0A2E5D',
    color: color,
    graphic: {
        elements: [
            {
                type: 'image',
                z: 3,
                style: {
                    image: img,
                    width: 210,
                    height: 210,
                },
                left: 'center',
                top: 'center',
            },
        ],
    },
    tooltip: {
        show: false,
    },
    // legend: [
    //     {
    //     icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
    //     // orient: 'vertical',
    //     // x: 'left',
    //     data:nameArray.slice(4,8),
    //     // left: '80%',
    //     // top: 'center',
    //     // align: 'left',
    //     // textStyle: {
    //     //   color: "#fff"
    //     // },
    //     // itemGap: 20
    // },
    // {
    //     icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
    //     // orient: 'vertical',
    //     // x: 'left',
    //     data:nameArray.slice(0,4),
    //     left: '70%',
    //     top: 'center',
    //     align: 'left',
    //     textStyle: {
    //       color: "#fff"
    //     },
    //     itemGap: 20
    // },
    // ],
    toolbox: {
        show: false,
    },
    series: seriesOption,
};