自定义echart悬浮框的内容及样式

最近想修改悬浮框内的内容，但是网上一搜索，发现都是教你怎么修改样式的，不符合我的要求，我想要的是在悬浮框内显示自己想要的内容，比如说时间。
首先需要弄清楚几点情况。

一、分析

１、echart不支持自定义变量，或者说你可以取改js里的内容，来达到自定义变量的目的，这个想来比较复杂，我放弃。echart中的变量总共只有那么几个，如下：

 {
     componentType: 'series',
     // 类型
     seriesType: string,
     // 系列在传入的 option.series 中的 index
     seriesIndex: number,
     // 类目的名称，就是折线图的一条折线代表的内容的名称
     seriesName: string,
     // 数据名，类目名
     name: string,
     // 数据在传入的 data 数组中的 index
     dataIndex: number,
     // 传入的原始数据项，包含value在内的值的一个集合
     data: Object,
     // 传入的数据值，最后画出折线图依据的值
     value: number|Array,
     // 数据图形的颜色
     color: string,
     // 饼图的百分比
     percent: number,
 }

２、由上面第一条可以得知，想自定义变量比较困难，还有办法，就是修改原有变量，就是这个data变量了。
３、修改data变量一个注意点，不管怎么增减他的值，必须有一个值的变量名位value，包含在data中，因为这个value就是画图的数据依据，默认情况下，data里只有value，所以在这时，写value还是data是一样的。

二、解决

那么data是个什么样的数据集？通过浏览器的console显示，data其实就是一个包含了map集的array集，这就很清楚了。定义一个数组，再把你的array集合放入，问题解决。

var strlist=[];//用来存放map集
var metaData=[strlist];//用来存放array集
var str={"value":"111","mDate":"2020-1-1"};//存放map集
var str2={"value":"222","mDate":"2020-1-2"};//存放map集
var str3={"value":"333","mDate":"2020-1-3"};//存放map集
strlist[0]=str;//将map集放入array集
strlist[1]=str2;//将map集放入array集
strlist[2]=str3;//将map集放入array集

上面就是数据存入的一个过程。
然后就是传入echart中显示，我只写出主要部分。

function echart(metaData){
…………
var serie={
	name:"test",
	type:"line",
	symbol:"cycle",
	symbolSize:10,
	data:metaData,
}
…………
//下面是悬浮框的设置
tooltip:{
	trigger:'axis',
	axisPointer:{
		type:'shadow
	}
	//下面是自定义悬浮框的部分，修改悬浮框的样式也是在这里，就是html的样式，自由发挥。
	formatter:function(params){
		var res="
名称:"+params[0].seriesName+"值:"+params[0].data.value+"时间:"+params[0].data.mDate+"
";
		return res;
	}
},

到此，修改悬浮框内容，就应该成功了。
最后，感谢一下引用：
echarts自定义tooltip显示内容
echarts自定义tooltip提示框内容