300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > echart 折线图设置y轴单位_Echarts自定义Y轴

echart 折线图设置y轴单位_Echarts自定义Y轴

时间:2022-03-03 13:10:25

相关推荐

echart 折线图设置y轴单位_Echarts自定义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]

}]

};

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。