ECHARTS圖中實現LEGEND圖例文字后面顯示百分比%


主要代碼是一個回調函數,放代碼

 // 回調函數
                formatter: function(name) {
                    var data = option.series[0].data;//獲取series中的data
                    var total = 0;
                    var tarValue;
                    for (var i = 0, l = data.length; i < l; i++) {
                        total += data[i].value;
                        if (data[i].name == name) {
                            tarValue = data[i].value;
                        }
                    }
                    var p = ((tarValue / total) * 100);
                    return name + " " + " " + p.toFixed(2) + "%";
                },

全部代碼

option = {
    title: {
        text: '某站點用戶訪問來源',
        subtext: '純屬虛構',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
    },
    // 回調函數
                formatter: function(name) {
                    var data = option.series[0].data;//獲取series中的data
                    var total = 0;
                    var tarValue;
                    for (var i = 0, l = data.length; i < l; i++) {
                        total += data[i].value;
                        if (data[i].name == name) {
                            tarValue = data[i].value;
                        }
                    }
                    var p = ((tarValue / total) * 100);
                    return name + " " + " " + p.toFixed(2) + "%";
                },
    series: [
        {
            name: '訪問來源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '直接訪問'},
                {value: 310, name: '郵件營銷'},
                {value: 234, name: '聯盟廣告'},
                {value: 135, name: '視頻廣告'},
                {value: 1548, name: '搜索引擎'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM