echarts折线图显示坐标轴指示器并且格式化文本标签
程序员文章站
2022-06-01 22:53:55
...
效果如下图:
没进行格式化之前的效果(Y轴不是想要的效果):
X轴和Y轴都要加坐标轴指示器
代码如下:
tooltip: {
trigger: 'axis',
// 坐标轴指示器
axisPointer: {
type: 'cross', // 十字准星指示器,表示启用两个正交的轴的 axisPointer
label: {
backgroundColor: 'rgba(0,122,255,0.6)', // 文本标签的背景颜色
// 文本标签文字的格式化器
formatter(a) {
// 这里可以控制台输出一下参数a,看看里面有什么,再进行格式化
// axisDimension可以判断是X轴还是Y轴,分别格式化X轴和Y轴的文字
if (a.axisDimension === 'y') {
return parseFloat(a.value).toFixed(1) + '天';
} else {
return a.value;
}
}
}
},
backgroundColor: 'rgba(73,91,127,1)',
formatter(a, b, c) {
// 提示框浮层内容格式器,可根据需求进行格式化
}
},
上一篇: echarts地图tooltip自动轮播,react
下一篇: Java项目实战---歌曲管理系统