概述
使用ucharts图表之后,根据ui图需要将tooltip中的数据进行换行并字体颜色也需要改变,但是ucharts并没有开放出来这个属性,所以只能去改源码
初始图
最后效果图
解决方法
1.官方提供了,tooltipCustom(tooltip-format),可以自定义提示窗
<!-- tooltip-format="tooltipFormat" 自定义tooltip -->
<qiun-data-charts style="width: 100%;height: 100%;" type="area"
:opts="opts"
:chartData="chartData"
:ontouch="true"
tooltip-format="tooltipFormat"/>
2.解决tooltip换行问题
2.1在config-ucharts.js中修改源码
在formatter对象中添加自定义换行函数和后面ucharts.js中写的函数相对应
"tooltipFormat":function(item, category, index, opts){
if(index !== undefined){
item.color='unset' //这里我给了unset去掉了tooltip中字前面的小竖线样式
return "自定义//" + new Date().getFullYear()+'-'+category + '//' + item.data+' kWh/m³';
}
}
添加完之后的整个代码块
2.2在ucharts.js中修改源码
在ucharts.js中找到drawToolTip函数进行修改写入以下代码
// 此处自定义实现解决自定义换行问题,写死,通过识别'//'来进行切割,从而实现换行
if (textList[0].text.split("/")[0] == "自定义") {
let newTextList = [
{
"color":textList[0].color,
"text":textList[0].text.split("//")[1]
},
{
"color":textList[0].color,
"text":textList[0].text.split("//")[2],
"fontColor":"#4065E0",//这是为了改变字体颜色,如果只要求实现换行可以不写
}
]
textList = newTextList;
}
添加完之后的部分代码块