649 lines
16 KiB
JavaScript
649 lines
16 KiB
JavaScript
function _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
||
|
||
function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
||
|
||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
||
|
||
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
|
||
|
||
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
||
|
||
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
|
||
|
||
var Component = require('../component');
|
||
|
||
var Util = require('../util');
|
||
|
||
var Grid = require('./grid');
|
||
|
||
var Label = require('../label/base');
|
||
|
||
var _require = require('../const'),
|
||
FONT_FAMILY = _require.FONT_FAMILY;
|
||
|
||
var Axis = /*#__PURE__*/function (_Component) {
|
||
_inheritsLoose(Axis, _Component);
|
||
|
||
var _super = _createSuper(Axis);
|
||
|
||
function Axis() {
|
||
return _Component.apply(this, arguments) || this;
|
||
}
|
||
|
||
var _proto = Axis.prototype;
|
||
|
||
_proto.getDefaultCfg = function getDefaultCfg() {
|
||
var cfg = _Component.prototype.getDefaultCfg.call(this);
|
||
|
||
return Util.mix({}, cfg, {
|
||
/**
|
||
* 用于动画，唯一标识的 id
|
||
* @type {[type]}
|
||
*/
|
||
_id: null,
|
||
zIndex: 4,
|
||
|
||
/**
|
||
* 坐标轴上的坐标点
|
||
* @type {Array}
|
||
*/
|
||
ticks: null,
|
||
|
||
/**
|
||
* 坐标轴线的配置信息，如果设置成null，则不显示轴线
|
||
* @type {Object}
|
||
*/
|
||
line: null,
|
||
|
||
/**
|
||
* 坐标轴刻度线的配置,如果设置成null，则不显示刻度线
|
||
* @type {Object}
|
||
*/
|
||
tickLine: null,
|
||
|
||
/**
|
||
* 次刻度线个数配置
|
||
* @type {Number}
|
||
*/
|
||
subTickCount: 0,
|
||
|
||
/**
|
||
* 次刻度线样式配置
|
||
* @type {Object}
|
||
*/
|
||
subTickLine: null,
|
||
|
||
/**
|
||
* 网格线配置，如果值为 null，则不显示
|
||
* @type {Object}
|
||
*/
|
||
grid: null,
|
||
|
||
/**
|
||
* 坐标轴文本配置
|
||
* @type {Object}
|
||
*/
|
||
label: {
|
||
offset: 0,
|
||
offsetX: 0,
|
||
offsetY: 0,
|
||
textStyle: {},
|
||
// 坐标轴文本样式
|
||
autoRotate: true,
|
||
autoHide: false,
|
||
formatter: null // 坐标轴文本格式化回调函数
|
||
|
||
},
|
||
labelItems: [],
|
||
|
||
/**
|
||
* 坐标轴标题配置
|
||
* @type {Object}
|
||
*/
|
||
title: {
|
||
autoRotate: true,
|
||
// 文本是否自动旋转
|
||
textStyle: {} // 坐标轴标题样式
|
||
|
||
},
|
||
autoPaint: true
|
||
});
|
||
};
|
||
|
||
_proto.beforeRender = function beforeRender() {
|
||
var self = this;
|
||
var title = self.get('title');
|
||
var label = self.get('label');
|
||
var grid = self.get('grid');
|
||
|
||
if (title) {
|
||
self.set('title', Util.deepMix({
|
||
autoRotate: true,
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fill: '#ccc',
|
||
textBaseline: 'middle',
|
||
fontFamily: FONT_FAMILY,
|
||
textAlign: 'center'
|
||
},
|
||
offset: 48
|
||
}, title));
|
||
}
|
||
|
||
if (label) {
|
||
self.set('label', Util.deepMix({
|
||
autoRotate: true,
|
||
autoHide: true,
|
||
textStyle: {
|
||
fontSize: 12,
|
||
fill: '#ccc',
|
||
textBaseline: 'middle',
|
||
fontFamily: FONT_FAMILY
|
||
},
|
||
offset: 10
|
||
}, label));
|
||
}
|
||
|
||
if (grid) {
|
||
self.set('grid', Util.deepMix({
|
||
lineStyle: {
|
||
lineWidth: 1,
|
||
stroke: '#C0D0E0'
|
||
}
|
||
}, grid));
|
||
}
|
||
};
|
||
|
||
_proto.render = function render() {
|
||
var self = this;
|
||
self.beforeRender();
|
||
var labelCfg = self.get('label');
|
||
|
||
if (labelCfg) {
|
||
self.renderLabels();
|
||
}
|
||
|
||
if (self.get('autoPaint')) {
|
||
self.paint();
|
||
}
|
||
|
||
if (!Util.isNil(self.get('title'))) {
|
||
self.renderTitle();
|
||
}
|
||
|
||
self.get('group').sort();
|
||
};
|
||
|
||
_proto.renderLabels = function renderLabels() {
|
||
var self = this;
|
||
var group = self.get('group');
|
||
var labelCfg = self.get('label');
|
||
var labelRenderer = new Label({
|
||
name: 'axis-label'
|
||
});
|
||
self.set('labelRenderer', labelRenderer);
|
||
labelRenderer.set('labelCfg', labelCfg);
|
||
var cfgs2copy = ['formatter', 'htmlTemplate', 'labelLine', 'textStyle', 'useHtml'];
|
||
Util.each(cfgs2copy, function (cfg) {
|
||
if (labelCfg[cfg]) {
|
||
labelRenderer.set(cfg, labelCfg[cfg]);
|
||
}
|
||
});
|
||
labelRenderer.set('coord', self.get('coord'));
|
||
labelRenderer.set('group', group.addGroup());
|
||
labelRenderer.set('canvas', self.get('canvas'));
|
||
};
|
||
|
||
_proto._parseTicks = function _parseTicks(ticks) {
|
||
ticks = ticks || [];
|
||
var ticksLength = ticks.length;
|
||
|
||
for (var i = 0; i < ticksLength; i++) {
|
||
var item = ticks[i];
|
||
|
||
if (!Util.isObject(item)) {
|
||
ticks[i] = this.parseTick(item, i, ticksLength);
|
||
}
|
||
}
|
||
|
||
this.set('ticks', ticks);
|
||
return ticks;
|
||
};
|
||
|
||
_proto._addTickItem = function _addTickItem(index, point, length, type) {
|
||
if (type === void 0) {
|
||
type = '';
|
||
}
|
||
|
||
var tickItems = this.get('tickItems');
|
||
var subTickItems = this.get('subTickItems');
|
||
var end = this.getTickEnd(point, length, index);
|
||
var cfg = {
|
||
x1: point.x,
|
||
y1: point.y,
|
||
x2: end.x,
|
||
y2: end.y
|
||
};
|
||
|
||
if (!tickItems) {
|
||
tickItems = [];
|
||
}
|
||
|
||
if (!subTickItems) {
|
||
subTickItems = [];
|
||
}
|
||
|
||
if (type === 'sub') {
|
||
subTickItems.push(cfg);
|
||
} else {
|
||
tickItems.push(cfg);
|
||
}
|
||
|
||
this.set('tickItems', tickItems);
|
||
this.set('subTickItems', subTickItems);
|
||
};
|
||
|
||
_proto._renderLine = function _renderLine() {
|
||
var self = this;
|
||
var lineCfg = self.get('line');
|
||
var path;
|
||
|
||
if (lineCfg) {
|
||
path = self.getLinePath();
|
||
lineCfg = Util.mix({
|
||
path: path
|
||
}, lineCfg);
|
||
var group = self.get('group');
|
||
var lineShape = group.addShape('path', {
|
||
attrs: lineCfg
|
||
});
|
||
lineShape.name = 'axis-line';
|
||
self.get('appendInfo') && lineShape.setSilent('appendInfo', self.get('appendInfo'));
|
||
self.set('lineShape', lineShape);
|
||
}
|
||
};
|
||
|
||
_proto._processCatTicks = function _processCatTicks() {
|
||
var self = this;
|
||
var labelCfg = self.get('label');
|
||
var tickLineCfg = self.get('tickLine');
|
||
var ticks = self.get('ticks');
|
||
ticks = self._parseTicks(ticks);
|
||
|
||
var new_ticks = self._getNormalizedTicks(ticks);
|
||
|
||
for (var i = 0; i < new_ticks.length; i += 3) {
|
||
var p = self.getTickPoint(new_ticks[i]);
|
||
var p0 = self.getTickPoint(new_ticks[i + 1]);
|
||
var p1 = self.getTickPoint(new_ticks[i + 2]);
|
||
var index = Math.floor(i / 3);
|
||
var tick = ticks[index];
|
||
|
||
if (tickLineCfg) {
|
||
if (index === 0) {
|
||
self._addTickItem(index, p0, tickLineCfg.length);
|
||
}
|
||
|
||
self._addTickItem(index, p1, tickLineCfg.length);
|
||
}
|
||
|
||
if (labelCfg) {
|
||
self.addLabel(tick, p, index);
|
||
}
|
||
}
|
||
};
|
||
|
||
_proto._getNormalizedTicks = function _getNormalizedTicks(ticks) {
|
||
var tickSeg = 0;
|
||
|
||
if (ticks.length > 1) {
|
||
tickSeg = (ticks[1].value - ticks[0].value) / 2;
|
||
}
|
||
|
||
var points = [];
|
||
|
||
for (var i = 0; i < ticks.length; i++) {
|
||
var tick = ticks[i];
|
||
var p = tick.value;
|
||
var p0 = tick.value - tickSeg;
|
||
var p1 = tick.value + tickSeg;
|
||
points.push(p, p0, p1);
|
||
}
|
||
|
||
var range = Util.arrayUtil.getRange(points);
|
||
return points.map(function (p) {
|
||
var norm = (p - range.min) / (range.max - range.min);
|
||
return norm;
|
||
});
|
||
};
|
||
|
||
_proto.addLabel = function addLabel(tick, point, index) {
|
||
var self = this;
|
||
var labelItems = self.get('labelItems');
|
||
var labelRenderer = self.get('labelRenderer');
|
||
var label = Util.deepMix({}, self.get('label'));
|
||
var rst;
|
||
|
||
if (labelRenderer) {
|
||
var offset = self.get('_labelOffset');
|
||
|
||
if (!Util.isNil(self.get('label').offset)) {
|
||
offset = self.get('label').offset;
|
||
}
|
||
|
||
var vector = self.getSideVector(offset, point, index);
|
||
point = {
|
||
x: point.x + vector[0] + label.offsetX,
|
||
y: point.y + vector[1] + label.offsetY
|
||
};
|
||
label.text = tick.text;
|
||
label.x = point.x;
|
||
label.y = point.y;
|
||
label.point = point;
|
||
label.textAlign = self.getTextAnchor(vector);
|
||
|
||
if (point.rotate) {
|
||
label.rotate = point.rotate;
|
||
}
|
||
|
||
labelItems.push(label);
|
||
}
|
||
|
||
return rst;
|
||
};
|
||
|
||
_proto._processTicks = function _processTicks() {
|
||
var self = this;
|
||
var labelCfg = self.get('label');
|
||
var subTickCount = self.get('subTickCount');
|
||
var tickLineCfg = self.get('tickLine');
|
||
var ticks = self.get('ticks');
|
||
ticks = self._parseTicks(ticks);
|
||
Util.each(ticks, function (tick, index) {
|
||
var tickPoint = self.getTickPoint(tick.value, index);
|
||
|
||
if (tickLineCfg) {
|
||
self._addTickItem(index, tickPoint, tickLineCfg.length);
|
||
}
|
||
|
||
if (labelCfg) {
|
||
self.addLabel(tick, tickPoint, index);
|
||
}
|
||
});
|
||
|
||
if (subTickCount) {
|
||
// 如果有设置次级分点，添加次级tick
|
||
var subTickLineCfg = self.get('subTickLine');
|
||
Util.each(ticks, function (tick, index) {
|
||
if (index > 0) {
|
||
var diff = tick.value - ticks[index - 1].value;
|
||
diff = diff / (self.get('subTickCount') + 1);
|
||
|
||
for (var i = 1; i <= subTickCount; i++) {
|
||
var subTick = {
|
||
text: '',
|
||
value: index ? ticks[index - 1].value + i * diff : i * diff
|
||
};
|
||
var tickPoint = self.getTickPoint(subTick.value);
|
||
var subTickLength = void 0;
|
||
|
||
if (subTickLineCfg && subTickLineCfg.length) {
|
||
subTickLength = subTickLineCfg.length;
|
||
} else {
|
||
subTickLength = parseInt(tickLineCfg.length * (3 / 5), 10);
|
||
}
|
||
|
||
self._addTickItem(i - 1, tickPoint, subTickLength, 'sub');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
_proto._addTickLine = function _addTickLine(ticks, lineCfg) {
|
||
var self = this;
|
||
var cfg = Util.mix({}, lineCfg);
|
||
var path = [];
|
||
Util.each(ticks, function (item) {
|
||
path.push(['M', item.x1, item.y1]);
|
||
path.push(['L', item.x2, item.y2]);
|
||
});
|
||
delete cfg.length;
|
||
cfg.path = path;
|
||
var group = self.get('group');
|
||
var tickShape = group.addShape('path', {
|
||
attrs: cfg
|
||
});
|
||
tickShape.name = 'axis-ticks';
|
||
tickShape._id = self.get('_id') + '-ticks';
|
||
tickShape.set('coord', self.get('coord'));
|
||
self.get('appendInfo') && tickShape.setSilent('appendInfo', self.get('appendInfo'));
|
||
};
|
||
|
||
_proto._renderTicks = function _renderTicks() {
|
||
var self = this;
|
||
var tickItems = self.get('tickItems');
|
||
var subTickItems = self.get('subTickItems');
|
||
|
||
if (!Util.isEmpty(tickItems)) {
|
||
var tickLineCfg = self.get('tickLine');
|
||
|
||
self._addTickLine(tickItems, tickLineCfg);
|
||
}
|
||
|
||
if (!Util.isEmpty(subTickItems)) {
|
||
var subTickLineCfg = self.get('subTickLine') || self.get('tickLine');
|
||
|
||
self._addTickLine(subTickItems, subTickLineCfg);
|
||
}
|
||
};
|
||
|
||
_proto._renderGrid = function _renderGrid() {
|
||
var grid = this.get('grid');
|
||
|
||
if (!grid) {
|
||
return;
|
||
}
|
||
|
||
grid.coord = this.get('coord');
|
||
grid.appendInfo = this.get('appendInfo');
|
||
var group = this.get('group');
|
||
this.set('gridGroup', group.addGroup(Grid, grid));
|
||
};
|
||
|
||
_proto._renderLabels = function _renderLabels() {
|
||
var self = this;
|
||
var labelRenderer = self.get('labelRenderer');
|
||
var labelItems = self.get('labelItems');
|
||
|
||
if (labelRenderer) {
|
||
labelRenderer.set('items', labelItems);
|
||
|
||
labelRenderer._dryDraw();
|
||
}
|
||
};
|
||
|
||
_proto.paint = function paint() {
|
||
var self = this;
|
||
var tickLineCfg = self.get('tickLine');
|
||
var alignWithLabel = true;
|
||
|
||
if (tickLineCfg && tickLineCfg.hasOwnProperty('alignWithLabel')) {
|
||
alignWithLabel = tickLineCfg.alignWithLabel;
|
||
}
|
||
|
||
self._renderLine();
|
||
|
||
var type = self.get('type');
|
||
var isCat = type === 'cat' || type === 'timeCat';
|
||
|
||
if (isCat && alignWithLabel === false) {
|
||
self._processCatTicks();
|
||
} else {
|
||
self._processTicks();
|
||
}
|
||
|
||
self._renderTicks();
|
||
|
||
self._renderGrid();
|
||
|
||
self._renderLabels();
|
||
|
||
var labelCfg = this.get('label');
|
||
|
||
if (labelCfg && labelCfg.autoRotate) {
|
||
self.autoRotateLabels();
|
||
}
|
||
|
||
if (labelCfg && labelCfg.autoHide) {
|
||
self.autoHideLabels();
|
||
}
|
||
};
|
||
|
||
_proto.parseTick = function parseTick(tick, index, length) {
|
||
return {
|
||
text: tick,
|
||
value: index / (length - 1)
|
||
};
|
||
};
|
||
|
||
_proto.getTextAnchor = function getTextAnchor(vector) {
|
||
var ratio = Math.abs(vector[1] / vector[0]);
|
||
var align;
|
||
|
||
if (ratio >= 1) {
|
||
// 上面或者下面
|
||
align = 'center';
|
||
} else {
|
||
if (vector[0] > 0) {
|
||
// 右侧
|
||
align = 'start';
|
||
} else {
|
||
// 左侧
|
||
align = 'end';
|
||
}
|
||
}
|
||
|
||
return align;
|
||
};
|
||
|
||
_proto.getMaxLabelWidth = function getMaxLabelWidth(labelRenderer) {
|
||
var labels = labelRenderer.getLabels();
|
||
var max = 0;
|
||
Util.each(labels, function (label) {
|
||
var bbox = label.getBBox();
|
||
var width = bbox.width;
|
||
|
||
if (max < width) {
|
||
max = width;
|
||
}
|
||
});
|
||
return max;
|
||
};
|
||
|
||
_proto.getMaxLabelHeight = function getMaxLabelHeight(labelRenderer) {
|
||
var labels = labelRenderer.getLabels();
|
||
var max = 0;
|
||
Util.each(labels, function (label) {
|
||
var bbox = label.getBBox();
|
||
var height = bbox.height;
|
||
|
||
if (max < height) {
|
||
max = height;
|
||
}
|
||
});
|
||
return max;
|
||
};
|
||
|
||
_proto.destroy = function destroy() {
|
||
var self = this;
|
||
|
||
if (!self.destroyed) {
|
||
var gridGroup = self.get('gridGroup');
|
||
gridGroup && gridGroup.remove();
|
||
var labelRenderer = this.get('labelRenderer');
|
||
labelRenderer && labelRenderer.destroy();
|
||
var group = self.get('group');
|
||
group.destroy();
|
||
|
||
_Component.prototype.destroy.call(this); // 要最后调用 super.destroy 否则 get 属性会无效
|
||
|
||
}
|
||
};
|
||
|
||
_proto.clear = function clear() {
|
||
var self = this;
|
||
var group = self.get('group');
|
||
|
||
if (!group.get('destroyed') && group.get('children').length) {
|
||
var gridGroup = self.get('gridGroup');
|
||
gridGroup && gridGroup.clear();
|
||
var labelRenderer = this.get('labelRenderer');
|
||
labelRenderer && labelRenderer.clear();
|
||
|
||
var _group = self.get('group');
|
||
|
||
_group.clear();
|
||
}
|
||
}
|
||
/**
|
||
* 旋转文本
|
||
* @abstract
|
||
* @return {[type]} [description]
|
||
*/
|
||
;
|
||
|
||
_proto.autoRotateLabels = function autoRotateLabels() {}
|
||
/**
|
||
* 文本自动防遮罩
|
||
* @abstract
|
||
* @return {[type]} [description]
|
||
*/
|
||
;
|
||
|
||
_proto.autoHideLabels = function autoHideLabels() {}
|
||
/**
|
||
* 渲染标题
|
||
* @abstract
|
||
* @return {[type]} [description]
|
||
*/
|
||
;
|
||
|
||
_proto.renderTitle = function renderTitle() {}
|
||
/**
|
||
* 获取坐标轴线的 path
|
||
* @abstract
|
||
* @return {[type]} [description]
|
||
*/
|
||
;
|
||
|
||
_proto.getLinePath = function getLinePath() {}
|
||
/**
|
||
* 获取 tick 在画布上的位置
|
||
* @abstract
|
||
* @return {[type]} [description]
|
||
*/
|
||
;
|
||
|
||
_proto.getTickPoint = function getTickPoint() {}
|
||
/**
|
||
* 获取标示坐标点的线的终点
|
||
* @abstract
|
||
* @return {[type]} [description]
|
||
*/
|
||
;
|
||
|
||
_proto.getTickEnd = function getTickEnd() {}
|
||
/**
|
||
* 获取距离坐标轴的向量
|
||
* @abstract
|
||
* @return {[type]} [description]
|
||
*/
|
||
;
|
||
|
||
_proto.getSideVector = function getSideVector() {};
|
||
|
||
return Axis;
|
||
}(Component);
|
||
|
||
module.exports = Axis; |