/**
* 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)
}
}
}]
展示效果如下(样式可自定义)
![](https://i-blog.csdnimg.cn/blog_migrate/697c2eb26dad6541cb7aa8691cd6bfe1.png)