现在有一个需求,绘制一个xy坐标系上的直线后,需要改下y轴显示内容,改为带字母的内容,如果你直接改成字母的内容,那么echarts是无法识别出你这些字符串之间的关系,那么你的图像就会出现问题,我的解决方法是,描点时依旧使用数字,然后对y轴标签的显示进行一个格式化,就可以解决这个问题。
例如我本来的图像是
但是客户要求,y轴必须显示的是分数,我的解决办法是
在y轴设置上,加入了对标签的转换函数具体如下
我的代码(echarts很强大,可以自定义格式化方法,通过这个函数,你可以让坐标轴显示任何样式)
yAxis: {
axisLabel: {
fontSize: 22,
show: true,
//纵坐标显示转换 将数字转为特殊符号 这里重新定义就可以
formatter: function (value) {
var texts = []
if (value === 1 / 16) {
texts.push('Q/16')
} else if (value === 1 / 8) {
texts.push('Q/8')
} else if (value === 1 / 4) {
texts.push('Q/4')
} else if (value === 3 / 8) {
texts.push('3Q/8')
} else if (value === 1 / 2) {
texts.push('Q/2')
} else if (value === 5 / 8) {
texts.push('5Q/8')
} else if (value === 6 / 8) {
texts.push('3Q/4')
} else if (value === 7 / 8) {
texts.push('7Q/8')
} else if (value === 1) {
texts.push('Q')
}
return texts
}
}
}