vue中echart的tooltip自定义显示内容

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 }));
      },

这次就没有什么问题了。