echarts大屏实现饼图图例自定义展示

(function () {
//     var bown = document.getElementsByClassName("marin")
//     //获取内容盒子
//     var cnener = document.getElementsByClassName("pak2")
//     //console.log(cnener)
//     //遍历每个按钮为其添加点击事件
this.timeOut=setInterval(()=> {
    setTimeout(ClickTime,3000);
    setTimeout(ClickIntel,6000);
    setTimeout(ClickPay,9000)
},12000)
})();

function ClickTime(){
    var cnener = document.getElementsByClassName("pak2")
    $.ajax({
        method:"get",
        url:"https://",//数据接口地址
        dataType:"json",
        data:{token:token},
        success: function (queryOrderHourCountBySevenDays){
            var gastion= "近7天消费时段分布情况";
            var data=queryOrderHourCountBySevenDays.datas;
            $('#SJtitle2').text(gastion)
            payChart(data);
        }
    });

                $('#ClickTime').addClass(' active');
                $('#ClickIntel').removeClass(' active');
                $('#ClickPay').removeClass(' active');
                cnener[0].className = cnener[0].className.replace(' show', '').trim();
}


function ClickIntel(){
var cnener = document.getElementsByClassName("pak2")
      $.ajax({
        method:"get",
        url:"https://",//数据接口地址
        dataType:"json",
        data:{token:token},
        success: function (queryOrderShouldPaymentBySevenDays){
            var gastion= "近7天消费区间分布情况";
            var data=queryOrderShouldPaymentBySevenDays.datas;
            $('#SJtitle2').text(gastion)
            payChart(data);
            //console.log(data)
        }
    });
                $('#ClickIntel').addClass(' active');
                $('#ClickTime').removeClass(' active');
                $('#ClickPay').removeClass(' active');
                cnener[0].className = cnener[0].className.replace(' show', '').trim();

}
function ClickPay(){
var cnener = document.getElementsByClassName("pak2")
      $.ajax({
        method:"get",
        url:"https://",//数据接口地址
        dataType:"json",
          data:{token:token},
        success: function (queryOrderSpendTYpeCountBySevenDays){
            var gastion= "近7天支付方式分布情况";
            var data=queryOrderSpendTYpeCountBySevenDays.datas;
            $('#SJtitle2').text(gastion)
            payChart(data);
        }
    });

                $('#ClickPay').addClass(' active');
                $('#ClickIntel').removeClass(' active');
                $('#ClickTime').removeClass(' active');
                cnener[0].className = cnener[0].className.replace(' show', '').trim();

}
function payChart(datas) {
    //console.log(datas)
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".pak2"));

    // console.log(myChart)

    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
        legend: {
            formatter: function (name){
                var data = option.series[0].data;
                var total = 0;
                var tarValue;
                for (var i = 0; i < data.length; i++){
                    total += data[i].value;
                    if (data[i].name == name){
                        tarValue = data[i].value;
                    }
                }
                             
                let arr = ['{a|'+name+'}', '{b|'+ Math.round(((tarValue / total) * 100)) +'%}']

             
                return arr.join(' ')
            },
            textStyle: {
                rich: {
                    a: {
                        fontSize: 12,
                        color: '#21c9de'
                    },
                    b: {
                        fontSize: 12,
                        color: '#f2f5f4'
                    }
                }
            },
            left: 'left',
            itemGap: 17,
            bottom: '10%',
            orient: 'vertical',

        },
        color: [
            "#38A1FF",
            "#7FE0BD",
            "#FFD42E",
            "#D781DC",
            "#8ACFF0",
            "#4FCB73",
            "#E5A679",
            "#975FE6",
            "#38C9CA",
            "#AFDF7B",
            "#EE647C",
            "#A08CED"
        ],
        series: [
            {
                type: 'pie',
                radius: ['25%', '75%'],
                center: ['85%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: false,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data:datas
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
     window.addEventListener("resize", function () {
         myChart.resize();
    });
}

效果图