echarts經(jīng)常需要展示自定義的數(shù)據(jù)，如下圖所示，本來坐標數(shù)據(jù)是日期和百分比，但是要求折線圖的tooltip卻要展示具體數(shù)據(jù)，展示結(jié)果如下

1.png

解決方法

1.組件引用

<Card style="margin-bottom: 20px;">
      <chart-rate-line style="height: 500px;" v-if="allowShow" :xData="xAllowData" :titleData="titleAllowData" :yData="yAllowData" text="簽到率"/>
    </Card>

2.數(shù)據(jù)拼湊

// 根據(jù)日期獲取簽到率
    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['已簽到人數(shù)'] = item.successNum
          c['應(yīng)簽到人數(shù)'] = 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 + '<br>' + key + ':' + showData[key]
                }
              }
            }
            return showText
          }
        },

這一步中通過獲取傳入得key值即可，