如图:X轴坐标中最后一个值(2018.11.18)被自动隐藏,无法完全显示。xAxis中axisLabel针对的就是X轴坐标内容的设置,但是align属性的值无论设置成‘left’、'right'还是'center',效果都不甚理想,不能从根本上解决问题。
配置项如下
option = {
title: {
text: '价格走势图',
textStyle: {
align: 'center',
color: '#fd6062',
fontSize: '14'
},
left: 'center',
},
tooltip: {
trigger: 'axis',
formatter: "{c}",
extraCssText: 'padding: 3px 5px; border-radius: 3px',
axisPointer: {
lineStyle: {
color: '#ff7640',
width: 1,
type: 'dashed'
}
}
},
grid: {
left: '10%',
top: 45,
right: '1%',
bottom: 30
},
xAxis: [{
type: 'category',
boundaryGap: false, //表格两边留白
axisLine: {
show: true, //X轴是否显示
},
axisTick: {
show: false, //坐标轴刻度
},
splitLine: {
show: false //表格X轴分割线
},
axisLabel: {
interval: 50000,
showMinLabel: true,
showMaxLabel: true,
fontSize: 12,
color: '#999',
align: 'center',
},
data: ['2018.11.11', '2018.11.12', '2018.11.13', '2018.11.14', '2018.11.15', '2018.11.16', '2018.11.17', '2018.11.18']
}],
yAxis: [{
show: 'false',
type: 'value',
axisLine: {
show: true, //Y轴是否显示
},
axisTick: {
show: true, //坐标轴刻度
},
splitLine: {
show: true, //表格Y轴分割线
lineStyle: {
color: '#f2f2f2',
width: 1,
}
},
axisLabel: {
fontSize: 12,
color: '#999',
align: 'right',
}
}],
series: [{
type: 'line',
symbol: 'none',
smooth: false,
lineStyle: {
width: 1,
color: '#ff7640'
},
data: [300, 400, 250, 530, 456, 358, 487, 563]
}]
};