图例数据应与序列名称或数据名称相同。会出现下面的警告信息
-
图例和系列的个数不匹配。
如果图例的个数与系列的个数不匹配,就会出现该错误。通常情况下,图例的个数应该与系列名称或数据名称相同。也就是说,如果你的系列名称或数据名称有m
个,那么你应该有m
个图例。
例如,在下面的代码示例中,我们定义了两个系列名称为'Series A'
和'Series B'
的系列,分别对应着两个pie
饼图。
option = {
legend: {
data: ['A', 'B']
},
series: [
{
name: 'Series A',
type: 'pie',
data: [
{value: 100, name: 'A1'},
{value: 200, name: 'A2'},
{value: 300, name: 'A3'}
]
},
{
name: 'Series B',
type: 'pie',
data: [
{value: 150, name: 'B1'},
{value: 250, name: 'B2'},
{value: 350, name: 'B3'}
]
}
]
}
在这个例子中,我们定义了两个系列Series A
和Series B
,对应着两个pie
饼图,同时设置了两个图例A
和B
。因此,图例的数量与系列的数量相同,符合基本要求。
2. 图例和系列的data
中的元素个数不匹配。
如果您的系列和图例中使用的data
的数量不一致,也会出现这个错误。在这种情况下,应该确保每个系列的data
和图例的data
的元素数量相同。
例如,在下面的代码示例中,我们定义了两个系列Series A
和Series B
,分别对应着两个bar
柱状图。在这个例子中,我们定义了每个系列的data
,并将其作为图例的数据。由于每个系列具有不同的数据数量,因此导致了错误。
option = {
legend: {
data: [
{name: 'A1', icon: 'circle'},
{name: 'A2', icon: 'circle'},
{name: 'A3', icon: 'circle'},
{name: 'B1', icon: 'circle'},
{name: 'B2', icon: 'circle'},
]
},
xAxis: {
data: ['Series A', 'Series B']
},
yAxis: {},
series: [
{
name: 'Series A',
type: 'bar',
data: [200, 300, 400]
},
{
name: 'Series B',
type: 'bar',
data: [100, 200]
}
]
}
在这个例子中,我们定义了两个系列Series A
和Series B
,组成两个柱状图。我们还定义了legend
,包含了每个系列中的所有数据。这样,图例的数据数量即为5
,而系列 A 和 B 中的数据数量分别为3
和2
,导致ECharts
报错。
为了解决这个问题,我们需要确保每个系列的data
的数量与图例的数据数量相同。在本例中,每个系列应该有3
个和2
个数据,我们也应该相应地更新legend
的数据。