echarts中给图表X轴和Y轴加单位以及给tooltip(提示框)增加单位
2023-12-28 21:02:56
左边没有单位,右图是增加单位的效果。
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
},
},
文章来源:https://blog.csdn.net/qq_61869009/article/details/135276696
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!