Echarts中如何设置图例样式

在 ECharts 中，可以通过 legend 配置项来设置图例的样式。以下是一些常用的图例样式设置：

1. 图例文字样式：

legend: {
  textStyle: {
    color: '#333', // 文字颜色
    fontSize: 14, // 文字大小
    fontWeight: 'bold', // 文字粗细
    fontFamily: 'SimHei', // 文字字体
  }
}

2. 图例选中样式：

legend: {
  selectedMode: 'single', // 选中模式，可选值：'single', 'multiple', false
  selectedOffset: 10, // 选中时的偏移量
  selectedSymbolSize: 12, // 选中时的标记大小
}

3. 图例边框样式：

legend: {
  borderColor: '#ccc', // 边框颜色
  borderWidth: 1, // 边框宽度
  borderType: 'solid', // 边框类型，可选值：'solid', 'dashed', 'dotted'
}

4. 图例背景样式：

legend: {
  backgroundColor: '#fff', // 背景颜色
  backgroundAlpha: 0.8, // 背景透明度
  backgroundRadius: 4, // 背景圆角
  padding: [5, 10], // 内边距
}

5. 图例悬浮样式：

legend: {
  hoverAnimation: true, // 悬浮时是否有动画效果
  hoverOffset: 5, // 悬浮时的偏移量
}

你可以根据需要组合使用这些配置项来设置图例的样式。以下是一个完整的示例：

option = {
  legend: {
    data: ['系列1', '系列2'],
    textStyle: {
      color: '#333',
      fontSize: 14,
      fontWeight: 'bold',
      fontFamily: 'SimHei',
    },
    selectedMode: 'single',
    selectedOffset: 10,
    selectedSymbolSize: 12,
    borderColor: '#ccc',
    borderWidth: 1,
    borderType: 'solid',
    backgroundColor: '#fff',
    backgroundAlpha: 0.8,
    backgroundRadius: 4,
    padding: [5, 10],
    hoverAnimation: true,
    hoverOffset: 5,
  },
  series: [
    {
      name: '系列1',
      type: 'line',
      data: [10, 20, 30, 40],
    },
    {
      name: '系列2',
      type: 'line',
      data: [20, 30, 40, 50],
    },
  ],
};

将上述代码放入 ECharts 的 setOption 方法中，即可应用相应的图例样式。