效果圖如下

//圖例組件
        legend: {
          top: 'center',
          right: 30,
          data: [],
          width: "auto",
          itemWidth: 10,  // 小方塊尺寸
          itemHeight: 10,
          textStyle: {
            color:'#90CCFF',
            lineHeight:20,
            // 通過rich自定義尺寸，加寬度使百分比及數(shù)值各自對齊
            rich:{
              a:{
                width:100,
                align:'left'
              },
              b:{
                width:40,
                align:'right'
              }
            }
          },
          orient: 'vertical',      // 豎向排列
          // 通過formatte自定義格式
          // 因?yàn)閒ormatter的參數(shù)里只有name一個(gè)參數(shù)，所以需要通過獲取的數(shù)據(jù)匹配顯示
          // 這里的optionData是獲取到的數(shù)據(jù)，格式為
          // optionData:[
          //  { value: 47.01, name: "水果" },
          //  { value: 31.67, name: "蔬菜" },
          //  { value: 12.51, name: "禽畜" },
          //  { value: 8.24, name: "禽蛋" },
          //  { value: 7.27, name: "水產(chǎn)品" },
          //  { value: 6.32, name: "其他" }
          // ],
          formatter: (name) => {
            var total = 0;
            var tarValue;
            this.optionData.forEach((item,i) => {
              total += Number(item.value)
              if (item.name == name) {
                tarValue = Number(item.value ? item.value : 0)
              }
            });
            var percent = ((tarValue / total) * 100).toFixed(2)
            let arr = [
              '{a|'+name+" : "+percent+'%}'+'{b|'+tarValue+'張}'
            ]
            return arr
          }
        }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

    

        51
    

自定義legend的方式就是這樣，遇到格式不同的可以參考上面的方式自定義

單獨(dú)定義echarts中每個(gè)圖例的樣式,自定義圖例的點(diǎn)擊方法

//用不同樣式的圖例用數(shù)組寫對應(yīng)圖例的樣式
                legend:[{
                    top: "15%",
                    right: "24%",
                    textStyle: {
                        color: "#3BAEFE",
                        fontSize: 14,
                        fontFamily: "微軟雅黑"
                    },
                    itemWidth: 27,
                    itemHeight: 16,
                    data:[{
                        name: "農(nóng)藥",
                        icon: "circle"
                    },{
                        name: "LOL",
                        icon: "rect"
                    }]
                },{
                    top: "15%",
                    right: "15%",
                    textStyle: {
                        color: "#3BAEFE",
                        fontSize: 14,
                        fontFamily: "微軟雅黑"
                    },
                    itemWidth: 33,
                    itemHeight: 16,
                    data:[{
                        name: "農(nóng)藥+LOL",
                        icon: "image:///soyking/static/image/echarts/merge.png"  //引用自定義的圖片
                    }]
                },{
                    top: "15%",
                    right: "15%",
                    textStyle: {
                        color: "#3BAEFE",
                        fontSize: 14,
                        fontFamily: "微軟雅黑"
                    },
                    data:["\n","\n","\n","農(nóng)藥占比","LOL占比"]
                }],

結(jié)果:

自定義圖例的方法 (點(diǎn)擊圖例，顯示圖例的選中結(jié)果) 

var bar = echarts.init(document.getElementById("barDiv"));

//自定義圖例的方法
            bar.on("legendselectchanged",function(obj){
                //獲取圖例選擇的結(jié)果
                var selected = obj.selected;
                for(var i in selected){
                    alert(selected[i]);
                }
            });