echarts legend超出隐藏自定义

在ECharts中，当图例（legend）内容过多时，可能会超出显示区域。为了解决这个问题，可以自定义图例的显示方式，使其在超出时隐藏或滚动。以下是一个实现图例超出隐藏自定制的示例：

1. **设置图例的`type`为`scroll`**，这样图例会变成可滚动的。
2. **设置图例的`left`、`top`、`right`和`bottom`属性**，以控制图例的位置。
3. **设置图例的`orient`属性**，以控制图例的排列方向。
4. **设置图例的`itemWidth`和`itemHeight`属性**，以控制图例项的宽度和高度。
5. **设置图例的`pageButtonItemGap`和`pageButtonGap`属性**，以控制分页按钮的间距。
6. **设置图例的`pageFormatter`属性**，以控制分页按钮的显示内容。

以下是一个示例代码：

option = {
    legend: {
        type: 'scroll',
        orient: 'vertical',
        left: 'right',
        top: 'center',
        right: 10,
        bottom: 20,
        data: ['类别1', '类别2', '类别3', '类别4', '类别5', '类别6', '类别7', '类别8', '类别9', '类别10'],
        itemWidth: 20,
        itemHeight: 14,
        pageButtonItemGap: 10,
        pageButtonGap: 5,
        pageFormatter: '{current}/{total}'
    },
    series: [
        {
            name: '示例数据',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20, 36, 10, 10, 20]
        }
    ]
};

在这个示例中，图例会变成可滚动的，并在右侧显示分页按钮。通过这种方式，可以有效地控制图例的显示，避免内容超出显示区域。