vue中echart的tooltip自定义
目的：让tooltip显示自定义格式数据，甚至是显示横纵坐标以外的数据。
1.先介绍一下常用情况。
option:{
title: {
text: '温度信号对比图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['室内温度','信号质量'],
textStyle:{
fontSize:18
}
},
color: ['#54a0ff','#c23531'],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
itemSize:22,
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: []
},
yAxis: {
max: function(value){
return Math.round(1.1*value.max)
},
min:function(value){
return Math.round(0.9*value.min)
},
type: 'value'
},
series: [
{
name:'室内温度',
type:'line',
smooth:0.5,
data:[]
},
{
name:'信号质量',
type:'line',
smooth:0.5,
data:[]
}
]
},
tooltip的trigger有三种选项“item”“axis”“none”，选择axis就是显示横坐标的内容。
这样设置，鼠标滑过对应点时，tooltip就会显示横坐标内容和对应纵坐标的温度和信号。
2.若要对显示内容进行数据处理，
例如：增加单位、增加说明等。
需要在tooltip中加入formatter属性。 formatter支持字符串模板和回调函数两种形式。
字符串模板格式例如：
formatter: '{b0}: {c0}<br />{b1}: {c1}'//字符串模板含义见官网https://www.isqqw.com/echarts-doc/zh/option.html#tooltip.formatter
回调函数格式例如：
formatter:function(params){
return
'房间号:'+params[0].name+'<br/>'+
'温度:'+params[0].data+'℃'+'<br/>'+
'信号:'+params[1].data+'<br/>';
}
具体信息可通过console.log（params）查看。
3.若要显示横纵坐标以外的数据
例如横坐标是房间号，纵坐标是温度和信号，还要在
tooltip中显示对应数据的时间点。
首先需要对series的数据结构处理：
series: [
{
name:'室内温度',
type:'line',
smooth:0.5,
data:[
{
value:0,
time:0
}
]
},
{
name:'信号质量',
type:'line',
smooth:0.5,
data:[]
}
]
在温度data中增加value和time，value用于显示温度数值。
然后在数据处理时，将温度和时间一并放入：
parseData(){
this.option.xAxis.data=this.dataList.map(item=>item.roomNum)
this.option.series[0].data = this.dataList.map(item => ({ value: item.temp, time: item.timestamp }));
this.option.series[1].data=this.dataList.map(item=>item.signalQuality)
},
注意：不能写成：
parseData(){
this.option.xAxis.data=this.dataList.map(item=>item.roomNum)
this.option.xAxis.data.value=this.dataList.map(item=>item.temp)
this.option.xAxis.data.time=this.dataList.map(item=>item.timestamp)
this.option.series[1].data=this.dataList.map(item=>item.signalQuality)
},
在第二行中,将 this.dataList 中的 temp 属性映射到 this.option.series[0].data 中的 value 属性。但是，在第三行中,又将 this.dataList 中的 timestamp 属性映射到 this.option.series[0].data 中的 time 属性。这意味着将覆盖 value 属性，而不是将 time 属性添加到 data 数组中。
然后在formatter中这样设置：
tooltip: {
trigger: 'axis',
formatter:function(params){
return '房间号:'+params[0].name+'<br/>'+
'温度:'+params[0].data.value+'℃'+'<br/>'+
'信号:'+params[1].data+'<br/>'+
'时间:'+params[0].data.time;
}
},
就能显示横坐标信息、纵坐标信息、以及对应时间了。
4.bug查询与代码优化
以上代码在只选择一条曲线，鼠标滑动到tooltip上时会报错。经查找发现是因为在选中一条曲线时formatter的params中只有params[0]没有params[1]。所以代码做了以下优化：
formatter: function(params) {
let message = `房间号:${params[0].name}<br/>`;
for (let i = 0; i < params.length; i++) {
message += `${params[i].seriesName}:${params[i].data.value}<br/>`;
}
message += `时间:${params[0].data.time}`;
return message;
}
同时，为保证在只选择信号页面时也有时间所以在series数据结构和数据处理方法中也做了改变
series: [
{
name:'室内温度',
type:'line',
smooth:0.5,
data:[
{
value:0,
time:0
}
]
},
{
name:'信号质量',
type:'line',
smooth:0.5,
data:[
{
value:0,
time:0
}
]
}
]
//处理返回的数据
parseData(){
this.option.xAxis.data=this.dataList.map(item=>item.roomNum)
this.option.series[0].data = this.dataList.map(item => ({ value: item.temp, time: item.timestamp }));
this.option.series[1].data = this.dataList.map(item => ({ value: item.signalQuality, time: item.timestamp }));
},
这次就没有什么问题了。
