如何使用 Apache Echarts 為多個系列設置工具提示標簽？

Question

我正在嘗試生成一個折線圖，該折線圖使用 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將變為藍線並且標簽在工具提示中正常工作，因此在使用多個系列時似乎缺少某些東西。

我懷疑對此的修復非常簡單明了，但我已經花了相當多的時間在它上面並且沒有任何運氣。 任何幫助將不勝感激。

Answer 1

為系列指定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'
            }
        ]
    }
]