echarts legend图标与文字间距

可以通过legend的textStyle属性中的lineHeight属性来设置图标与文字之间的间距。例如：

legend: {
  textStyle: {
    lineHeight: 30  // 设置图标与文字之间的间距为30
  },
  data: ['图例1', '图例2', '图例3']
}

这里将lineHeight设置为30，表示图标和文字之间的距离为30px。可以根据实际需要进行调整。

相关问题

echarts legend调整显示字体大小后 前一个的文字被后一个的图标挡住

这个问题可能是由于legend的布局方式导致的。你可以尝试调整legend的布局方式，比如使用"horizontal"布局，或者设置"padding"属性来避免文字被覆盖。另外，你也可以尝试调整legend中图标和文字的间距，来解决这个问题。具体的代码实现可以参考echarts官方文档中的legend相关部分。

echarts legend 通过滚动条翻页

ECharts 的 Legend（图例）默认情况下会显示所有图标或系列名称，如果数据过多导致无法一次性展示，可以设置成分页显示，使用滚动条来切换页面。你可以通过 `dataZoom` 和 `legendScroll` 配置项来实现这个功能。

以下是基本步骤：

1. 添加 DataZoom 组件：DataZoom 可以让你对图表的数据范围进行缩放，包括水平滑动条用于切换图例显示的内容范围。

const dataZoom = {
  show: true,
  x: { start: 0, end: 100 }, // 设置可视数据的比例
  type: 'slider', // 使用水平滚动条
};

2. 开启图例滚动：在 Legend 中启用 scroll 属性，并指定相应的配置。

const legend = {
  data: ['series1', 'series2', ...], // 系列名称列表
  orient: 'vertical',
  scroll: { show: true, y: 50 } // 显示滚动条，y轴高度自定
};

完整的配置示例：

option = {
  dataZoom: dataZoom,
  legend: {
    data: [...],
    scroll: {
      show: true, // 显示滚动条
      y: 50, // 滚动条高度
      orient: 'vertical', // 图例方向
      itemGap: 10, // 滚动条项目间距
      itemWidth: 80 // 滚动条每个项目的宽度
    }
  },
  series: [
    // 系列数据...
  ]
};