echarts中關於自定義legend圖例文字

formatter有兩種形式： 

- 模板 
- 回調函數

模板

使用字符串模板，模板變量為圖例名稱 {name}
formatter: 'Legend {name}'

回調函數

formatter: function (name) {
    return 'Legend ' + name;
}

我們在返回時可以對name進行修改，從而返回我們需要的值，初步改動是這樣：

var data = [
    {value:40, name:'貨幣'},
    {value:20, name:'股票'},
    {value:40, name:'債券'}
]
formatter:  function(name){
    var total = 0;
    var target;
    for (var i = 0, l = data.length; i < l; i++) {
    total += data[i].value;
    if (data[i].name == name) {
        target = data[i].value;
        }
    }
    return name + ' ' + ((target/total)*100).toFixed(2) + '%';
}

想自定義圖例文字樣式，就要用到富文本：rich，但是在官方文檔中看到的只有模板形式的富文本樣式配置，由1知用模板很難實現自定義name，所以只能用回調函數形式，采用富文本的形式對name進行改造：

formatter:  function(name){
    var total = 0;
    var target;
    for (var i = 0, l = data.length; i < l; i++) {
    total += data[i].value;
    if (data[i].name == name) {
        target = data[i].value;
        }
    }
    var arr = [
        '{a|'+((target/total)*100).toFixed(2)+'%}',
        '{b|'+name+'}',
    ]
    return arr.join('\n')
},
textStyle:{
    rich:{
        a:{
            fontSize:20,
            verticalAlign:'top',
            align:'center',
            padding:[0,0,28,0]
        },
        b:{
            fontSize:14,
            align:'center',
            padding:[0,10,0,0],
            lineHeight:25
        }
    }
}

　　

工作中的案例

 

實例自定義圖例文字樣式

function getCoinList() {
    var param = { coinName: "" };
    $.ajaxSendData(param, "/api/user/coin/list", function(resData){
        // resData.data.list = []
        // resData.data.sum = 0;
        // console.log(resData)
        var showLength = resData.data.num;          // 可顯示幾條
        var lens = resData.data.list.length;        // 所有列表
        $("#cny_total").html((resData.data.sum));   // 資產
        if (lens > 0) {
            $(".fin_total_assets").show();
            if(parseFloat(resData.data.sum) == 0){
                $("#dataList").html("<div class='nodata'>您沒有任何資產</div>");
                $(".finance_page_coin").addClass("notContent");
                $("#fin_total_graph").addClass("notImg");
                $(".notcanvas").css("display", "block");
                $(".fin_total_assets").hide();
            }
            var da = { "list": resData.data.list };
            var _html = template('CoinFinanceDtoList', da);
            var _html2 = template('CoinFinancepercent', da);
            $("#dataList").html(_html);
            $(".assets_coin").html(_html2);
            
            // ECharts , http://echarts.baidu.com/option.html#legend.itemGap
            var dom = document.getElementById("fin_total_graph");
            dom.style.display = "block";
            var myChart = echarts.init(dom);
            var app = {};
            var option = null;
            var data = genData(lens);

            option = {
                tooltip : {
                    trigger: 'item',
                    triggerOn: "click",     // 點擊才顯示
                    formatter: function(obj){
                        // console.log("調用" + obj.name + "幣種的事件")
                        // hideSomethigCoin(obj.name);
                        for(var i = 0; i < lens; i++){
                            if(obj.name == data.beforeData[i].name){
                                return obj.name + ": " + data.beforeData[i].currentPrice + " CNY";
                            }
                        }
                    }
                },
                legend: {
                    type: 'plain',          // 普通圖例
                    orient: 'horizontal',   // 水平
                    left:450,               // 左距離
                    top: 60,                // 上距離
                    bottom: 20,             // 下距離
                    width:300,              // 寬度
                    itemGap: 20,            // 間隔
                    itemWidth: 24,          // 圖形寬度。
                    itemHeight: 24,         // 圖形高度。
                    data: data.legendData,  // 數據
                    selected: data.selected,// true為可選
                    formatter: function (name) {
                        var target;
                        for(var i = 0; i < lens; i++){
                            if(i == showLength && parseFloat(data.seriesData[i].value * 100).toFixed(2) < parseFloat(0.01)){
                                target = " (<0.01"
                                break;
                            }
                            if(name == data.seriesData[i].name){
                                target = " (" + (data.seriesData[i].value * 100).toFixed(2) + ""
                                break;
                            }
                        }
                        var arr = [
                            '{a|' + name + target + '%)}',
                        ]
                        return arr.join('\n');
                    },
                    textStyle:{
                        rich:{
                            a:{
                                width:90
                            }
                        }
                    }
                },
                emphasis  : {
                    label  :{

                    }
                },
                series : [
                    {
                        left:"left",
                        type: 'pie',
                        radius: ['30%', '70%'], // 中間白色圓周面積
                        center: ['18%', '50%'], // 左右距離
                        hoverAnimation:false,   // 是否開啟 hover 在扇區上的放大動畫效果。
                        data: data.seriesData,  // 數據
                        minAngle : 3,          // 防止某個值過小導致扇區太小影響交互。
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        color:["#4A90E2", "#2DCCA9", "#9013FE", "#FF5D5D", "#FFBE53", "#3E3F58", "#4f0202", "#ff7200"]           // 數組顏色
                    }
                ],
            };
            function genData(count) {
                var nameList = da;
                var legendData = [];
                var seriesData = [];
                var selected = {};
                var beforeData = []; //分割前的數組
                var afterData = [];  //分割后的數組
                var otherPercent = 0;    // 顯示其他的總項
                var otherCurrentPrice = 0;    // 顯示其他的總項
                //循環需要處理的數組
                for(var i = 0; i < showLength; i++) {
                    //將nameList[i]添加到子數組
                    beforeData.push(nameList.list[i]);
                };
                for(var j = lens-1; showLength <= j; j--){
                    afterData.unshift(nameList.list[j])
                    otherPercent += parseFloat(nameList.list[j].percent);
                    otherCurrentPrice += parseFloat(nameList.list[j].currentPrice);
                }
                if(otherCurrentPrice != 0){
                    beforeData.push({
                        name: "其他",
                        percent: otherPercent,
                        currentPrice: otherCurrentPrice
                    })
                }
                for (var i = 0; i < beforeData.length; i++) {
                    name = beforeData[i].name;
                    // name = beforeData[i].name + " (" + (beforeData[i].percent * 100).toFixed(5) + "%)";
                    value = beforeData[i].percent;
                    legendData.push(name);
                    seriesData.push({
                        name: name,
                        value: value
                    });
                    selected[name] = i < lens;
                }
                return {
                    legendData: legendData,
                    seriesData: seriesData,
                    selected: selected,
                    beforeData: beforeData
                };
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }
        langPkg.loadLanguage("zhuanru");
        langPkg.loadLanguage("zhuanchu");
    });
}