123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- "use strict";
- var Util = require('../../util/common');
- var Shape = require('./shape');
- var Vector2 = require('../../graphic/util/vector2');
- var Global = require('../../global');
- function getRectPoints(cfg) {
- var x = cfg.x,
- y = cfg.y,
- y0 = cfg.y0,
- size = cfg.size;
- var ymin = y0;
- var ymax = y;
- if (Util.isArray(y)) {
- ymax = y[1];
- ymin = y[0];
- }
- var xmin;
- var xmax;
- if (Util.isArray(x)) {
- xmin = x[0];
- xmax = x[1];
- } else {
- xmin = x - size / 2;
- xmax = x + size / 2;
- }
- return [{
- x: xmin,
- y: ymin
- }, {
- x: xmin,
- y: ymax
- }, {
- x: xmax,
- y: ymax
- }, {
- x: xmax,
- y: ymin
- }];
- }
- function getRectRange(points) {
- var xValues = [];
- var yValues = [];
- for (var i = 0, len = points.length; i < len; i++) {
- var point = points[i];
- xValues.push(point.x);
- yValues.push(point.y);
- }
- var xMin = Math.min.apply(null, xValues);
- var yMin = Math.min.apply(null, yValues);
- var xMax = Math.max.apply(null, xValues);
- var yMax = Math.max.apply(null, yValues);
- return {
- x: xMin,
- y: yMin,
- width: xMax - xMin,
- height: yMax - yMin
- };
- }
- function getMiddlePoint(a, b) {
- var x = (a.x - b.x) / 2 + b.x;
- var y = (a.y - b.y) / 2 + b.y;
- return {
- x: x,
- y: y
- };
- }
- var Interval = Shape.registerFactory('interval', {
- defaultShapeType: 'rect',
- getDefaultPoints: function getDefaultPoints(cfg) {
- return getRectPoints(cfg);
- }
- });
- Shape.registerShape('interval', 'rect', {
- draw: function draw(cfg, container) {
- var points = this.parsePoints(cfg.points);
- var style = Util.mix({
- fill: cfg.color
- }, Global.shape.interval, cfg.style);
- if (cfg.isInCircle) {
- var newPoints = points.slice(0);
- if (this._coord.transposed) {
- newPoints = [points[0], points[3], points[2], points[1]];
- }
- var _cfg$center = cfg.center,
- x = _cfg$center.x,
- y = _cfg$center.y;
- var v = [1, 0];
- var v0 = [newPoints[0].x - x, newPoints[0].y - y];
- var v1 = [newPoints[1].x - x, newPoints[1].y - y];
- var v2 = [newPoints[2].x - x, newPoints[2].y - y];
- var startAngle = Vector2.angleTo(v, v1);
- var endAngle = Vector2.angleTo(v, v2);
- var r0 = Vector2.length(v0);
- var r = Vector2.length(v1);
- if (startAngle >= 1.5 * Math.PI) {
- startAngle = startAngle - 2 * Math.PI;
- }
- if (endAngle >= 1.5 * Math.PI) {
- endAngle = endAngle - 2 * Math.PI;
- }
- return container.addShape('Sector', {
- className: 'interval',
- attrs: Util.mix({
- x: x,
- y: y,
- r: r,
- r0: r0,
- startAngle: startAngle,
- endAngle: endAngle
- }, style)
- });
- }
- var rectCfg = getRectRange(points);
- return container.addShape('rect', {
- className: 'interval',
- attrs: Util.mix(rectCfg, style)
- });
- }
- }); // 金字塔 和 漏斗图
- ['pyramid', 'funnel'].forEach(function (shapeType) {
- Shape.registerShape('interval', shapeType, {
- getPoints: function getPoints(cfg) {
- cfg.size = cfg.size * 2; // 漏斗图的 size 是柱状图的两倍
- return getRectPoints(cfg);
- },
- draw: function draw(cfg, container) {
- var points = this.parsePoints(cfg.points);
- var nextPoints = this.parsePoints(cfg.nextPoints);
- var polygonPoints = null;
- if (nextPoints) {
- polygonPoints = [points[0], points[1], nextPoints[1], nextPoints[0]];
- } else {
- polygonPoints = [points[0], points[1]]; // pyramid 顶部是三角形,所以取中心点就好了,funnel顶部是长方形
- if (shapeType === 'pyramid') {
- polygonPoints.push(getMiddlePoint(points[2], points[3]));
- } else {
- polygonPoints.push(points[2], points[3]);
- }
- }
- var attrs = Util.mix({
- fill: cfg.color,
- points: polygonPoints
- }, Global.shape.interval, cfg.style);
- return container.addShape('polygon', {
- className: 'interval',
- attrs: attrs
- });
- }
- });
- });
- module.exports = Interval;
|