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('
')
},
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,             // 下距离
                    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('
');
                    },
                    textStyle:{
                        rich:{
                            a:{
                                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");
    });
}