目录
引言
在图表开发过程中,图表自带的数据标签样式往往不满足用户的需要,而且对空数据也不会做兼容展示处理(如下图)。这时我们便需要对图标的tooltip进行自定义。
字符串模板
参考官方文档。这种方法局限性明显,在此不多赘述
回调函数
依赖于对数据的拼凑。我们可以先输出回调函数的返参,再根据需求进行拼凑。
{
tooltip: {
formatter:function(params){console.log(params)}
}
}
输出以下
拼凑
tooltip: {
formatter: function(params) {
if (!params || !params.value) return;
let formatterStr = '';
params.value.forEach((item, index) => {
formatterStr = formatterStr.concat(
// 外部变量
`${userData.indicator[index].name}:${item ? item : 0}\n`,
);
});
return `${params.data.name}\n${formatterStr}`;
},
}
将tooltip限制在图表区域内:
避免tooltip移到div边缘的时候,tooltip被遮挡/隐藏
tooltip: {
confine: true,
}
不希望以</br>而是以\n作为换行符
tooltip: {
renderMode: 'richText', // 默认为html
},