echarts的tooltip显示百分号 加 % 的几种方式
阐述
在项目上线以后,需要根据后端的数据来源,前端渲染页面时,echarts需要前端自行给页面添加 % 。根据上图效果,可以看到有两个地方需要添加 % 的。一个是是悬浮框提示信息里面,另一个地方柱状图上方需要添加 %。
解决方案如下:
首先我们给悬浮添加 %,需要操作 tooltip 下的 format ,代码如下:
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
},
formatter:function(params) {
var str = params[0].name + '<br>'
for(let item of params) {
str += item.name + ' : ' + item.value + '%<br>'
}
return str;
}
}
给柱状图上面添加 %,则需要给 series 中 label 添加显示相关信息,代码如下:
series: [
{
name: "课程",
type: "bar",
data: [],
z: 11,
label: {
normal: {
show: true,
formatter:function(params){ //标签内容
return params.value + '%'
},
position: 'top',
fontSize: 10,
color:'#cdcdcd'
}
},
},
...
]
tooltip的值配置保留2位小数,且数据后面添加%或者其他单位
tooltip: {
trigger: 'axis',
//核心代码,处理tooltip中的数据需要在此formatter函数中做处理
formatter(params) {
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
console.log('tooltip数据值',params[i].value)
//遍历出来的值一般是字符串,需要转换成数字,再进项tiFixed四舍五入
relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2) + '%'
}
return relVal;
},
axisPointer: {
type: 'cross',
crossStyle: {
color: '#000',
},
},
},