使用 react 在 echarts 中自定义工具提示设计

Question

I'm working on a chart using echarts library with antd and react and I have to follow a specific tooltip design as below :

what I could do is :

tooltip implementation :

 const chartOptions = {


    tooltip: {
        trigger: 'item',
        responsive: true,
        position: 'top',
        formatter: '{c}',
        backgroundColor: '#fafcfe',
        borderColor: '#c8e2f7',
        borderWidth: '0.8',
        textStyle: {
            color: '#5d6f80'
        }
    },
    xAxis: {
        data: xdata,
    },

    yAxis: {
        type: 'value',
        position: 'right',
    },
    series: [{
        data: data1,
        type: 'line',
        name: 'data1',
    },
    {
        data: data2,
        type: 'line',
        name: 'data2',
    } ] 
} 

is there any way to add the down arrow and the link ( baby blue line between the tooltip and symbol)

css solution is acceptable but I'm beginner in css and frontend development in general

any suggestion would be helpful, thank you

Answer 1

To add that vertical axis line, you can simply change to trigger: 'axis' . Beware that position: 'top' does not work with this option, so you would have to change it to something like this:

position: function (point) {
    return [point[0], '20%'];
    // if u wanna center it to the line, then u could do something like
    // [point[0] - width_of_tooltip / 2, '20%']
}, ...

Regarding the down arrow, I see two options:

Change the formatter option to a function:

formatter: function (params) {
        return `<div class="tooltip">${params[0]}</div>`;
    }, ...

and then you can create the arrow with css, assigned to that tooltip class (see the example under Tooltip Arrows here: https://www.w3schools.com/css/css_tooltip.asp ).

Other option, would be to manually add a background image of a tooltip arrow and assign it through the extraCssText option, like this:

tooltip: {
    trigger: 'axis',
    extraCssText: "background-image: url(https://f0.pngfuel.com/png/287/216/white-box-illustration-png-clip-art.png);background-size:cover;min-height:100px;",
    ...
}

there you can add more css options to make it look like you want (I just chose a random bubble text box). I'd personally like the first option better. Good luck!