这是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
