本文介绍了如何在Echarts中自定义折线图的Y轴单位。通过设置Y轴坐标轴类型为'value'，并使用字符串模板或回调函数来格式化刻度标签，实现Y轴单位的个性化展示。示例代码展示了从默认单位到使用'件'作为单位的转换，以及使用回调函数实现不同数值对应的特定文字标签。
1-Y轴默认.png
修改后：
2-1-字符串模板自定义Y轴刻度.png
代码:
let option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
//设置Y轴刻度
type: 'value', //坐标轴类型，一定要写，否则显示会出问题
axisLabel: {
formatter: '{value} 件' //刻度标签的内容格式器，支持字符串模板和回调函数两种形式，按照自己需求设置
},
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 46, 20]
}]
};
2-2-回调函数自定义Y轴.png
let option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
type: 'value',
axisLabel: {
formatter:function(value,index){
let texts = [];
if(value == 0){
texts.push('零件');
}else if(value == 10){
texts.push('拾件');
}else if(value == 20){
texts.push('贰拾件');
}else if(value == 30){
texts.push('叁拾件');
}else if(value == 40){
texts.push('肆拾件');
}else if(value == 50){
texts.push('伍拾件');
}
return texts;
}
},
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 46, 20]
}]
};
扫一扫
1366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
