/**
* echarts的tooltip顯示的內容
* @param {*} params 座標軸觸發獲取的源數據
* @param {*} noPercent 是否帶%,true或false
*/
export const chartTooltip = (params, noPercent) => {
// 判定數據是否爲對象或者數組
if (!(params instanceof Array)) {
return '請傳入正確格式的數組'
}
// axisValue是option裏的tooltip,name是series裏的tooltip
let tempStr = params[0].axisValue
? `${params[0].axisValue}<br/>`
: `${params[0].name}<br/>`
params.forEach((val, key) => {
let tempBgColor = params[key].color
let tempMarkerHtml = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:8px;height:8px;background-color:${tempBgColor};color:#ccd3d9;"></span>`
let tempStrAA = params[key].seriesName
let tempStrBB = unitConverter(params[key].value)
if (key < params.length - 1) {
let tempStrA = noPercent
? `${tempMarkerHtml}${tempStrAA}:${tempStrBB}<br/>`
: `${tempMarkerHtml}${tempStrAA}:${tempStrBB}%<br/>`
tempStr += tempStrA
} else {
let tempStrB = noPercent
? `${tempMarkerHtml}${tempStrAA}:${tempStrBB}`
: `${tempMarkerHtml}${tempStrAA}:${tempStrBB}%`
tempStr += tempStrB
}
})
return tempStr
}
使用方法:
import { chartTooltip } from '@/config/myUtils'
// option裏面
tooltip: {
formatter (params) {
return chartTooltip(params)
}
}
// series裏面單個item
series: [{
name: '0%以下',
type: 'bar',
barGap: 0,
barMaxWidth: '20%',
data: this.y1Data,
tooltip: {
formatter (params) {
let tempArr = [params]
return chartTooltip(tempArr)
}
}
}]
展示效果如下(樣式可自定義)