echarts经常需要展示自定义的数据，如下图所示，本来坐标数据是日期和百分比，但是要求折线图的tooltip却要展示具体数据，展示结果如下
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.数据拼凑
// 根据日期获取签到率
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 + '<br>' + key + ':' + showData[key]
}
}
}
return showText
}
},
这一步中通过获取传入得key值即可，
