Grid.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. var _config = require("../../config");
  20. var __DEV__ = _config.__DEV__;
  21. var _util = require("zrender/lib/core/util");
  22. var isObject = _util.isObject;
  23. var each = _util.each;
  24. var map = _util.map;
  25. var indexOf = _util.indexOf;
  26. var retrieve = _util.retrieve;
  27. var _layout = require("../../util/layout");
  28. var getLayoutRect = _layout.getLayoutRect;
  29. var _axisHelper = require("../../coord/axisHelper");
  30. var createScaleByModel = _axisHelper.createScaleByModel;
  31. var ifAxisCrossZero = _axisHelper.ifAxisCrossZero;
  32. var niceScaleExtent = _axisHelper.niceScaleExtent;
  33. var estimateLabelUnionRect = _axisHelper.estimateLabelUnionRect;
  34. var Cartesian2D = require("./Cartesian2D");
  35. var Axis2D = require("./Axis2D");
  36. var CoordinateSystem = require("../../CoordinateSystem");
  37. var _dataStackHelper = require("../../data/helper/dataStackHelper");
  38. var getStackedDimension = _dataStackHelper.getStackedDimension;
  39. require("./GridModel");
  40. /*
  41. * Licensed to the Apache Software Foundation (ASF) under one
  42. * or more contributor license agreements. See the NOTICE file
  43. * distributed with this work for additional information
  44. * regarding copyright ownership. The ASF licenses this file
  45. * to you under the Apache License, Version 2.0 (the
  46. * "License"); you may not use this file except in compliance
  47. * with the License. You may obtain a copy of the License at
  48. *
  49. * http://www.apache.org/licenses/LICENSE-2.0
  50. *
  51. * Unless required by applicable law or agreed to in writing,
  52. * software distributed under the License is distributed on an
  53. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  54. * KIND, either express or implied. See the License for the
  55. * specific language governing permissions and limitations
  56. * under the License.
  57. */
  58. /**
  59. * Grid is a region which contains at most 4 cartesian systems
  60. *
  61. * TODO Default cartesian
  62. */
  63. // Depends on GridModel, AxisModel, which performs preprocess.
  64. /**
  65. * Check if the axis is used in the specified grid
  66. * @inner
  67. */
  68. function isAxisUsedInTheGrid(axisModel, gridModel, ecModel) {
  69. return axisModel.getCoordSysModel() === gridModel;
  70. }
  71. function Grid(gridModel, ecModel, api) {
  72. /**
  73. * @type {Object.<string, module:echarts/coord/cartesian/Cartesian2D>}
  74. * @private
  75. */
  76. this._coordsMap = {};
  77. /**
  78. * @type {Array.<module:echarts/coord/cartesian/Cartesian>}
  79. * @private
  80. */
  81. this._coordsList = [];
  82. /**
  83. * @type {Object.<string, Array.<module:echarts/coord/cartesian/Axis2D>>}
  84. * @private
  85. */
  86. this._axesMap = {};
  87. /**
  88. * @type {Array.<module:echarts/coord/cartesian/Axis2D>}
  89. * @private
  90. */
  91. this._axesList = [];
  92. this._initCartesian(gridModel, ecModel, api);
  93. this.model = gridModel;
  94. }
  95. var gridProto = Grid.prototype;
  96. gridProto.type = 'grid';
  97. gridProto.axisPointerEnabled = true;
  98. gridProto.getRect = function () {
  99. return this._rect;
  100. };
  101. gridProto.update = function (ecModel, api) {
  102. var axesMap = this._axesMap;
  103. this._updateScale(ecModel, this.model);
  104. each(axesMap.x, function (xAxis) {
  105. niceScaleExtent(xAxis.scale, xAxis.model);
  106. });
  107. each(axesMap.y, function (yAxis) {
  108. niceScaleExtent(yAxis.scale, yAxis.model);
  109. }); // Key: axisDim_axisIndex, value: boolean, whether onZero target.
  110. var onZeroRecords = {};
  111. each(axesMap.x, function (xAxis) {
  112. fixAxisOnZero(axesMap, 'y', xAxis, onZeroRecords);
  113. });
  114. each(axesMap.y, function (yAxis) {
  115. fixAxisOnZero(axesMap, 'x', yAxis, onZeroRecords);
  116. }); // Resize again if containLabel is enabled
  117. // FIXME It may cause getting wrong grid size in data processing stage
  118. this.resize(this.model, api);
  119. };
  120. function fixAxisOnZero(axesMap, otherAxisDim, axis, onZeroRecords) {
  121. axis.getAxesOnZeroOf = function () {
  122. // TODO: onZero of multiple axes.
  123. return otherAxisOnZeroOf ? [otherAxisOnZeroOf] : [];
  124. }; // onZero can not be enabled in these two situations:
  125. // 1. When any other axis is a category axis.
  126. // 2. When no axis is cross 0 point.
  127. var otherAxes = axesMap[otherAxisDim];
  128. var otherAxisOnZeroOf;
  129. var axisModel = axis.model;
  130. var onZero = axisModel.get('axisLine.onZero');
  131. var onZeroAxisIndex = axisModel.get('axisLine.onZeroAxisIndex');
  132. if (!onZero) {
  133. return;
  134. } // If target axis is specified.
  135. if (onZeroAxisIndex != null) {
  136. if (canOnZeroToAxis(otherAxes[onZeroAxisIndex])) {
  137. otherAxisOnZeroOf = otherAxes[onZeroAxisIndex];
  138. }
  139. } else {
  140. // Find the first available other axis.
  141. for (var idx in otherAxes) {
  142. if (otherAxes.hasOwnProperty(idx) && canOnZeroToAxis(otherAxes[idx]) // Consider that two Y axes on one value axis,
  143. // if both onZero, the two Y axes overlap.
  144. && !onZeroRecords[getOnZeroRecordKey(otherAxes[idx])]) {
  145. otherAxisOnZeroOf = otherAxes[idx];
  146. break;
  147. }
  148. }
  149. }
  150. if (otherAxisOnZeroOf) {
  151. onZeroRecords[getOnZeroRecordKey(otherAxisOnZeroOf)] = true;
  152. }
  153. function getOnZeroRecordKey(axis) {
  154. return axis.dim + '_' + axis.index;
  155. }
  156. }
  157. function canOnZeroToAxis(axis) {
  158. return axis && axis.type !== 'category' && axis.type !== 'time' && ifAxisCrossZero(axis);
  159. }
  160. /**
  161. * Resize the grid
  162. * @param {module:echarts/coord/cartesian/GridModel} gridModel
  163. * @param {module:echarts/ExtensionAPI} api
  164. */
  165. gridProto.resize = function (gridModel, api, ignoreContainLabel) {
  166. var gridRect = getLayoutRect(gridModel.getBoxLayoutParams(), {
  167. width: api.getWidth(),
  168. height: api.getHeight()
  169. });
  170. this._rect = gridRect;
  171. var axesList = this._axesList;
  172. adjustAxes(); // Minus label size
  173. if (!ignoreContainLabel && gridModel.get('containLabel')) {
  174. each(axesList, function (axis) {
  175. if (!axis.model.get('axisLabel.inside')) {
  176. var labelUnionRect = estimateLabelUnionRect(axis);
  177. if (labelUnionRect) {
  178. var dim = axis.isHorizontal() ? 'height' : 'width';
  179. var margin = axis.model.get('axisLabel.margin');
  180. gridRect[dim] -= labelUnionRect[dim] + margin;
  181. if (axis.position === 'top') {
  182. gridRect.y += labelUnionRect.height + margin;
  183. } else if (axis.position === 'left') {
  184. gridRect.x += labelUnionRect.width + margin;
  185. }
  186. }
  187. }
  188. });
  189. adjustAxes();
  190. }
  191. function adjustAxes() {
  192. each(axesList, function (axis) {
  193. var isHorizontal = axis.isHorizontal();
  194. var extent = isHorizontal ? [0, gridRect.width] : [0, gridRect.height];
  195. var idx = axis.inverse ? 1 : 0;
  196. axis.setExtent(extent[idx], extent[1 - idx]);
  197. updateAxisTransform(axis, isHorizontal ? gridRect.x : gridRect.y);
  198. });
  199. }
  200. };
  201. /**
  202. * @param {string} axisType
  203. * @param {number} [axisIndex]
  204. */
  205. gridProto.getAxis = function (axisType, axisIndex) {
  206. var axesMapOnDim = this._axesMap[axisType];
  207. if (axesMapOnDim != null) {
  208. if (axisIndex == null) {
  209. // Find first axis
  210. for (var name in axesMapOnDim) {
  211. if (axesMapOnDim.hasOwnProperty(name)) {
  212. return axesMapOnDim[name];
  213. }
  214. }
  215. }
  216. return axesMapOnDim[axisIndex];
  217. }
  218. };
  219. /**
  220. * @return {Array.<module:echarts/coord/Axis>}
  221. */
  222. gridProto.getAxes = function () {
  223. return this._axesList.slice();
  224. };
  225. /**
  226. * Usage:
  227. * grid.getCartesian(xAxisIndex, yAxisIndex);
  228. * grid.getCartesian(xAxisIndex);
  229. * grid.getCartesian(null, yAxisIndex);
  230. * grid.getCartesian({xAxisIndex: ..., yAxisIndex: ...});
  231. *
  232. * @param {number|Object} [xAxisIndex]
  233. * @param {number} [yAxisIndex]
  234. */
  235. gridProto.getCartesian = function (xAxisIndex, yAxisIndex) {
  236. if (xAxisIndex != null && yAxisIndex != null) {
  237. var key = 'x' + xAxisIndex + 'y' + yAxisIndex;
  238. return this._coordsMap[key];
  239. }
  240. if (isObject(xAxisIndex)) {
  241. yAxisIndex = xAxisIndex.yAxisIndex;
  242. xAxisIndex = xAxisIndex.xAxisIndex;
  243. } // When only xAxisIndex or yAxisIndex given, find its first cartesian.
  244. for (var i = 0, coordList = this._coordsList; i < coordList.length; i++) {
  245. if (coordList[i].getAxis('x').index === xAxisIndex || coordList[i].getAxis('y').index === yAxisIndex) {
  246. return coordList[i];
  247. }
  248. }
  249. };
  250. gridProto.getCartesians = function () {
  251. return this._coordsList.slice();
  252. };
  253. /**
  254. * @implements
  255. * see {module:echarts/CoodinateSystem}
  256. */
  257. gridProto.convertToPixel = function (ecModel, finder, value) {
  258. var target = this._findConvertTarget(ecModel, finder);
  259. return target.cartesian ? target.cartesian.dataToPoint(value) : target.axis ? target.axis.toGlobalCoord(target.axis.dataToCoord(value)) : null;
  260. };
  261. /**
  262. * @implements
  263. * see {module:echarts/CoodinateSystem}
  264. */
  265. gridProto.convertFromPixel = function (ecModel, finder, value) {
  266. var target = this._findConvertTarget(ecModel, finder);
  267. return target.cartesian ? target.cartesian.pointToData(value) : target.axis ? target.axis.coordToData(target.axis.toLocalCoord(value)) : null;
  268. };
  269. /**
  270. * @inner
  271. */
  272. gridProto._findConvertTarget = function (ecModel, finder) {
  273. var seriesModel = finder.seriesModel;
  274. var xAxisModel = finder.xAxisModel || seriesModel && seriesModel.getReferringComponents('xAxis')[0];
  275. var yAxisModel = finder.yAxisModel || seriesModel && seriesModel.getReferringComponents('yAxis')[0];
  276. var gridModel = finder.gridModel;
  277. var coordsList = this._coordsList;
  278. var cartesian;
  279. var axis;
  280. if (seriesModel) {
  281. cartesian = seriesModel.coordinateSystem;
  282. indexOf(coordsList, cartesian) < 0 && (cartesian = null);
  283. } else if (xAxisModel && yAxisModel) {
  284. cartesian = this.getCartesian(xAxisModel.componentIndex, yAxisModel.componentIndex);
  285. } else if (xAxisModel) {
  286. axis = this.getAxis('x', xAxisModel.componentIndex);
  287. } else if (yAxisModel) {
  288. axis = this.getAxis('y', yAxisModel.componentIndex);
  289. } // Lowest priority.
  290. else if (gridModel) {
  291. var grid = gridModel.coordinateSystem;
  292. if (grid === this) {
  293. cartesian = this._coordsList[0];
  294. }
  295. }
  296. return {
  297. cartesian: cartesian,
  298. axis: axis
  299. };
  300. };
  301. /**
  302. * @implements
  303. * see {module:echarts/CoodinateSystem}
  304. */
  305. gridProto.containPoint = function (point) {
  306. var coord = this._coordsList[0];
  307. if (coord) {
  308. return coord.containPoint(point);
  309. }
  310. };
  311. /**
  312. * Initialize cartesian coordinate systems
  313. * @private
  314. */
  315. gridProto._initCartesian = function (gridModel, ecModel, api) {
  316. var axisPositionUsed = {
  317. left: false,
  318. right: false,
  319. top: false,
  320. bottom: false
  321. };
  322. var axesMap = {
  323. x: {},
  324. y: {}
  325. };
  326. var axesCount = {
  327. x: 0,
  328. y: 0
  329. }; /// Create axis
  330. ecModel.eachComponent('xAxis', createAxisCreator('x'), this);
  331. ecModel.eachComponent('yAxis', createAxisCreator('y'), this);
  332. if (!axesCount.x || !axesCount.y) {
  333. // Roll back when there no either x or y axis
  334. this._axesMap = {};
  335. this._axesList = [];
  336. return;
  337. }
  338. this._axesMap = axesMap; /// Create cartesian2d
  339. each(axesMap.x, function (xAxis, xAxisIndex) {
  340. each(axesMap.y, function (yAxis, yAxisIndex) {
  341. var key = 'x' + xAxisIndex + 'y' + yAxisIndex;
  342. var cartesian = new Cartesian2D(key);
  343. cartesian.grid = this;
  344. cartesian.model = gridModel;
  345. this._coordsMap[key] = cartesian;
  346. this._coordsList.push(cartesian);
  347. cartesian.addAxis(xAxis);
  348. cartesian.addAxis(yAxis);
  349. }, this);
  350. }, this);
  351. function createAxisCreator(axisType) {
  352. return function (axisModel, idx) {
  353. if (!isAxisUsedInTheGrid(axisModel, gridModel, ecModel)) {
  354. return;
  355. }
  356. var axisPosition = axisModel.get('position');
  357. if (axisType === 'x') {
  358. // Fix position
  359. if (axisPosition !== 'top' && axisPosition !== 'bottom') {
  360. // Default bottom of X
  361. axisPosition = axisPositionUsed.bottom ? 'top' : 'bottom';
  362. }
  363. } else {
  364. // Fix position
  365. if (axisPosition !== 'left' && axisPosition !== 'right') {
  366. // Default left of Y
  367. axisPosition = axisPositionUsed.left ? 'right' : 'left';
  368. }
  369. }
  370. axisPositionUsed[axisPosition] = true;
  371. var axis = new Axis2D(axisType, createScaleByModel(axisModel), [0, 0], axisModel.get('type'), axisPosition);
  372. var isCategory = axis.type === 'category';
  373. axis.onBand = isCategory && axisModel.get('boundaryGap');
  374. axis.inverse = axisModel.get('inverse'); // Inject axis into axisModel
  375. axisModel.axis = axis; // Inject axisModel into axis
  376. axis.model = axisModel; // Inject grid info axis
  377. axis.grid = this; // Index of axis, can be used as key
  378. axis.index = idx;
  379. this._axesList.push(axis);
  380. axesMap[axisType][idx] = axis;
  381. axesCount[axisType]++;
  382. };
  383. }
  384. };
  385. /**
  386. * Update cartesian properties from series
  387. * @param {module:echarts/model/Option} option
  388. * @private
  389. */
  390. gridProto._updateScale = function (ecModel, gridModel) {
  391. // Reset scale
  392. each(this._axesList, function (axis) {
  393. axis.scale.setExtent(Infinity, -Infinity);
  394. });
  395. ecModel.eachSeries(function (seriesModel) {
  396. if (isCartesian2D(seriesModel)) {
  397. var axesModels = findAxesModels(seriesModel, ecModel);
  398. var xAxisModel = axesModels[0];
  399. var yAxisModel = axesModels[1];
  400. if (!isAxisUsedInTheGrid(xAxisModel, gridModel, ecModel) || !isAxisUsedInTheGrid(yAxisModel, gridModel, ecModel)) {
  401. return;
  402. }
  403. var cartesian = this.getCartesian(xAxisModel.componentIndex, yAxisModel.componentIndex);
  404. var data = seriesModel.getData();
  405. var xAxis = cartesian.getAxis('x');
  406. var yAxis = cartesian.getAxis('y');
  407. if (data.type === 'list') {
  408. unionExtent(data, xAxis, seriesModel);
  409. unionExtent(data, yAxis, seriesModel);
  410. }
  411. }
  412. }, this);
  413. function unionExtent(data, axis, seriesModel) {
  414. each(data.mapDimension(axis.dim, true), function (dim) {
  415. axis.scale.unionExtentFromData( // For example, the extent of the orginal dimension
  416. // is [0.1, 0.5], the extent of the `stackResultDimension`
  417. // is [7, 9], the final extent should not include [0.1, 0.5].
  418. data, getStackedDimension(data, dim));
  419. });
  420. }
  421. };
  422. /**
  423. * @param {string} [dim] 'x' or 'y' or 'auto' or null/undefined
  424. * @return {Object} {baseAxes: [], otherAxes: []}
  425. */
  426. gridProto.getTooltipAxes = function (dim) {
  427. var baseAxes = [];
  428. var otherAxes = [];
  429. each(this.getCartesians(), function (cartesian) {
  430. var baseAxis = dim != null && dim !== 'auto' ? cartesian.getAxis(dim) : cartesian.getBaseAxis();
  431. var otherAxis = cartesian.getOtherAxis(baseAxis);
  432. indexOf(baseAxes, baseAxis) < 0 && baseAxes.push(baseAxis);
  433. indexOf(otherAxes, otherAxis) < 0 && otherAxes.push(otherAxis);
  434. });
  435. return {
  436. baseAxes: baseAxes,
  437. otherAxes: otherAxes
  438. };
  439. };
  440. /**
  441. * @inner
  442. */
  443. function updateAxisTransform(axis, coordBase) {
  444. var axisExtent = axis.getExtent();
  445. var axisExtentSum = axisExtent[0] + axisExtent[1]; // Fast transform
  446. axis.toGlobalCoord = axis.dim === 'x' ? function (coord) {
  447. return coord + coordBase;
  448. } : function (coord) {
  449. return axisExtentSum - coord + coordBase;
  450. };
  451. axis.toLocalCoord = axis.dim === 'x' ? function (coord) {
  452. return coord - coordBase;
  453. } : function (coord) {
  454. return axisExtentSum - coord + coordBase;
  455. };
  456. }
  457. var axesTypes = ['xAxis', 'yAxis'];
  458. /**
  459. * @inner
  460. */
  461. function findAxesModels(seriesModel, ecModel) {
  462. return map(axesTypes, function (axisType) {
  463. var axisModel = seriesModel.getReferringComponents(axisType)[0];
  464. return axisModel;
  465. });
  466. }
  467. /**
  468. * @inner
  469. */
  470. function isCartesian2D(seriesModel) {
  471. return seriesModel.get('coordinateSystem') === 'cartesian2d';
  472. }
  473. Grid.create = function (ecModel, api) {
  474. var grids = [];
  475. ecModel.eachComponent('grid', function (gridModel, idx) {
  476. var grid = new Grid(gridModel, ecModel, api);
  477. grid.name = 'grid_' + idx; // dataSampling requires axis extent, so resize
  478. // should be performed in create stage.
  479. grid.resize(gridModel, api, true);
  480. gridModel.coordinateSystem = grid;
  481. grids.push(grid);
  482. }); // Inject the coordinateSystems into seriesModel
  483. ecModel.eachSeries(function (seriesModel) {
  484. if (!isCartesian2D(seriesModel)) {
  485. return;
  486. }
  487. var axesModels = findAxesModels(seriesModel, ecModel);
  488. var xAxisModel = axesModels[0];
  489. var yAxisModel = axesModels[1];
  490. var gridModel = xAxisModel.getCoordSysModel();
  491. var grid = gridModel.coordinateSystem;
  492. seriesModel.coordinateSystem = grid.getCartesian(xAxisModel.componentIndex, yAxisModel.componentIndex);
  493. });
  494. return grids;
  495. }; // For deciding which dimensions to use when creating list data
  496. Grid.dimensions = Grid.prototype.dimensions = Cartesian2D.prototype.dimensions;
  497. CoordinateSystem.register('cartesian2d', Grid);
  498. var _default = Grid;
  499. module.exports = _default;