Echarts坐标轴类型为value情况下,替换显示内容

现在有一个需求,绘制一个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
                }
                
                
            }
}

猜你喜欢

转载自blog.csdn.net/binbinczsohu/article/details/107501060