uniapp中使用ucharts进行自定义tooltip（实现换行，改变字体颜色）

概述 

使用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;
    }

添加完之后的部分代码块

        2.3最后实现效果

3.解决tooltip字体颜色问题

        3.1在ucharts.js中找到drawToolTip函数进行修改写入

        3.2在ucharts.js中找到 draw text list (直接在页面搜draw text tlist)这部分函数进行修改写入

        3.3实现效果