echarts的tooltip展示自定义值

echarts经常需要展示自定义的数据，如下图所示，本来坐标数据是日期和百分比，但是要求折线图的tooltip却要展示具体数据，展示结果如下

1.png

解决方法

1.组件引用

2.数据拼凑

// 根据日期获取签到率
    getChartSignDayByMonth () {
      let sendData = {
        time: '2021-01'
      }
      signHttp.getChartSignDayByMonth({ ...sendData }).then(res => {
        let a = res.data
        this.xAllowData = []
        this.yAllowData = []
        this.titleAllowData = ['签到率']
        let b = []
        a.forEach(item => {
          this.xAllowData.push(item.day)
          let c = {}
          c['value'] = item.ratio * 100
          c['已签到人数'] = item.successNum
          c['应签到人数'] = item.workNum
          b.push(c)
        })
        this.yAllowData = [
          {
            name: '签到率',
            type: 'line',
            stack: '总量',
            data: b
          }
        ]
        this.allowShow = true
      })
        .catch(function (error) {
          console.log(error)
        })
    },

3.改写组件

tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            const showData = params[0].data
            let showText = ''
            for (let key in showData) {
              if (key !== 'value') {
                if (showText === '') {
                  showText = key + ':' + showData[key]
                } else {
                  showText = showText + '
' + key + ':' + showData[key]
                }
              }
            }
            return showText
          }
        },

这一步中通过获取传入得key值即可，