tooltip: {
trigger: 'item',
backgroundColor: 'none',
position: function (pos, params, dom, rect, size) {
//我这个是每次显示30条数据 所以这么判断
var obj = params.dataIndex < 15 ? "right" : "left"
return obj;
},
formatter: (params) => {
//收入和支出是不同颜色 背景 还带个箭头
var str = this.activeNum == 0 ? '收入' : '支出',
bg = this.activeNum == 0 ? '#E2F8EE' : '#FFE0C9',
textColor = this.activeNum == 0 ? '#00A862' : '#F29C00',
//两个箭头 小于15的显示左边的 大于的显示右边的
//这个字符串拼接感觉好麻烦
showLeft = params.dataIndex < 15 ? "block" : "none",
showRight = params.dataIndex < 15 ? "none" : "block"
return '<div style="display:flex;align-items:center;justify-content:space-between;color:' + textColor + '"><div style="display:' + showLeft + '"><b style="content:\'\';display: inline-block;height: 0.08rem;width: 0.08rem;border-top: 0.08rem solid transparent; border-bottom: 0.1rem solid transparent;border-right: 0.1rem solid ' + bg + ';"></b></div><div style="flex:1;border-radius:0.05rem;padding: 0.02rem 0.09rem;background:' + bg + '"><p>' + params.name.split('-')[0] + '月' + params.name.split('-')[1] + '日' + str + '</p><p>' + params.value + '元</p></div><div style="display:' + showRight + '"><b style="content:\'\';display: inline-block;height: 0.08rem;width: 0.08rem;border-top: 0.08rem solid transparent; border-bottom: 0.1rem solid transparent;border-left: 0.1rem solid ' + bg + ';"></b></div></div>';
}
},
效果图: