最近在用echarts开发页面可视化数据时,用到了UI提供的echarts 样式,需要自定义tooltip悬浮提示框的样式,最初在网上找了一些例子,都是你抄我的,我抄你的。
问题:如何自定义tooltip提示框中图标和文本样式?
echarts官网可自行查阅:
https://echarts.apache.org/zh/option.html#legend.tooltip
主要时tooltip中的formatter函数
通过console.log(params)我们可以在控制台看到他的内容:
tooltip: {
trigger: 'axis',
backgroundColor: '#FFFFFF',
borderColor: '#EEF1F7',
borderWidth: 1,
textStyle: {
width: 160,
height: 250,
lineHeight: 24,
color: '#666666',
fontSize: '14',
fontFamily: 'SourceHanSansCN-Normal'
},
formatter: params => {
// 获取xAxis data中的数据
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
params.forEach(item => {
dataStr += `<div>
<div style="margin: 0 8px;">
// 获取图标(小圆点)颜色,并且自定义样式为正方形,即要改变小圆点,只需重写marker的html片段,并修改样式即可
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
// 获取seriersName
<span>${item.seriesName}</span>
// 获取series中data
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
</div>
</div>`
})
return dataStr
}
},