【问题标题】:How do you set tooltip labels for multiple series using Apache Echarts?如何使用 Apache Echarts 为多个系列设置工具提示标签?
【发布时间】:2021-07-06 23:36:58
【问题描述】:

我正在尝试生成一个折线图,它使用日期作为 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 变成蓝线,并且标签在工具提示中正常工作,所以在使用多个系列时似乎缺少一些东西。

我怀疑解决此问题的方法非常简单明了,但我已经花了相当多的时间来解决这个问题,但没有任何运气。任何帮助将不胜感激。

【问题讨论】:

    标签: javascript echarts apache-echarts


    【解决方案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'
                }
            ]
        }
    ]
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-08-22
      • 1970-01-01
      • 2021-07-03
      • 2011-02-13
      • 1970-01-01
      相关资源
      最近更新 更多