怎么让echarts legend 出现滚动条
时间: 2023-10-24 11:06:50 浏览: 47
如果图例(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: [
// 数据系列
]
};
```