如何使用 Apache Echarts 为多个系列设置工具提示标签?
How do you set tooltip labels for multiple series using Apache Echarts?
我正在尝试生成一个使用日期作为 x 轴和两个不同的 y 轴的折线图。我大部分时间都在使用它,但我无法获得工具提示以正确显示第二行的标签。
要查看此内容,请转到 ECharts Demo Editor 并输入以下代码:
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'
}
]
}
]
我正在尝试生成一个使用日期作为 x 轴和两个不同的 y 轴的折线图。我大部分时间都在使用它,但我无法获得工具提示以正确显示第二行的标签。
要查看此内容,请转到 ECharts Demo Editor 并输入以下代码:
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'
}
]
}
]