图例(Legend)配置

图例(Legend)配置

图例是数据可视化中不可或缺的组成部分，它帮助用户理解图表中不同系列或类别的含义。ECharts提供了丰富的配置项来自定义图例的样式、位置、交互等特性。

基本配置

在ECharts中，图例通过legend属性进行配置。最基本的图例配置只需要指定data数组，数组中的每一项对应一个系列的名称。

option = {
  legend: {
    data: ['销量', '库存', '订单']
  },
  xAxis: {
    type: 'category',
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    },
    {
      name: '库存',
      type: 'bar',
      data: [15, 25, 16, 25, 18, 12]
    },
    {
      name: '订单',
      type: 'bar',
      data: [8, 12, 26, 18, 15, 8]
    }
  ]
};

图例位置与布局

图例的位置可以通过top、bottom、left、right属性进行控制，也可以使用orient属性设置图例的排列方向（水平或垂直）。

legend: {
  data: ['销量', '库存', '订单'],
  top: '10%',      // 距离顶部10%
  left: 'center',  // 水平居中
  orient: 'horizontal' // 水平排列
}

更精确的位置控制可以使用padding和itemGap属性：

legend: {
  data: ['销量', '库存', '订单'],
  top: 20,
  left: 'center',
  itemGap: 20,     // 图例项之间的间隔
  padding: [10, 20, 10, 20] // 图例内边距[上,右,下,左]
}

图例样式定制

ECharts允许对图例的各个部分进行样式定制，包括文本样式、图标样式等。

legend: {
  data: ['销量', '库存', '订单'],
  textStyle: {
    color: '#333',
    fontSize: 12,
    fontWeight: 'bold'
  },
  itemWidth: 25,    // 图例标记的图形宽度
  itemHeight: 14,   // 图例标记的图形高度
  itemStyle: {
    borderWidth: 1,
    borderColor: '#ccc'
  }
}

对于更复杂的图标样式，可以使用icon属性指定自定义形状：

legend: {
  data: [
    { 
      name: '销量', 
      icon: 'circle' 
    },
    { 
      name: '库存', 
      icon: 'rect' 
    },
    { 
      name: '订单', 
      icon: 'roundRect' 
    }
  ]
}

图例交互功能

ECharts图例支持丰富的交互功能，包括图例选择、图例滚动等。

legend: {
  data: ['销量', '库存', '订单'],
  selectedMode: 'multiple', // 允许多选
  selected: {
    '销量': true,   // 默认选中
    '库存': false,  // 默认不选中
    '订单': true
  }
}

对于大量图例项的情况，可以启用滚动功能：

legend: {
  data: ['系列1', '系列2', '系列3', '系列4', '系列5', '系列6', '系列7'],
  type: 'scroll',   // 可滚动图例
  pageButtonItemGap: 5,  // 翻页按钮与图例项的间隔
  pageButtonPosition: 'end', // 翻页按钮位置
  pageIconColor: '#2f4554', // 翻页按钮颜色
  pageIconInactiveColor: '#aaa', // 翻页按钮禁用颜色
  pageIconSize: 15,  // 翻页按钮大小
  pageTextStyle: {
    color: '#333'
  }
}

特殊图例类型

除了常规图例，ECharts还支持一些特殊类型的图例配置。

图例分组

legend: [
  {
    data: ['销量', '库存'],
    top: '10%'
  },
  {
    data: ['订单', '退货'],
    top: '30%'
  }
]

自定义图例内容

通过formatter可以自定义图例文本：

legend: {
  data: ['销量', '库存', '订单'],
  formatter: function(name) {
    return '产品: ' + name;
  }
}

图例与视觉映射

图例可以与视觉映射(visualMap)组件配合使用：

option = {
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 100,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    }
  },
  legend: {
    data: ['数据范围']
  },
  series: [
    {
      name: '数据范围',
      type: 'scatter',
      data: [[10, 20], [30, 40], [50, 60], [70, 80], [90, 100]]
    }
  ]
};

图例事件处理

ECharts图例支持多种事件，可以通过legendselectchanged等事件实现交互逻辑：

myChart.on('legendselectchanged', function(params) {
  console.log('图例选择变化:', params.selected);
});

// 或者通过action触发图例操作
myChart.dispatchAction({
  type: 'legendSelect',
  name: '销量'  // 图例名称
});

响应式图例配置

在不同屏幕尺寸下，可能需要调整图例的显示方式：

option = {
  legend: {
    data: ['销量', '库存', '订单'],
    responsive: true,
    responsiveConfig: {
      small: {
        orient: 'vertical',
        right: 10,
        top: 'center'
      },
      medium: {
        orient: 'horizontal',
        bottom: 10,
        left: 'center'
      },
      large: {
        orient: 'horizontal',
        top: 50,
        left: 'center'
      }
    }
  }
  // ...其他配置
};

图例与主题集成

ECharts主题可以统一控制图例样式，实现整体风格一致：

// 自定义主题
echarts.registerTheme('myTheme', {
  legend: {
    textStyle: {
      color: '#666',
      fontSize: 14
    },
    itemStyle: {
      borderColor: '#999'
    }
  }
});

// 应用主题
var myChart = echarts.init(document.getElementById('main'), 'myTheme');

图例高级技巧

动态更新图例

// 添加新图例项
option.legend.data.push('新系列');
option.series.push({
  name: '新系列',
  type: 'line',
  data: [8, 12, 21, 34, 42, 38]
});
myChart.setOption(option);

// 移除图例项
option.legend.data = option.legend.data.filter(name => name !== '库存');
option.series = option.series.filter(series => series.name !== '库存');
myChart.setOption(option);

图例与数据联动

// 根据数据动态生成图例
function generateLegend(data) {
  return data.map(item => item.name);
}

var data = [
  {name: '北京', value: 123},
  {name: '上海', value: 234},
  {name: '广州', value: 345}
];

option.legend.data = generateLegend(data);
option.series = [{
  name: '城市数据',
  type: 'pie',
  data: data
}];

图例与动画效果

legend: {
  data: ['销量', '库存', '订单'],
  animation: true,
  animationDurationUpdate: 1000,
  animationEasingUpdate: 'cubicInOut'
}