问题:后端给的数据是小数,柱状图想按照百分数展示,颜色展示的图标也需要带上
效果如下:
解决方法:需要修改tooltip和横轴或者纵轴文字
1、tooltip修改(有多种方式可根据需要选择)
// 颜色是单颜色,打印输出的item.marker 存在内容可直接使用,可以使用这种方式(显示内容自行调整)
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
let str=params[0].name
params.forEach((item,index)=>{
str=str+'<br/>'+ item.marker + item.seriesName + ' : ' + (item.value*100).toFixed(2)+'%'
})
return str
}
},
//当颜色为渐变色,marker为空,需要自己模拟,使用这种方式(显示内容自行调整)
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
let str=params[0].name
params.forEach((item,index)=>{
str=str+'<br/>'+ '<div style="height: 10px;width: 10px;display:inline-block;margin-right:5px;border-radius: 50%;background:'+params[index].color+'"></div>' + item.seriesName + ' : ' + (item.value*100).toFixed(2)+'%'
})
return str
}
},
2、修改横轴或者纵轴的axisLabel显示
//xAxis一样
yAxis: [
{
type: 'value',
axisLabel: {
color: '#000',
fontSize: 10,
formatter: function (i) {
return i*100 + "%";
},
},
}
],