echarts修改自定义tooltip

这是ui想要的效果图

1697353077662.png

echarts官方示例如下：

1697354340042.png

实现效果图需要在页面中需要添加如下代码

/** tooltip样式设置 - start */
:deep .echarts-tooltip {
    border-radius: 10px !important;
    border: none !important;
    color: #ffffff !important;
    background-color: #1A3166 !important;
}
:deep .echarts-tooltip div, :deep .echarts-tooltip div span{
    color: #ffffff !important;
}
/** tooltip样式设置 - end */

tooltip: {
    trigger: 'axis',
    className: 'echarts-tooltip',
    formatter: function(params: any) {
        var res = `<ul style="width:360px; height: 140px; padding: 16px 14px 0 14px; display: flex;flex-direction: column;flex-wrap: wrap;list-style: none;justify-content: space-between;">`
        params.forEach(function(item: any) {
            if (item.data) {
                res += `<li style="width: 48%;margin: 0 24px 10px 0;"><span>${item.marker}</span><span style="margin: 0 8px;">${item.seriesName}</span><span>${item.data}</span>℃</li>`;
            }
        });
        res += `</ul>`
        return res;
    }
}

刚开始只在tooltip中添加了className: 'echarts-tooltip',后来发现没办法调整列表flex布局就又使用了formatter，自己写标签并且可以直接在标签内添加内联样式。这个效果我俩小时才整出来，希望能帮到大家吧~~~

官方配置项手册的这里

image.png