ECharts 坐标轴标签、tooltip文本格式化

在ECharts折线图中(其他系列图标同理),我们需要对x轴坐标标签、坐图形上的文本标签、提示框组件文本等进行格式化,选项参数设置如下:

x轴坐标标签格式化:
xAxis: {
axisLabel: {
show: true, // 默认为true
interval: 0, // 设置x轴文本标签全部显示
rotate: 45, //标签旋转角度,对于长文本标签设置旋转可避免文本重叠
formatter: function(data) {
return data + “是x轴坐标值”;
}
}
}

提示框(tooltip)组件文本格式化:
tooltip: {
show: true, // 是否显示提示框组件
trigger: ‘axis’, //坐标轴触发,用在柱状图,折线图等会使用类目轴的图表中使用
formatter: function( params ) {
return params[0].name + ” : ” + params[0].data; // 由于可能有多个series,因此params[0].name和.data表示第一个series的该坐标点 xAxis值和yAxis值
}
}

图形上的文本标签格式化:(比如折线图中,每个数据点的信息提示文本)
series: [
……
type: “line”,
label: { // label选项在 ECharts 2.x 中放置于itemStyle.normal下
normal: {
show: true, // 是否显示标签
position: “top”, // 标签的位置,默认top
formatter: function(params) {
return params.value + “单位”; //params.value是yAxis值
}
}
]

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值