uni-app ucharts自定义换行tooltips
实现效果：https://i-blog.csdnimg.cn/direct/3c7741475508480abbffa2c5ba9db721.png
第一步：在uni_modules文件夹下找到config-ucharts.js和u-charts.js文件
https://i-blog.csdnimg.cn/direct/4d5a657ea7bb471c9b4a4ad995e9bfa4.png
第二步：在config-ucharts.js文件中配置换行格式
https://i-blog.csdnimg.cn/direct/ebfddbc8d62d40189db10fe278d25d04.png
// 换行格式
"wrapTooltip":function(item, category, index, opts){
return item.name+'：'+item.data
}, 第三步：在u-charts.js文件中找到getToolTipData函数，修改换行文本
https://i-blog.csdnimg.cn/direct/95df98bfe09e421eb4609a29d78aba4e.png
var wrapTitleText = null;
var textList = seriesData.map(function(item) {
let titleText = null;
if (opts.categories && opts.categories.length>0) {
titleText = categories;
};
wrapTitleText = titleText;
return {
text: option.formatter ? option.formatter(item, titleText, index, opts) : item.name + ': ' + item.data,
color: item.color,
legendShape: opts.extra.tooltip.legendShape == 'auto'? item.legendShape : opts.extra.tooltip.legendShape
};
});
textList.unshift({text:wrapTitleText,color:null})
var offset = {
x: Math.round(points.x),
y: Math.round(points.y)
};
// console.log("文本"+JSON.stringify(textList))
return {
textList: textList,
offset: offset
}; 第五步：在图表页面引入提示框格式，tooltipFormat="wrapTooltip"
https://i-blog.csdnimg.cn/direct/f443694fe5374029b3c29990c60daf4e.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]