我正在使用 ECharts 以折线图显示趋势数据。我有 50 个系列要在折线图中显示。每个系列都有一个传奇要展现。我想在图表顶部显示图例。但是，我想最多用 3 行显示图例。如果图例不适合 3 行，那么我想显示垂直滚动。但是，我无法显示最多 3 行图例的垂直滚动。每行应该显示多个图例。
我尝试了垂直和水平滚动。垂直滚动时，一行中仅显示一个图例。这就是问题。实际上，ECharts 应该在一行中显示所有可能的图例。如果有足够的空间在一行中包含 2 个图例，则应在一行中显示 2 个图例。它应该显示 3 行，如果所有图例不能容纳在三行中，那么应该添加垂直滚动。但是，目前图例与图表重叠。
option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}'
},
legend: [{
left: 'left',width:'50%',
type:'scroll',
orient:'vertical',
height:'100',
selectedMode:'multiple',
//pageButtonPosition:'end',
//formatter:'legend {name} ',
data: ['saaaaaaaaaaaaaaa0', 'saaaaaaaaaaaaaaa1','saaaaaaaaaaaaaaa2','saaaaaaaaaaaaaaa3'
,'saaaaaaaaaaaaaaa4','saaaaaaaaaaaaaaa8'
, 'saaaaaaaaaaaaaaa9','saaaaaaaaaa10','saaaaaaaaaa13','saaaaaaaaaa14','saaaaaaaaaa11'
, 'saaaaaaaaaa12','saaaaaaaaaa15','saaaaaaaaaa16'
,'saaaaaaaaaa17'],
},
{
left: 'right',width:'50%',height:'auto',
data: ['saaaaaaaaaaaaaaa5','saaaaaaaaaaaaaaa6','saaaaaaaaaaaaaaa7'],
}
],
xAxis: {
type: 'category',
name: 'x',
splitLine: {show: false},
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
},
grid: {
height:'auto'
},
yAxis: {
type: 'log',
name: 'y'
},
series: [
{
name: 'saaaaaaaaaaaaaaa0',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaaaaaaa1',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaaaaaaa2',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaaaaaaa3',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaaaaaaa4',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaaaaaaa5',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaaaaaaa6',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaaaaaaa7',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaaaaaaa8',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaaaaaaa9',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaa10',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaa11',
type: 'line',
data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
},
{
name: 'saaaaaaaaaa12',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaa13',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
},
{
name: 'saaaaaaaaaa14',
type: 'line',
data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
},
{
name: 'saaaaaaaaaa15',
type: 'line',
data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
}
]
};
最佳答案
我很确定您正在尝试做一些 ECharts 尚不支持的事情。
从程序上来说:
- 您无法得知一行中可以容纳多少个项目。
- 由于上述原因，您无法知道图例 block 中有多少行。
- 尚无 max-line 或 max-items-per-line 控制。
我想你能做的最好的事情就是制作 3 个图例 block ，使用 legend.left 和 legend.top 像素配置垂直放置，然后放置部分图例 block 。将整个图例数据放入这些 block 中。第一个 legend.data 将包含基本数组的前 3 个项目，第二个 legend.data 将包含接下来的 3 个项目...并通过以下方式从外部控制内容从每个 legend.data 添加/删除项目。
无论如何，这显然不是一个好的解决方案。卷轴看起来有问题。
我建议您在他们的 official feature request form 上发布您的想法的清晰示例和用例，这是您获得此功能的最佳方式，而无需编写庞大且不可扩展的解决方法。
关于javascript - ECharts-如何显示带有 3 行图例的水平滚动条，如果项目不适合 3 行则滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57203083/