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

Question

I'm trying to generate a line chart that uses date for the x-axis and two different y-axis. I have it mostly working, but I can't get the tooltip to display the label properly for the second line.

To see this, go to the ECharts Demo Editor and enter the following code:

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'
    }
};

As you can see, the lines render correctly, as do both y axes, but the label for the second series (green line) is empty rather than Sales . However, if I delete the first series from the array, Sales becomes the blue line and the label works correctly in the tooltip, so there seems to be something I'm missing when using multiple series.

I suspect the fix for this is quite simple and obvious, but I've spent a fair amount of time on it and haven't had any luck. Any help would be greatly appreciated.

Answer 1

Give name to series instead of displayName to dimension.

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'
            }
        ]
    }
]