如何在ECharts中实现阶梯图并显示tooltip？

Question

我需要实现的效果如下，每个metric是单独的一条type line的serie，然后针对于goal line，需要显示成分段式的阶梯图的样子。我尝试使用series type: 'lines'实现可以实现我需要的效果，但是遇到另外一个问题的是tooltip中没有显示goal这个serie，我想在tooltip中显示goal这个serie，请问要如何实现呢？如果没有办法显示type lines的serie，还有别的方法实现我图中的这种阶梯图的效果吗？谢谢？

这里是在线demo，echarts option的代码如下：

option = option = {
    "useUTC": false,
    "tooltip": {
        "appendTo": "body",
        "borderColor": "transparent",
        "show": true,
        "trigger": "axis",
        "enterable": true
    },
    "grid": {
        "left": "70px",
        "right": "20px",
        "bottom": "50px",
        "top": "40px"
    },
    "legend": {
        "show": true,
        "bottom": "0",
        "type": "scroll",
        "data": [
            "metric",
            "goal"
        ]
    },
    "dataset": [
        {
            "id": "metric",
            "dimensions": [
                "12958",
                "adb1eaef-fcd4-4c4e-a3e6-fe6974cf4be2",
            ],
            "source": [
                [
                    "2024-01-01",
                    341613,
                    
                ],
                [
                    "2024-01-03",
                    359314.71428571426,
                    379032
                ],
                [
                    "2024-01-05",
                    123441,
                    312341
                ],
                [
                    "2024-01-07",
                    86441,
                    92341
                ],
                [
                    "2024-02-01",
                    341613,
                    123212
                ],
                [
                    "2024-02-02",
                    354755.4285714286,
                    322212
                ],
                [
                    "2024-02-03",
                    359314.71428571426,
                    379032
                ],
                [
                    "2024-02-04",
                    542122,
                    312312
                ],
                [
                    "2024-02-05",
                    123441,
                    312341
                ],
                [
                    "2024-02-06",
                    264411,
                    123419
                ],
                [
                    "2024-02-07",
                    864412,
                    923411
                ],
                [
                    "2024-03-01",
                    464412,
                ]
            ]
        },
        {
            "id": "goal",
            "dimensions": [
                "year",
                "month",
                "value"
            ],
            "source": [
                {
                    "year": "2024",
                    "month": "01",
                    "value": 150000
                },
                {
                    "year": "2024",
                    "month": "02",
                    "value": 300000
                }
            ]
        }
    ],
    "xAxis": {
        "type": "time",
        "inverse": false,
        "axisTick": {
            "show": false
        }
    },
    "yAxis": {
        "type": "value",
        "splitLine": {
            "show": true
        },
        "axisLine": {
            "show": false
        }
    },
    "series": [
        {
            "type": "line",
            "name": "metric",
            "showSymbol": false,
            "datasetIndex": 0,
            "encode": {
                "x": "12958",
                "y": "adb1eaef-fcd4-4c4e-a3e6-fe6974cf4be2"
            }
        },
        {
            "name": "goal",
            "type": "lines",
            "coordinateSystem": "cartesian2d",
            "symbol": "none",
            "lineStyle": {
                "color": "orange",
                "width": 3,
                "type": "dashed"
            },
            "data": [
                {
                    "coords": [
                        [
                            1704038400000,
                            150000
                        ],
                        [
                            1706716799999,
                            150000
                        ]
                    ]
                },
                {
                    "coords": [
                        [
                            1706716800000,
                            300000
                        ],
                        [
                            1709222399999,
                            300000
                        ]
                    ]
                }
            ]
        }
    ]
}

Answer 1

使用自定义 tooltip

"tooltip": {
    "appendTo": "body",
    "borderColor": "transparent",
    "show": true,
    "trigger": "axis",
    "enterable": true,
    "formatter": function(params) {
        let result = '';
        // 格式化日期
        const date = new Date(params[0].value[0]);
        result += date.toLocaleDateString() + '<br/>';
        
        // 添加 metric 值
        result += `<div style="display:flex; align-items:center;">
            <span style="display:inline-block; width:10px; height:10px; border-radius:50%; background-color:${params[0].color}; margin-right:5px;"></span>
            <span>metric: ${params[0].value[1]}</span>
        </div>`;
        
        // 添加 goal 值 - 根据日期确定当前的 goal 值
        let goalValue = 150000; // 默认1月的值
        if (date >= new Date('2024-02-01')) {
            goalValue = 300000; // 2月的值
        }
        
        result += `<div style="display:flex; align-items:center;">
            <span style="display:inline-block; width:10px; height:10px; border-radius:50%; background-color:orange; margin-right:5px;"></span>
            <span>goal: ${goalValue}</span>
        </div>`;
        
        return result;
    }
}