最近想修改悬浮框内的内容,但是网上一搜索,发现都是教你怎么修改样式的,不符合我的要求,我想要的是在悬浮框内显示自己想要的内容,比如说时间。
首先需要弄清楚几点情况。
一、分析
1、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,
}
2、由上面第一条可以得知,想自定义变量比较困难,还有办法,就是修改原有变量,就是这个data变量了。
3、修改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="<p>名称:"+params[0].seriesName+"值:"+params[0].data.value+"时间:"+params[0].data.mDate+"</p>";
return res;
}
},
到此,修改悬浮框内容,就应该成功了。
最后,感谢一下引用:
echarts自定义tooltip显示内容
echarts自定义tooltip提示框内容