左边没有单位,右图是增加单位的效果。
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].namefor (var i = 0, l = params.length; i < l; i++) {relVal += '<br/>' + params[i].seriesName + ' ' + params[i].marker + ' ' + params[i].value + ' 人'}return relVal},},