echartstooltip样式修改（2）
最近做了⼀个需求，UI设计是这样：
我脑袋⾥想到两种⽅式：要么⽤echarts⾥⾯的 ----> tooltip -------> formatter来进⾏设置；要么写个组件，⽤⿏标事件mouseover和mouseout来控制组件的显⽰。
但是，我吧，就想⽤formatter来实现。。。。
关于tooltip的配置如下：
tooltip: {
textstyletrigger: 'axis',
axisPointer: {
type: 'shadow',
textStyle: {
color: '#ffffff'
}
},
backgroundColor: null,
// borderColor: '#FCEA00',
// borderWidth: 1,
borderRadius: 0,
padding: [10, 10, 10, 10],
textStyle: {
align: 'left',
fontSize: 14
},
formatter: function (v) {
var str = ''
v.forEach((item) => {
var unit = item.seriesName === '温度' ? '℃' : '%'
var str2 = item.marker + type + item.seriesName + ': ' + '<span >' + ite m.data[1] + unit + '</span>' + '<br/>'
str = str + str2
})
var y = new Date(parseInt(v[0].axisValue * 1000)).getFullYear()
var m = new Date(parseInt(v[0].axisValue * 1000)).getMonth() + 1 > 9 ? new Date(parseInt(v[0].axisValue * 1000)).getMonth() + 1 : '0' + (new Da te(parseInt(v[0].axisValue * 1000)).getMonth() + 1)
var d = new Date(parseInt(v[0].axisValue * 1000)).getDate() > 9 ? new Date(parseInt(v[0].axisValue * 1000)).getDate() : '0' + new Date(parseInt( v[0].axisValue * 1000)).getDate()
var h = new Date(parseInt(v[0].axisValue * 1000)).getHours() > 9 ? new Date(parseInt(v[0].axisValue * 1000)).getHours() : '0' + new Date(parseI nt(v[0].axisValue * 1000)).getHours()
var mm = new Date(parseInt(v[0].axisValue * 1000)).getMinutes() > 9 ? new Date(parseInt(v[0].axisValue * 1000)).getMinutes() : '0' + new Date( parseInt(v[0].axisValue * 1000)).getMinutes()
var dStr = y + '-' + m + '-' + d + ' ' + h + ':' + mm
var inner = '<div >' + dStr + '<br/>' + str + '</div>'
var out = '<div >' + inner + '</div>'
return out
}
},
1. ⾸先，将tooltip的backgroundColor设为null ，不设border，假装没有任何的背景和框框
2. ⾥⾯的数据先到合适的排列，再加个div 设个border
3. 最后外⾯再加个div 写四个⾓的border
结果：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论