286 lines
7.4 KiB
JavaScript
286 lines
7.4 KiB
JavaScript
var _require = require('@antv/g/lib'),
|
||
Group = _require.Group;
|
||
|
||
var Util = require('../util');
|
||
|
||
var Grid = function Grid(cfg) {
|
||
Grid.superclass.constructor.call(this, cfg);
|
||
};
|
||
|
||
Util.extend(Grid, Group);
|
||
Util.augment(Grid, {
|
||
getDefaultCfg: function getDefaultCfg() {
|
||
// const cfg = super.getDefaultCfg();
|
||
return {
|
||
zIndex: 1,
|
||
|
||
/**
|
||
* 栅格线的类型
|
||
* - line 不封闭的线
|
||
* - polygon 封闭的多边形
|
||
* @type {String}
|
||
*/
|
||
type: 'line',
|
||
|
||
/**
|
||
* 线的样式配置
|
||
* @type {Object}
|
||
*/
|
||
lineStyle: null,
|
||
|
||
/**
|
||
* 线集合的配置
|
||
* @type {Array}
|
||
*/
|
||
items: null,
|
||
|
||
/**
|
||
* 为网格设置交替的背景色，指定一个值则先渲染奇数层，两个值则交替渲染
|
||
* @type {String | Array}
|
||
*/
|
||
alternateColor: null,
|
||
matrix: null,
|
||
|
||
/**
|
||
* 是否隐藏第一条网格线，默认为 false
|
||
* @type {Boolean}
|
||
*/
|
||
hideFirstLine: false,
|
||
|
||
/**
|
||
* 是否隐藏最后一条网格线，默认为 false
|
||
* @type {Boolean}
|
||
*/
|
||
hideLastLine: false,
|
||
|
||
/**
|
||
* 0基线不在轴线上时，是否强调0基线
|
||
* @type {Boolean}
|
||
*/
|
||
hightLightZero: false,
|
||
|
||
/**
|
||
* 0基线样式
|
||
* @type {Object}
|
||
*/
|
||
zeroLineStyle: {
|
||
stroke: '#595959',
|
||
lineDash: [0, 0]
|
||
}
|
||
};
|
||
},
|
||
_renderUI: function _renderUI() {
|
||
Grid.superclass._renderUI.call(this);
|
||
|
||
this._drawLines();
|
||
},
|
||
_drawLines: function _drawLines() {
|
||
var self = this;
|
||
var lineStyle = self.get('lineStyle');
|
||
var items = self.get('items');
|
||
|
||
if (items && items.length) {
|
||
self._precessItems(items);
|
||
|
||
self._drawGridLines(items, lineStyle);
|
||
}
|
||
},
|
||
_precessItems: function _precessItems(items) {
|
||
var self = this;
|
||
var preItem;
|
||
Util.each(items, function (item, index) {
|
||
if (preItem && self.get('alternateColor')) {
|
||
self._drawAlternativeBg(item, preItem, index);
|
||
}
|
||
|
||
preItem = item;
|
||
});
|
||
},
|
||
_drawGridLines: function _drawGridLines(items, lineStyle) {
|
||
var self = this;
|
||
var type = this.get('type');
|
||
var gridLine;
|
||
var path;
|
||
var cfg;
|
||
var points;
|
||
var itemsLength = items.length;
|
||
|
||
if (type === 'line' || type === 'polygon') {
|
||
Util.each(items, function (item, idx) {
|
||
if (self.get('hideFirstLine') && idx === 0) {
|
||
// 不展示第一条网格线
|
||
return;
|
||
}
|
||
|
||
if (self.get('hideLastLine') && idx === itemsLength - 1) {
|
||
// 不展示最后一条网格线
|
||
return;
|
||
}
|
||
|
||
points = item.points;
|
||
path = [];
|
||
|
||
if (type === 'line') {
|
||
path.push(['M', points[0].x, points[0].y]);
|
||
path.push(['L', points[points.length - 1].x, points[points.length - 1].y]);
|
||
} else {
|
||
Util.each(points, function (point, index) {
|
||
if (index === 0) {
|
||
path.push(['M', point.x, point.y]);
|
||
} else {
|
||
path.push(['L', point.x, point.y]);
|
||
}
|
||
});
|
||
}
|
||
|
||
if (self._drawZeroLine(type, idx)) {
|
||
cfg = Util.mix({}, self.get('zeroLineStyle'), {
|
||
path: path
|
||
});
|
||
} else {
|
||
cfg = Util.mix({}, lineStyle, {
|
||
path: path
|
||
});
|
||
}
|
||
|
||
gridLine = self.addShape('path', {
|
||
attrs: cfg
|
||
});
|
||
gridLine.name = 'axis-grid';
|
||
gridLine._id = item._id;
|
||
gridLine.set('coord', self.get('coord'));
|
||
self.get('appendInfo') && gridLine.setSilent('appendInfo', self.get('appendInfo'));
|
||
});
|
||
} else {
|
||
Util.each(items, function (item, idx) {
|
||
if (self.get('hideFirstLine') && idx === 0) {
|
||
// 不展示第一条网格线
|
||
return;
|
||
}
|
||
|
||
if (self.get('hideLastLine') && idx === itemsLength - 1) {
|
||
// 不展示最后一条网格线
|
||
return;
|
||
}
|
||
|
||
points = item.points;
|
||
path = [];
|
||
Util.each(points, function (point, index) {
|
||
var radius = point.radius;
|
||
|
||
if (index === 0) {
|
||
path.push(['M', point.x, point.y]);
|
||
} else {
|
||
path.push(['A', radius, radius, 0, 0, point.flag, point.x, point.y]);
|
||
}
|
||
});
|
||
cfg = Util.mix({}, lineStyle, {
|
||
path: path
|
||
});
|
||
gridLine = self.addShape('path', {
|
||
attrs: cfg
|
||
});
|
||
gridLine.name = 'axis-grid';
|
||
gridLine._id = item._id;
|
||
gridLine.set('coord', self.get('coord'));
|
||
self.get('appendInfo') && gridLine.setSilent('appendInfo', self.get('appendInfo'));
|
||
});
|
||
}
|
||
},
|
||
_drawZeroLine: function _drawZeroLine(type, idx) {
|
||
var self = this;
|
||
var tickValues = self.get('tickValues');
|
||
|
||
if (type === 'line' && tickValues) {
|
||
if (tickValues[idx] === 0 && self.get('hightLightZero')) {
|
||
return true;
|
||
}
|
||
}
|
||
|
||
return false;
|
||
},
|
||
_drawAlternativeBg: function _drawAlternativeBg(item, preItem, index) {
|
||
var self = this;
|
||
var alternateColor = self.get('alternateColor');
|
||
var attrs;
|
||
var oddColor;
|
||
var evenColor;
|
||
|
||
if (Util.isString(alternateColor)) {
|
||
oddColor = alternateColor;
|
||
} else if (Util.isArray(alternateColor)) {
|
||
oddColor = alternateColor[0];
|
||
evenColor = alternateColor[1];
|
||
}
|
||
|
||
if (index % 2 === 0) {
|
||
if (evenColor) {
|
||
attrs = self._getBackItem(preItem.points, item.points, evenColor);
|
||
}
|
||
} else if (oddColor) {
|
||
attrs = self._getBackItem(preItem.points, item.points, oddColor);
|
||
}
|
||
|
||
var shape = self.addShape('Path', {
|
||
attrs: attrs
|
||
});
|
||
shape.name = 'axis-grid-rect';
|
||
shape._id = item._id && item._id.replace('grid', 'grid-rect');
|
||
shape.set('coord', self.get('coord'));
|
||
self.get('appendInfo') && shape.setSilent('appendInfo', self.get('appendInfo'));
|
||
},
|
||
_getBackItem: function _getBackItem(start, end, bgColor) {
|
||
var path = [];
|
||
var type = this.get('type');
|
||
|
||
if (type === 'line') {
|
||
path.push(['M', start[0].x, start[0].y]);
|
||
path.push(['L', start[start.length - 1].x, start[start.length - 1].y]);
|
||
path.push(['L', end[end.length - 1].x, end[end.length - 1].y]);
|
||
path.push(['L', end[0].x, end[0].y]);
|
||
path.push(['Z']);
|
||
} else if (type === 'polygon') {
|
||
Util.each(start, function (subItem, index) {
|
||
if (index === 0) {
|
||
path.push(['M', subItem.x, subItem.y]);
|
||
} else {
|
||
path.push(['L', subItem.x, subItem.y]);
|
||
}
|
||
});
|
||
|
||
for (var i = end.length - 1; i >= 0; i--) {
|
||
path.push(['L', end[i].x, end[i].y]);
|
||
}
|
||
|
||
path.push(['Z']);
|
||
} else {
|
||
var flag = start[0].flag;
|
||
Util.each(start, function (subItem, index) {
|
||
var radius = subItem.radius;
|
||
|
||
if (index === 0) {
|
||
path.push(['M', subItem.x, subItem.y]);
|
||
} else {
|
||
path.push(['A', radius, radius, 0, 0, subItem.flag, subItem.x, subItem.y]);
|
||
}
|
||
});
|
||
|
||
for (var j = end.length - 1; j >= 0; j--) {
|
||
var endSubItem = end[j];
|
||
var endRadius = endSubItem.radius;
|
||
|
||
if (j === end.length - 1) {
|
||
path.push(['M', endSubItem.x, endSubItem.y]);
|
||
} else {
|
||
path.push(['A', endRadius, endRadius, 0, 0, flag === 1 ? 0 : 1, endSubItem.x, endSubItem.y]);
|
||
}
|
||
}
|
||
}
|
||
|
||
return {
|
||
fill: bgColor,
|
||
path: path
|
||
};
|
||
}
|
||
});
|
||
module.exports = Grid; |