【ECharts】legend 图例

图例的位置

option = {
  legend: {
    orient: 'vertical',
    x:'right',      // 图例在左（left）、右（right）、居中（center）、100px
    y:'center',      // 图例在上（top）、下（bottom）、居中（center、100px）、100px
    padding:[0,50,0,0],   // 图例[距上右下左方距离
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

图例区域样式

option = {
  legend: {
    orient: 'vertical', //horizontal
    x:'center',      // 图例在左（left）、右（right）、居中（center）、100px
    y:'top',      // 图例在上（top）、下（bottom）、居中（center、100px）、100px
    padding:[20,20,20,20],   // 图例[距上右下左方距离
    backgroundColor: '#f00', 
    borderColor: '#0f0', 
    borderWidth: 4, 
    itemGap: 10,
    textStyle: {color: '#fff'},
    selectedMode: false,   //legend事件禁用
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

图例文字自定义

let data = [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' }
]

option = {
  legend: {
    top: '5%',
    left: 'center',
      formatter: function (name) {
        var target;
        for (var i = 0 ; i < data.length; i++) {
          target = data[i].value;
        }
        var arr = ["{b|" + name + "}", "{a|" + target + " " + "个}"];
        return arr.join("\n");
      },
      textStyle: {
        rich: {
          b: {
            fontSize: 14,
            align: "center",
            padding: [10, 10, 10, 10],
          },
          a: {
            fontSize: 14,
            verticalAlign: "top",
            align: "center",
            padding: [0, 10, 10, 10],
          },
        },
      },
    
  },
  series: [
    {
      type: 'pie',
      radius: '60%',
      labelLine: {
        show: false
      },
      data: data
    }
  ]
};

图例形状

let data = [
  { value: 1048, name: 'Search Engine' },
  { value: 735, name: 'Direct' },
  { value: 580, name: 'Email' },
  { value: 484, name: 'Union Ads' },
  { value: 300, name: 'Video Ads' },
  { value: 735, name: 'apple' },
  { value: 580, name: 'bnana' },
]

option = {
  legend: {
    orient: 'vertical',
    right: 20,
    y: 'center',
    
    // 自定义文字
    formatter: function(name) {	
      let total = 0
      let target
      for (let i = 0; i < data.length; i++) {
        total += data[i].value
        if (data[i].name === name) {
          target = data[i].value
        }
      }
      var arr = [
        '{a|' + name + '}',
        '{b|' + ((target / total) * 100).toFixed(2) + '%}',
        '{c|' + target + '}'
      ]
      return arr.join('  ')
    },
    textStyle: {	// 添加
      padding: [8, 0, 0, 0],
      rich: {
        a: {
          fontSize: 12,
          width: 110
        },
        b: {
          fontSize: 12,
          width: 70,
          color: '#c1c1c1'
        },
        c: {
          fontSize: 12
        }
      }
    },
    
    // 自定义图例
    
    // 所有的图例变成圆点
    // icon:'circle',  
    // 每个图例不一样
    data: [
      { icon:'circle', name: 'Search Engine' },
      { icon:'rect', name: 'Direct' },
      { icon:'roundRect',name: 'Email' },
      { icon:'triangle',name: 'Union Ads' },
      { icon:'diamond', name: 'Video Ads' },
      { icon:'pin', name: 'apple' },
      { icon:'arrow', name: 'bnana' },
    ],
    // 大小
    itemHeight: 20,
    itemWidth: 20,
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '40%',
      center: ['30%', '50%'],
      data: data
    }
  ]
};