如何 设置 echarts 中 legend中 每页显示图例10个

在 ECharts 中，可以通过设置 `legend` 的 `pageIconSize` 和 `pageButtonItemGap` 属性来实现图例分页功能，其中 `pageIconSize` 控制每页显示的图例个数，`pageButtonItemGap` 控制每个分页按钮之间的间距。

以下是一个示例代码：

option = {
  ...
  legend: {
    type: 'scroll',
    pageIconSize: [10, 10], // 每页显示的图例个数
    pageButtonItemGap: 5, // 分页按钮之间的间距
    ...
  },
  ...
};

你可以根据需要调整 `pageIconSize` 的值来控制每页显示的图例个数，例如设置为 `[10, 10]` 可以每页显示 10 个图例。然后，你可以通过调整 `pageButtonItemGap` 的值来控制分页按钮之间的间距。

希望这可以帮助到你！如果你还有其他问题，请随时提问。

相关问题

echarts legend 自定义html

要完全自定义ECharts图例的HTML内容，你可以使用ECharts的API来获取图例的DOM节点，并在其中插入自定义的HTML代码。

首先，你需要在ECharts的option中设置`legend.show`为`false`，这样就可以隐藏默认的图例。然后，你可以在页面中添加一个容器元素来承载自定义的图例，比如一个`<div>`元素。最后，使用ECharts的`chart.on('legendselectchanged', callback)`方法来监听图例项的选择事件，并在回调函数中获取图例的DOM节点，并在其中插入自定义的HTML代码。

以下是一个示例代码，展示了如何使用自定义HTML代码来替换ECharts默认的图例：

// 隐藏默认的图例
legend: {
    show: false
},

// 在页面中添加一个容器元素来承载自定义的图例
<div id="custom-legend"></div>

// 监听图例项的选择事件，并在回调函数中获取图例的DOM节点
chart.on('legendselectchanged', function (params) {
    var legendHtml = '';
    var legendDom = chart.getDom().querySelector('.ec-legend');
    var legendItems = legendDom.getElementsByTagName('li');
    for (var i = 0; i < legendItems.length; i++) {
        var item = legendItems[i];
        var name = item.getAttribute('data-name');
        var iconHtml = item.querySelector('.ec-icon').outerHTML;
        var textStyle = item.querySelector('.ec-legend-text').getAttribute('style');
        legendHtml += '<div class="legend-item" data-name="' + name + '">' + iconHtml + '<span style="' + textStyle + '">' + name + '</span></div>';
    }
    document.getElementById('custom-legend').innerHTML = legendHtml;
});

在上面的代码中，我们首先隐藏了默认的图例。然后，在页面中添加了一个`<div>`元素来承载自定义的图例。最后，我们使用`chart.getDom().querySelector('.ec-legend')`方法获取图例的DOM节点，并遍历其中的图例项，将每个图例项的名称、图标、文本样式等信息提取出来，并拼接为自定义的HTML代码。最后，我们将自定义的HTML代码插入到`<div>`元素中，以展示自定义的图例。

一个echarts图中显示两个环形图 并且使用同一个legend后 两个环形图的tooltip联动显示

要在一个echarts图中显示两个环形图并且使用同一个legend，可以使用echarts的多系列（multi-series）功能。具体步骤如下：

1. 在echarts的option中，定义两个系列（series），每个系列都是一个环形图。并且给每个系列设置相同的legend名称，如：

series: [
    {
        name: '环形图1',
        type: 'pie',
        ...
    },
    {
        name: '环形图2',
        type: 'pie',
        ...
    }
],
legend: {
    data: ['图例1', '图例2'],
    ...
}

2. 确保两个系列的数据项（series.data）中的每个数据对象具有相同的name属性，如：

series: [
    {
        name: '环形图1',
        type: 'pie',
        data: [
            {value: 335, name: '图例1'},
            {value: 310, name: '图例2'},
            ...
        ]
    },
    {
        name: '环形图2',
        type: 'pie',
        data: [
            {value: 335, name: '图例1'},
            {value: 310, name: '图例2'},
            ...
        ]
    }
],

3. 开启tooltip功能，并设置相同的tooltip.trigger参数，如：

tooltip: {
    trigger: 'item',
    ...
}

4. 在页面加载完成后，使用echarts的on方法，监听第一个环形图的鼠标移动事件，并通过dispatchAction方法调用第二个环形图的tooltip显示方法，如：

myChart1.on('mousemove', function(params) {
    if (params.componentType === 'series' && params.seriesIndex === 0) {
        var dataIndex = params.dataIndex;
        myChart2.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: dataIndex
        });
    }
});

5. 在第一个环形图的鼠标移出事件中，调用第二个环形图的tooltip隐藏方法，如：

myChart1.on('mouseout', function(params) {
    myChart2.dispatchAction({
        type: 'hideTip'
    });
});

6. 在第二个环形图中同样地监听鼠标移动事件，并实现相同的逻辑即可。

注意事项：

1. 两个环形图的数据要保持一致，即每个数据项的name和value属性要一致。
2. 两个环形图的tooltip的formatter函数要保持一致，以显示相同的内容。
3. 在第一个环形图中，要判断当前鼠标所在的组件类型和系列类型是否正确，以避免误操作。
4. 如果有多个环形图需要联动显示tooltip，可以使用类似的方法实现。