legend上下翻页如何实现？

在 Quick BI 中，如果您希望使用 ECharts 开发一个自定义组件，并实现类似 Quick BI 原生折线图的图例分页效果（即图例分成多行且支持上下翻页），需要对 ECharts 的 legend 配置进行详细调整。以下是具体的解决方案和步骤：

1. ECharts 图例配置基础

ECharts 提供了 legend.type = 'scroll' 的配置选项，用于实现图例的滚动翻页功能。默认情况下，legend 的布局是单行或单列的，无法直接实现多行或多列的分页效果。因此，您需要结合以下配置来实现目标效果：

• legend.orient：设置图例的方向为横向（horizontal）或纵向（vertical）。
• legend.itemWidth 和 legend.itemHeight：控制每个图例项的宽度和高度。
• legend.pageButtonItemGap 和 legend.pageButtonGap：调整分页按钮与图例之间的间距。
• legend.pageIconColor 和 legend.pageIconInactiveColor：设置分页按钮的颜色。

2. 实现多行图例的关键配置

为了实现类似 Quick BI 原生折线图的多行图例效果，您需要通过以下方式调整 ECharts 的 legend 配置：

(1) 设置 legend.type = 'scroll'

启用图例的滚动翻页功能：

legend: {
  type: 'scroll',
  orient: 'horizontal', // 横向布局
  top: 10, // 图例距离顶部的距离
  left: 'center', // 图例水平居中
  itemWidth: 25, // 图例项的宽度
  itemHeight: 14, // 图例项的高度
  itemGap: 10, // 图例项之间的间距
  pageButtonItemGap: 5, // 分页按钮与图例之间的间距
  pageButtonGap: 5, // 分页按钮之间的间距
  pageIconColor: '#2f4554', // 分页按钮颜色
  pageIconInactiveColor: '#aaa', // 分页按钮未激活时的颜色
  pageIconSize: 15, // 分页按钮大小
  pageFormatter: '{current}/{total}', // 分页信息格式
}

(2) 使用 grid 调整图表布局

由于图例可能占用较多空间，您需要通过 grid 配置调整图表的绘图区域，避免图例与图表内容重叠：

grid: {
  top: 60, // 图表顶部留出更多空间给图例
  left: '10%',
  right: '10%',
  bottom: '15%',
  containLabel: true,
},

(3) 动态计算图例的行数

ECharts 本身不直接支持多行图例的自动分页，但您可以通过动态计算图例项的数量和容器宽度，手动设置 legend.width 来限制图例的显示范围，从而实现多行效果。例如：

const legendWidth = Math.min(800, window.innerWidth - 40); // 动态计算图例宽度
legend: {
  type: 'scroll',
  width: legendWidth, // 限制图例宽度
  height: 60, // 限制图例高度，超出部分自动分页
  ...
}

3. 结合 Quick BI 的自定义组件开发

在 Quick BI 中开发基于 ECharts 的自定义组件时，您可以按照以下步骤实现上述配置：

(1) 在 styleSchema 中添加图例相关配置

通过 styleSchema 定义样式面板中的图例配置项，允许用户自定义图例的显示方式。例如：

styleSchema: {
  schema: {
    type: 'object',
    properties: {
      showLegend: {
        type: 'switch',
        id: 'showLegend',
        defaultValue: true,
        props: {
          label: '显示图例',
        },
      },
      legendOrient: {
        type: 'select',
        id: 'legendOrient',
        defaultValue: 'horizontal',
        props: {
          options: [
            { label: '横向', value: 'horizontal' },
            { label: '纵向', value: 'vertical' },
          ],
        },
      },
    },
  },
},

(2) 在 setOption 方法中应用配置

将用户在样式面板中设置的值传递到 ECharts 的 legend 配置中。例如：

setOption(props) {
  const customProps = props.customProps;
  const viewConfig = customProps.viewConfig;

  this.chart.setOption({
    legend: {
      show: viewConfig.showLegend,
      orient: viewConfig.legendOrient,
      type: 'scroll',
      width: 800,
      height: 60,
      ...
    },
    ...
  });
}

4. 注意事项

• 性能优化：当图例项数量较多时，建议限制每页显示的图例项数量，避免页面渲染性能下降。
• 适配不同屏幕：在 Quick BI 中，自定义组件可能运行在不同分辨率的设备上，因此需要动态计算图例的宽度和高度，确保布局适配。
• 调试与发布：完成开发后，使用 npm run pack 打包组件，并通过 Quick BI 的自定义组件平台上传和发布。

通过以上配置，您可以实现类似 Quick BI 原生折线图的多行图例分页效果。如果仍有疑问，请参考 Quick BI 的官方文档或联系技术支持团队获取进一步帮助。