需求是一进来要显示总数,鼠标移到某个色块上是显示当前色块数据,移出了又显示总数。
找了很久也没找到解决方案,最后是这么做的,算是把效果做出来了。
把总数写在title上,用富文本样式调整到中间位置。在鼠标移入移出事件上把标题隐藏和显示。相关代码如下:
` let option ={
title{
text: [’{name|总活动数}’, ‘{value|32}’].join(’\n '),
textStyle: {
rich: {
name: {
fontFamily: "PingFangSC-Regular",
fontSize: 14,
color: "rgba(0,0,0,0.45)",
lineHeight: 22,
marginBottom: "3px"
},
value: {
fontFamily: "HelveticaNeue",
fontSize: 30,
color: "rgba(0,0,0,0.85)",
lineHeight: 38,
},
},
}
}
}
this.myChart.on('mouseover', (params) => {
option.title.show = false
this.myChart.setOption(option);
});
this.myChart.on('mouseout', () => {
option.title.show = true
this.myChart.setOption(option);
});
`