左边没有单位,右图是增加单位的效果。
1.x轴y轴设置单位
增加单位不管是x轴还是y轴都可以设置name字段,设置完name后效果是红色箭头效果。如果想要蓝色箭头效果可以使用x轴y轴的都有的 axisLabel 属性里面有formatter配置项,formatter支持字符串模板和回调函数两种形式。
xAxis: {
name: '日期', //红色箭头效果
type: 'category',
data: this.dataList.map(item => item.name),
//x轴 增加单位 蓝色箭头效果
axisLabel: {
formatter: '日期:{value}'
}
},
yAxis: {
name: '人', //红色箭头效果
type: 'value',
//y轴 增加单位 蓝色箭头效果
axisLabel: { //刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
formatter: '{value} 人'
}
},
2.tooltip(提示框)增加单位
tooltip(提示框)增加单位和x,y轴类似都有 formatter 配置项。我们console.log(params)查看返回值发现我们需要的数据都有,如此就可以for循环加拼接完成效果。
//提示框
tooltip: {
trigger: 'axis',
formatter: (params) => {
console.log(params);
var relVal = '日期:'+ params[0].name
for (var i = 0, l = params.length; i < l; i++) {
relVal += '<br/>' + params[i].seriesName + ' ' + params[i].marker + ' ' + params[i].value + ' 人'
}
return relVal
},
},