前端开发 大前端 W3Cbest

一个专注 WEB 开发的技术博客

0%

Echarts给X轴或Y轴添加%号或自定义值信息

如何给Echarts的xAxis轴或yAxis轴添加%号或自定义值信息,首先得需要了解xAxis轴yAxis轴的一些配置项,不然是不知道该如何下手的,如下图: 现在看来显然是axisLabel项了,xAxis.axisLabel 坐标轴刻度标签的相关设置。 那我们再往下看,xAxis.axisLabel.formatter,刻度标签的内容格式器,支持字符串模板和回调函数两种形式。 看官网示例:

// 使用字符串模板,模板变量为刻度默认标签 {value}
formatter: ‘{value} kg’

// 使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
formatter: function(value, index) {
// 格式化成月/日,只在第一个刻度显示年份
var date = new Date(value);
var texts = [(date.getMonth() + 1), date.getDate()];
if (index === 0) {
texts.unshift(date.getYear());
}
return texts.join(‘/‘);
}

通过示例我们知道它有两种形式,一种是字符串模板,另一种是函数模板。一般情况下我们使用第一种字符串模板,第二种函数模板参杂的信息量比较大,适合较复杂的一些自定义配置这里就不多讲了。

See the Pen Echarts给X轴或Y轴添加%号或自定义值信息 by w3cbest.com (@w3cbest) on CodePen.

坚持技术创作分享,您的支持将鼓励我继续创作!