柱状图超出X轴echarts 出金配置项内容和展示
柱状图超出X轴
配置项如下
var data2 = [
["2016-11-10 13:10:22.000", 8236],
["2016-11-10 13:10:22.000", 867],
["2016-11-10 13:11:22.000", 7435],
["2016-11-10 13:11:22.000", 8221],
["2016-11-10 13:12:22.000", 2584],
["2016-11-10 13:12:22.000", 9386],
["2016-11-10 13:13:22.000", 7712],
["2016-11-10 13:13:22.000", 7459],
["2016-11-10 13:14:22.000", 44],
["2016-11-10 13:14:22.000", 5119],
["2016-11-10 13:15:22.000", 961],
["2016-11-10 13:15:22.000", 8048],
["2016-11-10 13:16:22.000", 9825],
["2016-11-10 13:16:22.000", 1566],
["2016-11-10 13:17:22.000", 7630],
["2016-11-10 13:17:22.000", 8231],
["2016-11-10 13:18:22.000", 2095],
["2016-11-10 13:18:22.000", 4626],
["2016-11-10 13:19:22.000", 9589],
["2016-11-10 13:19:22.000", 8358],
["2016-11-10 13:20:22.000", 2446],
["2016-11-10 13:20:22.000", 6696],
["2016-11-10 13:21:22.000", 4532],
["2016-11-10 13:21:22.000", 266],
["2016-11-10 13:22:22.000", 2159],
["2016-11-10 13:22:22.000", 2927],
["2016-11-10 13:23:22.000", 9487],
["2016-11-10 13:23:22.000", 7028],
["2016-11-10 13:24:22.000", 5394],
["2016-11-10 13:24:22.000", 8147],
["2016-11-10 13:25:22.000", 7787],
["2016-11-10 13:25:22.000", 5454],
["2016-11-10 13:26:22.000", 931],
["2016-11-10 13:26:22.000", 9016],
["2016-11-10 13:27:22.000", 8339],
["2016-11-10 13:27:22.000", 2754],
["2016-11-10 13:28:22.000", 1801],
["2016-11-10 13:28:22.000", 1603],
["2016-11-10 13:29:22.000", 5098],
["2016-11-10 13:29:22.000", 7893],
["2016-11-10 13:30:22.000", 6726],
["2016-11-10 13:30:22.000", 1480],
["2016-11-10 13:31:22.000", 4846],
["2016-11-10 13:31:22.000", 50],
["2016-11-10 13:32:22.000", 5398],
["2016-11-10 13:32:22.000", 2595],
["2016-11-10 13:33:22.000", 7355],
["2016-11-10 13:33:22.000", 9944],
["2016-11-10 13:34:22.000", 8342],
["2016-11-10 13:34:22.000", 2227],
["2016-11-10 13:35:22.000", 963],
["2016-11-10 13:35:22.000", 4538],
["2016-11-10 13:36:22.000", 1923],
["2016-11-10 13:36:22.000", 5506],
["2016-11-10 13:37:22.000", 3097],
["2016-11-10 13:37:22.000", 8494],
["2016-11-10 13:38:22.000", 5695],
["2016-11-10 13:38:22.000", 819],
["2016-11-10 13:39:22.000", 1333],
["2016-11-10 13:39:22.000", 4850],
["2016-11-10 13:40:22.000", 8319],
["2016-11-10 13:40:22.000", 5401],
["2016-11-10 13:41:22.000", 6182],
["2016-11-10 13:41:22.000", 2149],
["2016-11-10 13:42:22.000", 1254],
["2016-11-10 13:42:22.000", 9345],
["2016-11-10 13:43:22.000", 8725],
["2016-11-10 13:43:22.000", 5136],
["2016-11-10 13:44:22.000", 6780],
["2016-11-10 13:44:22.000", 8242],
["2016-11-10 13:45:22.000", 3665],
["2016-11-10 13:45:22.000", 8075],
["2016-11-10 13:46:22.000", 6371],
["2016-11-10 13:46:22.000", 8857],
["2016-11-10 13:47:22.000", 37],
["2016-11-10 13:47:22.000", 985],
["2016-11-10 13:48:22.000", 7814],
["2016-11-10 13:48:22.000", 529],
["2016-11-10 13:49:22.000", 6377],
["2016-11-10 13:49:22.000", 1169],
["2016-11-10 13:50:22.000", 7427],
["2016-11-10 13:50:22.000", 6347],
["2016-11-10 13:51:22.000", 5394],
["2016-11-10 13:51:22.000", 9129],
["2016-11-10 13:52:22.000", 4352],
["2016-11-10 13:52:22.000", 838],
["2016-11-10 13:53:22.000", 961],
["2016-11-10 13:53:22.000", 6032],
["2016-11-10 13:54:22.000", 7039],
["2016-11-10 13:54:22.000", 6416],
["2016-11-10 13:55:22.000", 6769],
["2016-11-10 13:55:22.000", 9101],
["2016-11-10 13:56:22.000", 4252],
["2016-11-10 13:56:22.000", 3794],
["2016-11-10 13:57:22.000", 7707],
["2016-11-10 13:57:22.000", 1866],
["2016-11-10 13:58:22.000", 5816],
["2016-11-10 13:58:22.000", 1491]
];
var data1 = [
["2016-11-10 13:10:22.000", 1565],
["2016-11-10 13:10:22.000", 7355],
["2016-11-10 13:11:22.000", 1388],
["2016-11-10 13:11:22.000", 8672],
["2016-11-10 13:12:22.000", 9176],
["2016-11-10 13:12:22.000", 7569],
["2016-11-10 13:13:22.000", 566],
["2016-11-10 13:13:22.000", 5660],
["2016-11-10 13:14:22.000", 9556],
["2016-11-10 13:14:22.000", 8911],
["2016-11-10 13:15:22.000", 442],
["2016-11-10 13:15:22.000", 3477],
["2016-11-10 13:16:22.000", 8975],
["2016-11-10 13:16:22.000", 1053],
["2016-11-10 13:17:22.000", 213],
["2016-11-10 13:17:22.000", 1656],
["2016-11-10 13:18:22.000", 2836],
["2016-11-10 13:18:22.000", 1226],
["2016-11-10 13:19:22.000", 1893],
["2016-11-10 13:19:22.000", 6751],
["2016-11-10 13:20:22.000", 2164],
["2016-11-10 13:20:22.000", 779],
["2016-11-10 13:21:22.000", 8001],
["2016-11-10 13:21:22.000", 1600],
["2016-11-10 13:22:22.000", 95],
["2016-11-10 13:22:22.000", 7386],
["2016-11-10 13:23:22.000", 6232],
["2016-11-10 13:23:22.000", 3751],
["2016-11-10 13:24:22.000", 5493],
["2016-11-10 13:24:22.000", 7196],
["2016-11-10 13:25:22.000", 7167],
["2016-11-10 13:25:22.000", 628],
["2016-11-10 13:26:22.000", 895],
["2016-11-10 13:26:22.000", 4224],
["2016-11-10 13:27:22.000", 2777],
["2016-11-10 13:27:22.000", 6899],
["2016-11-10 13:28:22.000", 7391],
["2016-11-10 13:28:22.000", 9090],
["2016-11-10 13:29:22.000", 2352],
["2016-11-10 13:29:22.000", 1105],
["2016-11-10 13:30:22.000", 907],
["2016-11-10 13:30:22.000", 8137],
["2016-11-10 13:31:22.000", 939],
["2016-11-10 13:31:22.000", 8857],
["2016-11-10 13:32:22.000", 1365],
["2016-11-10 13:32:22.000", 8892],
["2016-11-10 13:33:22.000", 7186],
["2016-11-10 13:33:22.000", 1120],
["2016-11-10 13:34:22.000", 7644],
["2016-11-10 13:34:22.000", 1435],
["2016-11-10 13:35:22.000", 3649],
["2016-11-10 13:35:22.000", 6988],
["2016-11-10 13:36:22.000", 9283],
["2016-11-10 13:36:22.000", 516],
["2016-11-10 13:37:22.000", 5147],
["2016-11-10 13:37:22.000", 69],
["2016-11-10 13:38:22.000", 9561],
["2016-11-10 13:38:22.000", 1468],
["2016-11-10 13:39:22.000", 3161],
["2016-11-10 13:39:22.000", 1825],
["2016-11-10 13:40:22.000", 9855],
["2016-11-10 13:40:22.000", 3550],
["2016-11-10 13:41:22.000", 987],
["2016-11-10 13:41:22.000", 2410],
["2016-11-10 13:42:22.000", 4619],
["2016-11-10 13:42:22.000", 5836],
["2016-11-10 13:43:22.000", 7264],
["2016-11-10 13:43:22.000", 5218],
["2016-11-10 13:44:22.000", 3678],
["2016-11-10 13:44:22.000", 3026],
["2016-11-10 13:45:22.000", 9752],
["2016-11-10 13:45:22.000", 8149],
["2016-11-10 13:46:22.000", 7412],
["2016-11-10 13:46:22.000", 5897],
["2016-11-10 13:47:22.000", 8849],
["2016-11-10 13:47:22.000", 8734],
["2016-11-10 13:48:22.000", 1442],
["2016-11-10 13:48:22.000", 6508],
["2016-11-10 13:49:22.000", 6303],
["2016-11-10 13:49:22.000", 1499],
["2016-11-10 13:50:22.000", 4679],
["2016-11-10 13:50:22.000", 4235],
["2016-11-10 13:51:22.000", 8398],
["2016-11-10 13:51:22.000", 925],
["2016-11-10 13:52:22.000", 9241],
["2016-11-10 13:52:22.000", 8214],
["2016-11-10 13:53:22.000", 9962],
["2016-11-10 13:53:22.000", 6885],
["2016-11-10 13:54:22.000", 6142],
["2016-11-10 13:54:22.000", 9750],
["2016-11-10 13:55:22.000", 7593],
["2016-11-10 13:55:22.000", 5110],
["2016-11-10 13:56:22.000", 5871],
["2016-11-10 13:56:22.000", 8037],
["2016-11-10 13:57:22.000", 2491],
["2016-11-10 13:57:22.000", 3381],
["2016-11-10 13:58:22.000", 5141],
["2016-11-10 13:58:22.000", 5129]
];
// 指定图表的配置项和数据
var option = {
title: {
text: '资金变动'
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
show: true,
data: ['入金', '出金']
},
grid: {
containLabel: true
},
xAxis: {
type: 'time', // 坐标轴类型，横轴默认为类目型"category"，纵轴默认为数值型"value"
splitLine: {
show: false
},
boundaryGap: ['40%', '40%']
},
yAxis: [{
type: 'value',
name: '金额',
axisLabel: { // 坐标轴文本标签
formatter: '{value} 元'
}
}],
dataZoom: [{
type: 'inside',
start: 50,
end: 100
}, {
show: true,
type: 'slider',
y: '95%',
start: 50,
end: 100
}],
calculable: true, // 是否启用拖拽重计算特性，默认关闭
series: [{
name: '入金',
type: "bar",
data:data1
},{
name: '出金',
type: "bar",
data:data2
}]
};
截图如下
