echarts legend滚动

### 实现 ECharts Legend 组件的滚动效果

为了使 ECharts 的图例支持滚动功能，可以通过设置 `legend` 属性中的特定参数来完成。当图例项数量较多时，可以配置 `type` 为 `'scroll'` 来启用滚动条[^1]。

var option = {
    legend: {
        type: 'scroll',
        top: '50', // 设置图例距离顶部的位置
        bottom: '50',// 可选属性，用于调整布局间距
        orient: 'horizontal', // 或者 vertical 表示水平或垂直排列，默认是 horizontal
        data: ['类别A','类别B','类别C']// 这里放置具体的分类名称数组
    },
    series : [
        ...
    ]
};

通过上述代码片段，能够创建一个带有滚动条的图例区域，允许用户横向滑动查看更多的图例项目。对于拥有大量数据类别的图表来说非常有用，确保即使存在许多不同的系列也能保持良好的用户体验。

相关问题

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: [
    // 系列数据...
  ]
};

怎么让echarts legend 出现滚动条

如果图例（legend）过多，可以使用 ECharts 内置的滚动条组件（dataZoom）来实现。具体步骤如下：

1. 在 option 中添加 dataZoom 组件：

dataZoom: {
    type: 'slider',
    show: true,
    start: 0,
    end: 100
}

2. 在 legend 中添加 formatter 属性，用于格式化图例文字：

legend: {
    show: true,
    data: ['图例1', '图例2', '图例3', '图例4', '图例5', '图例6', '图例7', '图例8', '图例9', '图例10', '图例11', '图例12', '图例13', '图例14', '图例15', '图例16', '图例17', '图例18', '图例19', '图例20'],
    formatter: function(name) {
        return echarts.format.truncateText(name, 100, '…');
    }
}

3. 在 formatter 中使用 echarts.format.truncateText 函数来截断图例文字，并添加省略号。

完整的示例代码如下：

option = {
    dataZoom: {
        type: 'slider',
        show: true,
        start: 0,
        end: 100
    },
    legend: {
        show: true,
        data: ['图例1', '图例2', '图例3', '图例4', '图例5', '图例6', '图例7', '图例8', '图例9', '图例10', '图例11', '图例12', '图例13', '图例14', '图例15', '图例16', '图例17', '图例18', '图例19', '图例20'],
        formatter: function(name) {
            return echarts.format.truncateText(name, 100, '…');
        }
    },
    // 其他配置项
    series: [
        // 数据系列
    ]
};