echarts legend图标与文字间距

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

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

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

相关问题

echarts legend内容

### ECharts 图例组件 `legend` 配置详解

#### 基础配置项介绍
ECharts 的图例组件用于展示不同系列的数据名称及其对应的颜色标记。通过调整 `legend` 组件的各项参数，可以实现多种自定义效果。

- **显示/隐藏**
设置 `show: false` 可以完全不渲染该组件；反之则设为 `true`[^1]。

- **布局控制**
使用 `orient` 属性指定图例条目的排列方向，默认值为 `'horizontal'` 表示水平分布，而设定成 `'vertical'` 则变为垂直列表形式[^3]。

- **定位属性**
支持利用 `left`, `right`, `top`, 和 `bottom` 来精确定位图例的位置于图表容器内任意角落或边缘处.

#### 自定义外观样式
对于希望进一步美化图例样式的开发者来说：

- 调整项目间距可通过改变 `itemGap` 数值来达成；
- 更改图标形状借助 `icon` 参数完成，接受字符串类型的预定义图形名或是 URL 地址指向外部图片资源；
- 修改文字风格依靠 `textStyle` 对象下的多个子选项，比如字体大小(`fontSize`)、族系(`fontFamily`)以及颜色(`color`)等均能被轻松定制化处理[^2].

// 示例代码片段：创建带滚动分页功能的横向图例
option = {
    legend: {
        type: 'scroll', // 启用分页模式
        orient: 'horizontal',
        pageIconColor: '#ff781f',
        pageTextStyle: { color: '#999' },
        data: ['类别A','类别B','类别C'] // 这里填写实际存在的分类标签数组
    }
};

当面对较长的图例内容时，启用 `type:'scroll'` 并配合合理的页面导航按钮设计（如上述例子所示），可以让用户体验更加友好流畅。

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

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