在内网访问一切正常,在外网访问,缩放时会出现混乱、重复现象,不确定是代码问题,还是网络访问方式造成的,望各位能给出方法或建议
配置项如下
//数据是模拟出来的,真实数据比较多,没有全部复制过来
option = {
tooltip : {
trigger : 'axis',
},
legend : {
data : [ '偏差范围数量' ],
x : 'center',
//backgroundColor: 'gray',//图例背景色
textStyle : {
color : 'blue' // 图例文字颜色
},
},
toolbox : {
left : 'right',
show : true,
x : '320',
y : '22',
feature : {
mark : {
show : true
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},//折线,柱型切换
restore : {
show : true
},//还原
//saveAsImage : {show : true}//下载保存
}
},
calculable : true,
xAxis : {
type : 'category',
name : '偏差范围(分钟)',
nameLocation :'end',
data : [-1390, -1356, -1352, -1336, -42, -32, -24, -22, -20, -18, -16, -14, -12, -10, -8, -6, -4, -2, 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68, 70, 72, 74, 76, 78, 80, 82, 84, 86, 88, 90, 92, 94, 96, 98, 100, 102, 104, 106, 108, 110, 112, 114, 116, 118, 120, 122, 124, 126, 128, 132, 134, 136, 138, 140, 142, 144, 146, 148, 150, 152, 154, 158, 160, 162, 166],
axisLabel : {//调整x轴文字显示
interval : 0,//文字间隔显示
rotate : 0,//文字角度调整
// margin : 20,//外边距
// clickable:true
}
},
grid : { // 控制图的大小,调整下面这些值就可以,
x : 70,//x轴左距
x2 : 95,//x轴长度,越小越长
y : 30,//图表上距
y2 : 40,// y轴刻度间距,值越小距离越大;y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上
},
yAxis : {
type : 'value',
name : '航班数量',
axisLabel : {
show : true,
interval : 'auto',
formatter : '{value} 架'
},
},
dataZoom : [{
type : "slider",
show : true,
bottom : 0,
height : 20,
handleSize : '100%',
handleStyle : {
color : "#d3dee5"
},
borderColor : "#90979c",
xAxisIndex : [ 0 ],
start : 35,
end : 65
},{
type: "inside",
show: true,
height: 15,
start: 1,
end: 35
}],
series : [ {
name : '偏差范围数量',
type : 'bar',
stack: 'arrival',
barWidth : 30,//柱图宽度
data : [1, 1, 1, 1, 1, 1, 1, 1, 3, 3, 19, 33, 84, 126, 272, 468, 686, 944, 1071, 1094, 1581, 1113, 1232, 1314, 643, 362, 249, 176, 148, 105, 105, 93, 61, 62, 55, 57, 47, 48, 39, 36, 32, 29, 21, 24, 17, 22, 19, 14, 14, 18, 13, 11, 10, 7, 10, 12, 9, 5, 5, 9, 8, 9, 3, 6, 5, 9, 7, 10, 9, 5, 7, 6, 4, 9, 9, 8, 5, 5, 4, 3, 6, 2, 6, 4, 3, 1, 3, 3, 4, 2, 5, 4, 4, 1, 4, 1, 2, 2, 4],
markLine : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'},
// {type : 'average', name: '平均值'}
]
},
itemStyle : {
normal : {
label : {
show : true,
position : 'top',//在柱子上方显示数值
formatter : '{c}',//formatter: '{b}\n{c}'在柱子上方显示数值和横坐标
textStyle : {
fontWeight : '300',
fontSize : '12',
color : '#FF5E29'
}
},
color : '#13FE19'
}
},
}]
};