Skip to content

Commit 7b036d5

Browse files
kenerkener
committed
boundaryGap留空样式升级
1 parent 449436a commit 7b036d5

File tree

2 files changed

+68
-30
lines changed

2 files changed

+68
-30
lines changed

‎src/component/categoryAxis.js

Lines changed: 57 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -236,24 +236,38 @@ define(function (require) {
236236
var axShape;
237237
//var data = option.data;
238238
var dataLength = option.data.length;
239-
var length = option.axisTick.length;
240-
var color = option.axisTick.lineStyle.color;
241-
var lineWidth = option.axisTick.lineStyle.width;
242-
239+
var tickOption = option.axisTick;
240+
var length = tickOption.length;
241+
var color = tickOption.lineStyle.color;
242+
var lineWidth = tickOption.lineStyle.width;
243+
var interval = tickOption.interval == 'auto'
244+
? _interval : (tickOption.interval - 0 + 1);
245+
var onGap = tickOption.onGap;
246+
var optGap = onGap
247+
? (getGap() / 2)
248+
: typeof onGap == 'undefined'
249+
? (option.boundaryGap ? (getGap() / 2) : 0)
250+
: 0;
251+
243252
if (option.position == 'bottom' || option.position == 'top') {
244253
// 横向
245254
var yPosition = option.position == 'bottom'
246255
? grid.getYend()
247256
: (grid.getY() - length);
248-
for (var i = 0; i < dataLength; i++) {
257+
var x;
258+
for (var i = 0; i < dataLength; i += interval) {
259+
// 亚像素优化
260+
x = self.subPixelOptimize(
261+
getCoordByIndex(i) + optGap, lineWidth
262+
);
249263
axShape = {
250264
shape : 'line',
251265
zlevel : _zlevelBase,
252266
hoverable : false,
253267
style : {
254-
xStart : getCoordByIndex(i),
268+
xStart : x,
255269
yStart : yPosition,
256-
xEnd : getCoordByIndex(i),
270+
xEnd : x,
257271
yEnd : yPosition + length,
258272
strokeColor : color,
259273
lineWidth : lineWidth
@@ -267,16 +281,21 @@ define(function (require) {
267281
var xPosition = option.position == 'left'
268282
? (grid.getX() - length)
269283
: grid.getXend();
270-
for (var i = 0; i < dataLength; i++) {
284+
var y;
285+
for (var i = 0; i < dataLength; i += interval) {
286+
// 亚像素优化
287+
y = self.subPixelOptimize(
288+
getCoordByIndex(i) - optGap, lineWidth
289+
);
271290
axShape = {
272291
shape : 'line',
273292
zlevel : _zlevelBase,
274293
hoverable : false,
275294
style : {
276295
xStart : xPosition,
277-
yStart : getCoordByIndex(i),
296+
yStart : y,
278297
xEnd : xPosition + length,
279-
yEnd : getCoordByIndex(i),
298+
yEnd : y,
280299
strokeColor : color,
281300
lineWidth : lineWidth
282301
}
@@ -400,12 +419,20 @@ define(function (require) {
400419
function _buildSplitLine() {
401420
var axShape;
402421
//var data = option.data;
403-
var dataLength = option.data.length;
404-
var lineType = option.splitLine.lineStyle.type;
405-
var lineWidth = option.splitLine.lineStyle.width;
406-
var color = option.splitLine.lineStyle.color;
422+
var dataLength = option.data.length;
423+
var sLineOption = option.splitLine;
424+
var lineType = sLineOption.lineStyle.type;
425+
var lineWidth = sLineOption.lineStyle.width;
426+
var color = sLineOption.lineStyle.color;
407427
color = color instanceof Array ? color : [color];
408428
var colorLength = color.length;
429+
430+
var onGap = sLineOption.onGap;
431+
var optGap = onGap
432+
? (getGap() / 2)
433+
: typeof onGap == 'undefined'
434+
? (option.boundaryGap ? (getGap() / 2) : 0)
435+
: 0;
409436

410437
if (option.position == 'bottom' || option.position == 'top') {
411438
// 横向
@@ -416,7 +443,7 @@ define(function (require) {
416443
for (var i = 0; i < dataLength; i += _interval) {
417444
// 亚像素优化
418445
x = self.subPixelOptimize(
419-
getCoordByIndex(i), lineWidth
446+
getCoordByIndex(i) + optGap, lineWidth
420447
);
421448
axShape = {
422449
shape : 'line',
@@ -445,7 +472,7 @@ define(function (require) {
445472
for (var i = 0; i < dataLength; i += _interval) {
446473
// 亚像素优化
447474
y = self.subPixelOptimize(
448-
getCoordByIndex(i), lineWidth
475+
getCoordByIndex(i) - optGap, lineWidth
449476
);
450477
axShape = {
451478
shape : 'line',
@@ -468,12 +495,19 @@ define(function (require) {
468495

469496
function _buildSplitArea() {
470497
var axShape;
471-
var color = option.splitArea.areaStyle.color;
498+
var sAreaOption = option.splitArea;
499+
var color = sAreaOption.areaStyle.color;
472500
color = color instanceof Array ? color : [color];
473501
var colorLength = color.length;
474502
//var data = option.data;
475503
var dataLength = option.data.length;
476-
504+
505+
var onGap = sAreaOption.onGap;
506+
var optGap = onGap
507+
? (getGap() / 2)
508+
: typeof onGap == 'undefined'
509+
? (option.boundaryGap ? (getGap() / 2) : 0)
510+
: 0;
477511
if (option.position == 'bottom' || option.position == 'top') {
478512
// 横向
479513
var y = grid.getY();
@@ -483,7 +517,7 @@ define(function (require) {
483517

484518
for (var i = 0; i <= dataLength; i += _interval) {
485519
curX = i < dataLength
486-
? getCoordByIndex(i)
520+
? (getCoordByIndex(i) + optGap)
487521
: grid.getXend();
488522
axShape = {
489523
shape : 'rectangle',
@@ -511,7 +545,7 @@ define(function (require) {
511545

512546
for (var i = 0; i <= dataLength; i += _interval) {
513547
curY = i < dataLength
514-
? getCoordByIndex(i)
548+
? (getCoordByIndex(i) - optGap)
515549
: grid.getY();
516550
axShape = {
517551
shape : 'rectangle',
@@ -585,7 +619,7 @@ define(function (require) {
585619
? grid.getWidth()
586620
: grid.getHeight();
587621
if (option.boundaryGap) { // 留空
588-
return total / (dataLength + 1);
622+
return total / dataLength;
589623
}
590624
else { // 顶头
591625
return total / (dataLength > 1 ? (dataLength - 1) : 1);
@@ -597,7 +631,7 @@ define(function (require) {
597631
var data = option.data;
598632
var dataLength = data.length;
599633
var gap = getGap();
600-
var position = option.boundaryGap ? gap : 0;
634+
var position = option.boundaryGap ? (gap / 2) : 0;
601635

602636
// Math.floor可能引起一些偏差，但性能会更好
603637
for (var i = 0; i < dataLength; i++) {
@@ -643,7 +677,7 @@ define(function (require) {
643677
}
644678
else {
645679
var gap = getGap();
646-
var position = option.boundaryGap ? gap : 0;
680+
var position = option.boundaryGap ? (gap / 2) : 0;
647681
position += dataIndex * gap;
648682

649683
if (option.position == 'bottom'

‎src/config.js

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -257,10 +257,12 @@ define(function() {
257257
}
258258
},
259259
axisTick: { // 坐标轴小标记
260-
show: false, // 属性show控制显示与否，默认不显示
261-
length :4, // 属性length控制线长
260+
show: true, // 属性show控制显示与否，默认不显示
261+
interval: 'auto',
262+
// onGap: null,
263+
length :5, // 属性length控制线长
262264
lineStyle: { // 属性lineStyle控制线条样式
263-
color: '#ccc',
265+
color: '#333',
264266
width: 1
265267
}
266268
},
@@ -276,6 +278,7 @@ define(function() {
276278
},
277279
splitLine: { // 分隔线
278280
show: true, // 默认显示，属性show控制显示与否
281+
// onGap: null,
279282
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
280283
color: ['#ccc'],
281284
width: 1,
@@ -284,6 +287,7 @@ define(function() {
284287
},
285288
splitArea: { // 分隔区域
286289
show: false, // 默认不显示，属性show控制显示与否
290+
// onGap: null,
287291
areaStyle: { // 属性areaStyle（详见areaStyle）控制区域样式
288292
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],
289293
type: 'default'
@@ -313,9 +317,9 @@ define(function() {
313317
},
314318
axisTick: { // 坐标轴小标记
315319
show: false, // 属性show控制显示与否，默认不显示
316-
length :4, // 属性length控制线长
320+
length :5, // 属性length控制线长
317321
lineStyle: { // 属性lineStyle控制线条样式
318-
color: '#ccc',
322+
color: '#333',
319323
width: 1
320324
}
321325
},
@@ -588,7 +592,7 @@ define(function() {
588592
},
589593
labelLine: {
590594
show: true,
591-
length: 30,
595+
length: 20,
592596
lineStyle: {
593597
// color: 各异,
594598
width: 1,
@@ -879,7 +883,7 @@ define(function() {
879883
// -------内部通信
880884
TOOLTIP_HOVER: 'tooltipHover'
881885
},
882-
886+
loadingText : 'Loading...',
883887
// 可计算特性配置，孤岛，提示颜色
884888
calculable: false, // 默认关闭可计算特性
885889
calculableColor: 'rgba(255,165,0,0.6)', // 拖拽提示边框颜色

0 commit comments

Comments
 (0)