依靠对yAxis设置 max/最大值、min/设置最小值、interval/刻度间距来实现
实现效果:
实现代码为:
//数据
const emailData = [44,43,49,50,50,51,50,60,45,50,48,53];
const xzhou = ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
option = {
title: {
text: 'Stacked Area Chart'
},
legend: {
data: ['Email']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
// boundaryGap: false, // 控制两边儿是否留白
data: xzhou,
splitLine:{ //坐标轴刻度相关设置。
show :true,
},
}],
yAxis: [{
type: 'value',
axisLine:{//坐标轴轴线相关设置
show :true,
lineStyle:{
color:'#000000'
}
},
axisTick:{ //坐标轴刻度相关设置。
show :true,
},
splitLine:{ //设置分割线的样式(图表横线颜色)
lineStyle: {
color: ['#000000','#fa6263','#4371fa','#43fa71','#000000','#43fa71','#4371fa','#fa6263'],
width: 1, // 分隔线线宽
// type: 'dashed', // 线的类型
opacity: 1 // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
}
},
max: 62.6,//设置最大值
min: 41.8,//设置最小值
interval:2.6,//设置刻度间距
}],
series: [
{
name: 'Email',
type: 'line',
data: emailData,
label: {
normal: {
show: true,
formatter: (params) => {
//界面显示原数值
return `${xzhou[params.dataIndex]}数据:${emailData[params.dataIndex]}`;
},
color: '#000000',
position: 'top'
}
}
}
]
};