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

Question

我正在使用带有 antd 和 react 的 echarts 库处理图表，我必须遵循特定的工具提示设计，如下所示：

我能做的是：

工具提示实现：

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

有什么方法可以添加向下箭头和链接（工具提示和符号之间的淡蓝色线）

css 解决方案是可以接受的，但我一般来说是 css 和前端开发的初学者

任何建议都会有所帮助，谢谢

Answer 1

要添加该垂直轴线，您只需更改为trigger: 'axis' 。 请注意position: 'top'不适用于此选项，因此您必须将其更改为如下所示：

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%']
}, ...

关于向下箭头，我看到两个选项：

将格式化程序选项更改为函数：

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

然后您可以使用 css 创建箭头，分配给该tooltip类（请参阅此处工具提示箭头下的示例： https : //www.w3schools.com/css/css_tooltip.asp ）。

其他选项是手动添加工具提示箭头的背景图像并通过extraCssText选项分配它，如下所示：

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;",
    ...
}

在那里您可以添加更多 css 选项以使其看起来像您想要的（我只是选择了一个随机气泡文本框）。 我个人更喜欢第一个选项。 祝你好运！