如图的折线图,在我本地实际项目里没有这么大,datazoom设置为初始状态显示0~100%,如果我把x轴xAxis.axisLabel.interval属性设置为'auto',在1080p分辨率下x轴可显示13个刻度点,然而到了1366分辨率下自动调整间隔后显示的坐标刻度数会变,如果我把xAxis.axisLabel.interval属性设置为固定的数值,那么在使用dataZoom缩放的时候x轴坐标刻度数量不会变,现在想要图表第一次生成后默认显示所有数据,x轴坐标刻度为13个,在1080p和1366下相同,而使用鼠标滚轮缩放时,x轴坐标刻度间隔会自动调整,保持显示13个坐标刻度,不知能不能实现
配置项如下
option = {
grid: {
left: '2%',
top: '13%',
right: '5%',
bottom: '20%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: true,
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#000',
width: 1
}
},
axisLabel: {
show: true,
rotate: 90,
margin: 16,
showMaxLabel: true,
textStyle: {
color: '#7E8898'
},
fontSize: 12
},
data: ["08:45", "09:00", "09:15", "09:30", "09:45", "10:00", "10:15", "10:30", "10:45", "11:00", "11:15", "11:30", "11:45", "12:00", "12:15", "12:30", "12:45", "13:00", "13:15", "13:30", "13:45", "14:00", "14:15", "14:30", "14:45", "15:00", "15:15", "15:30", "15:45", "16:00", "16:15", "16:30", "16:45", "17:00", "17:15", "17:30", "17:45", "18:00", "18:15", "18:30", "18:45", "19:00", "19:15", "19:30", "19:45", "20:00", "20:15", "20:30", "20:45", "21:00", "21:15", "21:30", "21:45", "22:00", "22:15", "22:30", "22:45", "23:00", "23:15", "23:30", "23:45", "00:00", "00:15", "00:30", "00:45", "01:00", "01:15", "01:30", "01:45", "02:00", "02:15", "02:30", "02:45", "03:00", "03:15", "03:30", "03:45", "04:00", "04:15", "04:30", "04:45", "05:00", "05:15", "05:30", "05:45", "06:00", "06:15", "06:30", "06:45", "07:00", "07:15", "07:30", "07:45", "08:00", "08:15", "08:30", "08:45"]
},
yAxis: {
type: 'value',
nameGap: 5,
axisTick: {
show: false,
},
nameTextStyle: {
color: '#b2b7ba',
fontSize: 12
},
axisLine: {
show: true,
lineStyle: {
color: '#000',
width: 1
}
},
axisLabel: {
show: true,
margin: 16,
textStyle: {
color: '#7E8898'
},
fontSize: 12
},
splitLine: {
show: true,
interval: 'auto',
lineStyle: {
color: ['#000'],
width: 1,
type: 'dashed',
opacity: 0.2
}
}
},
dataZoom: [{
type: 'inside',
start: 0,
end: 100
}, {
type: 'slider',
start: 0,
end: 100,
handleSize: 0,
top: '90.8%',
left: '5%',
bottom: '7%',
right: '5%',
fillerColor: '#96E2FF',
borderColor: '#1A2941',
backgroundColor: '#2B4252',
showDetail: false,
zoomLock: false
}],
series: [{
type: 'line',
cursor: 'pointer',
symbol: 'circle',
symbolSize: 2.5,
showSymbol: false,
smooth: true,
lineStyle: {
normal: {
color: '#E67E29',
width: 3
}
},
itemStyle: {
normal: {
color: '#E67E29',
borderColor: 'rgba(230,126,41, 0.5)',
borderWidth: 7,
opacity: 1
}
},
data: ["54.55", "60.00", "66.67", "19.05", "70.59", "46.43", "75.00", "53.85", "46.67", "46.88", "95.00", "90.00", "63.64", "59.38", "84.00", "68.18", "61.54", "41.94", "32.35", "70.83", "75.00", "42.86", "90.91", "45.83", "51.85", "67.39", "40.74", "90.91", "81.25", "52.17", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00", "0.00"]
}]
};