遇到的问题
ECharts 中如果纵坐标不是数值，而是百分比时，需要对纵坐标与tooltip进行数据处理。
ECharts 配置
this.options = {
title: {
text: '标题'
},
tooltip: {
trigger: 'axis',
formatter: function (info) { // 百分比时的tooltip处理 此处用函数方式是因为有可能是多条折线
let result = ''
let content = ''
info.map(item => {
if (item.data.empty) {
result = ''
} else {
content += `${item.marker} ${item.seriesName} ${item.value}${是否需要展示百分比 ? '%' : ''}<br/>`
result = `<span style='font-size: 14px;'>${item.name}</span> <br/> ${content}`
}
})
return result
}
},
legend: {
right: 10,
},
xAxis: {
type: 'category',
data: ['三月', '四月']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: 是否需要展示百分比 ? '{value}%' : '{value}'
}
},
series,
}
自定义tooltip：tooltips.formatter 有两种方式
1. 字符串模版
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
- 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
- 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
- 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
- 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。
2. 回调函数
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]
例子
字符串模版
tooltip: {
trigger: 'axis',
formatter: function (length) { // 百分比时的tooltip处理
// 对于展示多条折线的这种情况 不能用该方法进行处理 在点击数据描述进行隐藏单个数据时 会导致tooltip 展示有问题
if (length === 2) { // 两条折线
return 是否需要展示百分比 ? '{b0}<br/>{a0}:{c0}%<br/>{a1}:{c1}%' : '{b0}<br/>{a0}:{c0}<br/>{a1}:{c1}'
}
return 是否需要展示百分比 ? '{b0}<br/>{a0}:{c0}%' : '{b0}<br/>{a0}:{c0}'
}
},
正常效果
image.png
异常效果
对于展示多条折线的这种情况 不能用该方法进行处理 在点击数据描述进行隐藏单个数据时 会导致tooltip 展示有问题
image.png
回调函数
tooltip: {
trigger: 'axis',
formatter: function (info) { // 百分比时的tooltip处理 此处用函数方式是因为有可能是多条折线
let result = ''
let content = ''
info.map(item => {
if (item.data.empty) {
result = ''
} else {
content += `${item.marker} ${item.seriesName} ${item.value}${是否需要展示百分比 ? '%' : ''}<br/>`
result = `<span style='font-size: 14px;'>${item.name}</span> <br/> ${content}`
}
})
return result
}
}
效果
回调函数的好处也在于 可以展示对应的折线的，颜色等信息，更加的美观
image.png
