如何使用ApacheEcharts为多个系列设置工具提示标签



我正在尝试生成一个使用日期作为x轴和两个不同y轴的折线图。我大部分时间都在工作,但我无法获得工具提示来正确显示第二行的标签。

要查看此信息,请转到ECharts演示编辑器并输入以下代码:

option = {
xAxis: {
type: 'time'
},
yAxis: [
{
type: 'value'
},
{
type: 'value'
}
],
dataset: {
source: [
{ date: '2020-01-24', orders: 4, sales: 250 },
{ date: '2020-01-25', orders: 3, sales: 250 },
{ date: '2020-01-26', orders: 2, sales: 375 },
{ date: '2020-01-27', orders: 2, sales: 380 },
{ date: '2020-01-28', orders: 4, sales: 325 },
{ date: '2020-01-29', orders: 5, sales: 375 },
{ date: '2020-01-30', orders: 6, sales: 500 },
{ date: '2020-01-31', orders: 4, sales: 425 },
{ date: '2020-02-01', orders: 2, sales: 280 },
{ date: '2020-02-03', orders: 3, sales: 580 },
{ date: '2020-02-04', orders: 4, sales: 250 },
{ date: '2020-02-05', orders: 4, sales: 350 }
]
},
series: [
{ 
type: 'line',
yAxisIndex: 0, 
dimensions: [
{
type: 'time',
name: 'date',
displayName: ''
},
{
type: 'float',
name: 'orders',
displayName: 'Orders'
}
]
},
{
type: 'line', 
yAxisIndex: 1, 
dimensions:[
{
type: 'time',
name: 'date',
displayName: ''
},
{
type: 'int',
name: 'sales',
displayName: 'Sales'
}
]
}
],
tooltip: {
trigger: 'axis'
}
};

正如您所看到的,这些线和两个y轴都正确渲染,但第二个系列的标签(绿线(是空的,而不是Sales。但是,如果我从数组中删除第一个系列,Sales将变为蓝线,并且标签在工具提示中正常工作,因此在使用多个系列时,我似乎缺少了一些东西。

我怀疑解决这个问题的方法很简单,也很明显,但我已经花了相当多的时间,运气不佳。如有任何帮助,我们将不胜感激。

name赋予级数,而不是将displayName赋予维度。

series: [
{ 
type: 'line',
yAxisIndex: 0,
name:'Orders', // Here
dimensions: [
{
type: 'time',
name: 'date'
},
{
type: 'float',
name: 'orders'
}
]
},
{
type: 'line', 
yAxisIndex: 1, 
name:'Sales', // Here
dimensions:[
{
type: 'time',
name: 'date'
},
{
type: 'int',
name: 'sales'
}
]
}
]

最新更新