AxisBuilder.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574
  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. /**
  20. * AUTO-GENERATED FILE. DO NOT MODIFY.
  21. */
  22. /*
  23. * Licensed to the Apache Software Foundation (ASF) under one
  24. * or more contributor license agreements. See the NOTICE file
  25. * distributed with this work for additional information
  26. * regarding copyright ownership. The ASF licenses this file
  27. * to you under the Apache License, Version 2.0 (the
  28. * "License"); you may not use this file except in compliance
  29. * with the License. You may obtain a copy of the License at
  30. *
  31. * http://www.apache.org/licenses/LICENSE-2.0
  32. *
  33. * Unless required by applicable law or agreed to in writing,
  34. * software distributed under the License is distributed on an
  35. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  36. * KIND, either express or implied. See the License for the
  37. * specific language governing permissions and limitations
  38. * under the License.
  39. */
  40. import { retrieve, defaults, extend, each, isObject, map, isString, isNumber, isFunction, retrieve2 } from 'zrender/lib/core/util.js';
  41. import * as graphic from '../../util/graphic.js';
  42. import { getECData } from '../../util/innerStore.js';
  43. import { createTextStyle } from '../../label/labelStyle.js';
  44. import Model from '../../model/Model.js';
  45. import { isRadianAroundZero, remRadian } from '../../util/number.js';
  46. import { createSymbol, normalizeSymbolOffset } from '../../util/symbol.js';
  47. import * as matrixUtil from 'zrender/lib/core/matrix.js';
  48. import { applyTransform as v2ApplyTransform } from 'zrender/lib/core/vector.js';
  49. import { shouldShowAllLabels } from '../../coord/axisHelper.js';
  50. import { prepareLayoutList, hideOverlap } from '../../label/labelLayoutHelper.js';
  51. var PI = Math.PI;
  52. /**
  53. * A final axis is translated and rotated from a "standard axis".
  54. * So opt.position and opt.rotation is required.
  55. *
  56. * A standard axis is and axis from [0, 0] to [0, axisExtent[1]],
  57. * for example: (0, 0) ------------> (0, 50)
  58. *
  59. * nameDirection or tickDirection or labelDirection is 1 means tick
  60. * or label is below the standard axis, whereas is -1 means above
  61. * the standard axis. labelOffset means offset between label and axis,
  62. * which is useful when 'onZero', where axisLabel is in the grid and
  63. * label in outside grid.
  64. *
  65. * Tips: like always,
  66. * positive rotation represents anticlockwise, and negative rotation
  67. * represents clockwise.
  68. * The direction of position coordinate is the same as the direction
  69. * of screen coordinate.
  70. *
  71. * Do not need to consider axis 'inverse', which is auto processed by
  72. * axis extent.
  73. */
  74. var AxisBuilder = /** @class */function () {
  75. function AxisBuilder(axisModel, opt) {
  76. this.group = new graphic.Group();
  77. this.opt = opt;
  78. this.axisModel = axisModel;
  79. // Default value
  80. defaults(opt, {
  81. labelOffset: 0,
  82. nameDirection: 1,
  83. tickDirection: 1,
  84. labelDirection: 1,
  85. silent: true,
  86. handleAutoShown: function () {
  87. return true;
  88. }
  89. });
  90. // FIXME Not use a separate text group?
  91. var transformGroup = new graphic.Group({
  92. x: opt.position[0],
  93. y: opt.position[1],
  94. rotation: opt.rotation
  95. });
  96. // this.group.add(transformGroup);
  97. // this._transformGroup = transformGroup;
  98. transformGroup.updateTransform();
  99. this._transformGroup = transformGroup;
  100. }
  101. AxisBuilder.prototype.hasBuilder = function (name) {
  102. return !!builders[name];
  103. };
  104. AxisBuilder.prototype.add = function (name) {
  105. builders[name](this.opt, this.axisModel, this.group, this._transformGroup);
  106. };
  107. AxisBuilder.prototype.getGroup = function () {
  108. return this.group;
  109. };
  110. AxisBuilder.innerTextLayout = function (axisRotation, textRotation, direction) {
  111. var rotationDiff = remRadian(textRotation - axisRotation);
  112. var textAlign;
  113. var textVerticalAlign;
  114. if (isRadianAroundZero(rotationDiff)) {
  115. // Label is parallel with axis line.
  116. textVerticalAlign = direction > 0 ? 'top' : 'bottom';
  117. textAlign = 'center';
  118. } else if (isRadianAroundZero(rotationDiff - PI)) {
  119. // Label is inverse parallel with axis line.
  120. textVerticalAlign = direction > 0 ? 'bottom' : 'top';
  121. textAlign = 'center';
  122. } else {
  123. textVerticalAlign = 'middle';
  124. if (rotationDiff > 0 && rotationDiff < PI) {
  125. textAlign = direction > 0 ? 'right' : 'left';
  126. } else {
  127. textAlign = direction > 0 ? 'left' : 'right';
  128. }
  129. }
  130. return {
  131. rotation: rotationDiff,
  132. textAlign: textAlign,
  133. textVerticalAlign: textVerticalAlign
  134. };
  135. };
  136. AxisBuilder.makeAxisEventDataBase = function (axisModel) {
  137. var eventData = {
  138. componentType: axisModel.mainType,
  139. componentIndex: axisModel.componentIndex
  140. };
  141. eventData[axisModel.mainType + 'Index'] = axisModel.componentIndex;
  142. return eventData;
  143. };
  144. AxisBuilder.isLabelSilent = function (axisModel) {
  145. var tooltipOpt = axisModel.get('tooltip');
  146. return axisModel.get('silent')
  147. // Consider mouse cursor, add these restrictions.
  148. || !(axisModel.get('triggerEvent') || tooltipOpt && tooltipOpt.show);
  149. };
  150. return AxisBuilder;
  151. }();
  152. ;
  153. var builders = {
  154. axisLine: function (opt, axisModel, group, transformGroup) {
  155. var shown = axisModel.get(['axisLine', 'show']);
  156. if (shown === 'auto' && opt.handleAutoShown) {
  157. shown = opt.handleAutoShown('axisLine');
  158. }
  159. if (!shown) {
  160. return;
  161. }
  162. var extent = axisModel.axis.getExtent();
  163. var matrix = transformGroup.transform;
  164. var pt1 = [extent[0], 0];
  165. var pt2 = [extent[1], 0];
  166. var inverse = pt1[0] > pt2[0];
  167. if (matrix) {
  168. v2ApplyTransform(pt1, pt1, matrix);
  169. v2ApplyTransform(pt2, pt2, matrix);
  170. }
  171. var lineStyle = extend({
  172. lineCap: 'round'
  173. }, axisModel.getModel(['axisLine', 'lineStyle']).getLineStyle());
  174. var line = new graphic.Line({
  175. shape: {
  176. x1: pt1[0],
  177. y1: pt1[1],
  178. x2: pt2[0],
  179. y2: pt2[1]
  180. },
  181. style: lineStyle,
  182. strokeContainThreshold: opt.strokeContainThreshold || 5,
  183. silent: true,
  184. z2: 1
  185. });
  186. graphic.subPixelOptimizeLine(line.shape, line.style.lineWidth);
  187. line.anid = 'line';
  188. group.add(line);
  189. var arrows = axisModel.get(['axisLine', 'symbol']);
  190. if (arrows != null) {
  191. var arrowSize = axisModel.get(['axisLine', 'symbolSize']);
  192. if (isString(arrows)) {
  193. // Use the same arrow for start and end point
  194. arrows = [arrows, arrows];
  195. }
  196. if (isString(arrowSize) || isNumber(arrowSize)) {
  197. // Use the same size for width and height
  198. arrowSize = [arrowSize, arrowSize];
  199. }
  200. var arrowOffset = normalizeSymbolOffset(axisModel.get(['axisLine', 'symbolOffset']) || 0, arrowSize);
  201. var symbolWidth_1 = arrowSize[0];
  202. var symbolHeight_1 = arrowSize[1];
  203. each([{
  204. rotate: opt.rotation + Math.PI / 2,
  205. offset: arrowOffset[0],
  206. r: 0
  207. }, {
  208. rotate: opt.rotation - Math.PI / 2,
  209. offset: arrowOffset[1],
  210. r: Math.sqrt((pt1[0] - pt2[0]) * (pt1[0] - pt2[0]) + (pt1[1] - pt2[1]) * (pt1[1] - pt2[1]))
  211. }], function (point, index) {
  212. if (arrows[index] !== 'none' && arrows[index] != null) {
  213. var symbol = createSymbol(arrows[index], -symbolWidth_1 / 2, -symbolHeight_1 / 2, symbolWidth_1, symbolHeight_1, lineStyle.stroke, true);
  214. // Calculate arrow position with offset
  215. var r = point.r + point.offset;
  216. var pt = inverse ? pt2 : pt1;
  217. symbol.attr({
  218. rotation: point.rotate,
  219. x: pt[0] + r * Math.cos(opt.rotation),
  220. y: pt[1] - r * Math.sin(opt.rotation),
  221. silent: true,
  222. z2: 11
  223. });
  224. group.add(symbol);
  225. }
  226. });
  227. }
  228. },
  229. axisTickLabel: function (opt, axisModel, group, transformGroup) {
  230. var ticksEls = buildAxisMajorTicks(group, transformGroup, axisModel, opt);
  231. var labelEls = buildAxisLabel(group, transformGroup, axisModel, opt);
  232. fixMinMaxLabelShow(axisModel, labelEls, ticksEls);
  233. buildAxisMinorTicks(group, transformGroup, axisModel, opt.tickDirection);
  234. // This bit fixes the label overlap issue for the time chart.
  235. // See https://github.com/apache/echarts/issues/14266 for more.
  236. if (axisModel.get(['axisLabel', 'hideOverlap'])) {
  237. var labelList = prepareLayoutList(map(labelEls, function (label) {
  238. return {
  239. label: label,
  240. priority: label.z2,
  241. defaultAttr: {
  242. ignore: label.ignore
  243. }
  244. };
  245. }));
  246. hideOverlap(labelList);
  247. }
  248. },
  249. axisName: function (opt, axisModel, group, transformGroup) {
  250. var name = retrieve(opt.axisName, axisModel.get('name'));
  251. if (!name) {
  252. return;
  253. }
  254. var nameLocation = axisModel.get('nameLocation');
  255. var nameDirection = opt.nameDirection;
  256. var textStyleModel = axisModel.getModel('nameTextStyle');
  257. var gap = axisModel.get('nameGap') || 0;
  258. var extent = axisModel.axis.getExtent();
  259. var gapSignal = extent[0] > extent[1] ? -1 : 1;
  260. var pos = [nameLocation === 'start' ? extent[0] - gapSignal * gap : nameLocation === 'end' ? extent[1] + gapSignal * gap : (extent[0] + extent[1]) / 2,
  261. // Reuse labelOffset.
  262. isNameLocationCenter(nameLocation) ? opt.labelOffset + nameDirection * gap : 0];
  263. var labelLayout;
  264. var nameRotation = axisModel.get('nameRotate');
  265. if (nameRotation != null) {
  266. nameRotation = nameRotation * PI / 180; // To radian.
  267. }
  268. var axisNameAvailableWidth;
  269. if (isNameLocationCenter(nameLocation)) {
  270. labelLayout = AxisBuilder.innerTextLayout(opt.rotation, nameRotation != null ? nameRotation : opt.rotation,
  271. // Adapt to axis.
  272. nameDirection);
  273. } else {
  274. labelLayout = endTextLayout(opt.rotation, nameLocation, nameRotation || 0, extent);
  275. axisNameAvailableWidth = opt.axisNameAvailableWidth;
  276. if (axisNameAvailableWidth != null) {
  277. axisNameAvailableWidth = Math.abs(axisNameAvailableWidth / Math.sin(labelLayout.rotation));
  278. !isFinite(axisNameAvailableWidth) && (axisNameAvailableWidth = null);
  279. }
  280. }
  281. var textFont = textStyleModel.getFont();
  282. var truncateOpt = axisModel.get('nameTruncate', true) || {};
  283. var ellipsis = truncateOpt.ellipsis;
  284. var maxWidth = retrieve(opt.nameTruncateMaxWidth, truncateOpt.maxWidth, axisNameAvailableWidth);
  285. var textEl = new graphic.Text({
  286. x: pos[0],
  287. y: pos[1],
  288. rotation: labelLayout.rotation,
  289. silent: AxisBuilder.isLabelSilent(axisModel),
  290. style: createTextStyle(textStyleModel, {
  291. text: name,
  292. font: textFont,
  293. overflow: 'truncate',
  294. width: maxWidth,
  295. ellipsis: ellipsis,
  296. fill: textStyleModel.getTextColor() || axisModel.get(['axisLine', 'lineStyle', 'color']),
  297. align: textStyleModel.get('align') || labelLayout.textAlign,
  298. verticalAlign: textStyleModel.get('verticalAlign') || labelLayout.textVerticalAlign
  299. }),
  300. z2: 1
  301. });
  302. graphic.setTooltipConfig({
  303. el: textEl,
  304. componentModel: axisModel,
  305. itemName: name
  306. });
  307. textEl.__fullText = name;
  308. // Id for animation
  309. textEl.anid = 'name';
  310. if (axisModel.get('triggerEvent')) {
  311. var eventData = AxisBuilder.makeAxisEventDataBase(axisModel);
  312. eventData.targetType = 'axisName';
  313. eventData.name = name;
  314. getECData(textEl).eventData = eventData;
  315. }
  316. // FIXME
  317. transformGroup.add(textEl);
  318. textEl.updateTransform();
  319. group.add(textEl);
  320. textEl.decomposeTransform();
  321. }
  322. };
  323. function endTextLayout(rotation, textPosition, textRotate, extent) {
  324. var rotationDiff = remRadian(textRotate - rotation);
  325. var textAlign;
  326. var textVerticalAlign;
  327. var inverse = extent[0] > extent[1];
  328. var onLeft = textPosition === 'start' && !inverse || textPosition !== 'start' && inverse;
  329. if (isRadianAroundZero(rotationDiff - PI / 2)) {
  330. textVerticalAlign = onLeft ? 'bottom' : 'top';
  331. textAlign = 'center';
  332. } else if (isRadianAroundZero(rotationDiff - PI * 1.5)) {
  333. textVerticalAlign = onLeft ? 'top' : 'bottom';
  334. textAlign = 'center';
  335. } else {
  336. textVerticalAlign = 'middle';
  337. if (rotationDiff < PI * 1.5 && rotationDiff > PI / 2) {
  338. textAlign = onLeft ? 'left' : 'right';
  339. } else {
  340. textAlign = onLeft ? 'right' : 'left';
  341. }
  342. }
  343. return {
  344. rotation: rotationDiff,
  345. textAlign: textAlign,
  346. textVerticalAlign: textVerticalAlign
  347. };
  348. }
  349. function fixMinMaxLabelShow(axisModel, labelEls, tickEls) {
  350. if (shouldShowAllLabels(axisModel.axis)) {
  351. return;
  352. }
  353. // If min or max are user set, we need to check
  354. // If the tick on min(max) are overlap on their neighbour tick
  355. // If they are overlapped, we need to hide the min(max) tick label
  356. var showMinLabel = axisModel.get(['axisLabel', 'showMinLabel']);
  357. var showMaxLabel = axisModel.get(['axisLabel', 'showMaxLabel']);
  358. // FIXME
  359. // Have not consider onBand yet, where tick els is more than label els.
  360. labelEls = labelEls || [];
  361. tickEls = tickEls || [];
  362. var firstLabel = labelEls[0];
  363. var nextLabel = labelEls[1];
  364. var lastLabel = labelEls[labelEls.length - 1];
  365. var prevLabel = labelEls[labelEls.length - 2];
  366. var firstTick = tickEls[0];
  367. var nextTick = tickEls[1];
  368. var lastTick = tickEls[tickEls.length - 1];
  369. var prevTick = tickEls[tickEls.length - 2];
  370. if (showMinLabel === false) {
  371. ignoreEl(firstLabel);
  372. ignoreEl(firstTick);
  373. } else if (isTwoLabelOverlapped(firstLabel, nextLabel)) {
  374. if (showMinLabel) {
  375. ignoreEl(nextLabel);
  376. ignoreEl(nextTick);
  377. } else {
  378. ignoreEl(firstLabel);
  379. ignoreEl(firstTick);
  380. }
  381. }
  382. if (showMaxLabel === false) {
  383. ignoreEl(lastLabel);
  384. ignoreEl(lastTick);
  385. } else if (isTwoLabelOverlapped(prevLabel, lastLabel)) {
  386. if (showMaxLabel) {
  387. ignoreEl(prevLabel);
  388. ignoreEl(prevTick);
  389. } else {
  390. ignoreEl(lastLabel);
  391. ignoreEl(lastTick);
  392. }
  393. }
  394. }
  395. function ignoreEl(el) {
  396. el && (el.ignore = true);
  397. }
  398. function isTwoLabelOverlapped(current, next) {
  399. // current and next has the same rotation.
  400. var firstRect = current && current.getBoundingRect().clone();
  401. var nextRect = next && next.getBoundingRect().clone();
  402. if (!firstRect || !nextRect) {
  403. return;
  404. }
  405. // When checking intersect of two rotated labels, we use mRotationBack
  406. // to avoid that boundingRect is enlarge when using `boundingRect.applyTransform`.
  407. var mRotationBack = matrixUtil.identity([]);
  408. matrixUtil.rotate(mRotationBack, mRotationBack, -current.rotation);
  409. firstRect.applyTransform(matrixUtil.mul([], mRotationBack, current.getLocalTransform()));
  410. nextRect.applyTransform(matrixUtil.mul([], mRotationBack, next.getLocalTransform()));
  411. return firstRect.intersect(nextRect);
  412. }
  413. function isNameLocationCenter(nameLocation) {
  414. return nameLocation === 'middle' || nameLocation === 'center';
  415. }
  416. function createTicks(ticksCoords, tickTransform, tickEndCoord, tickLineStyle, anidPrefix) {
  417. var tickEls = [];
  418. var pt1 = [];
  419. var pt2 = [];
  420. for (var i = 0; i < ticksCoords.length; i++) {
  421. var tickCoord = ticksCoords[i].coord;
  422. pt1[0] = tickCoord;
  423. pt1[1] = 0;
  424. pt2[0] = tickCoord;
  425. pt2[1] = tickEndCoord;
  426. if (tickTransform) {
  427. v2ApplyTransform(pt1, pt1, tickTransform);
  428. v2ApplyTransform(pt2, pt2, tickTransform);
  429. }
  430. // Tick line, Not use group transform to have better line draw
  431. var tickEl = new graphic.Line({
  432. shape: {
  433. x1: pt1[0],
  434. y1: pt1[1],
  435. x2: pt2[0],
  436. y2: pt2[1]
  437. },
  438. style: tickLineStyle,
  439. z2: 2,
  440. autoBatch: true,
  441. silent: true
  442. });
  443. graphic.subPixelOptimizeLine(tickEl.shape, tickEl.style.lineWidth);
  444. tickEl.anid = anidPrefix + '_' + ticksCoords[i].tickValue;
  445. tickEls.push(tickEl);
  446. }
  447. return tickEls;
  448. }
  449. function buildAxisMajorTicks(group, transformGroup, axisModel, opt) {
  450. var axis = axisModel.axis;
  451. var tickModel = axisModel.getModel('axisTick');
  452. var shown = tickModel.get('show');
  453. if (shown === 'auto' && opt.handleAutoShown) {
  454. shown = opt.handleAutoShown('axisTick');
  455. }
  456. if (!shown || axis.scale.isBlank()) {
  457. return;
  458. }
  459. var lineStyleModel = tickModel.getModel('lineStyle');
  460. var tickEndCoord = opt.tickDirection * tickModel.get('length');
  461. var ticksCoords = axis.getTicksCoords();
  462. var ticksEls = createTicks(ticksCoords, transformGroup.transform, tickEndCoord, defaults(lineStyleModel.getLineStyle(), {
  463. stroke: axisModel.get(['axisLine', 'lineStyle', 'color'])
  464. }), 'ticks');
  465. for (var i = 0; i < ticksEls.length; i++) {
  466. group.add(ticksEls[i]);
  467. }
  468. return ticksEls;
  469. }
  470. function buildAxisMinorTicks(group, transformGroup, axisModel, tickDirection) {
  471. var axis = axisModel.axis;
  472. var minorTickModel = axisModel.getModel('minorTick');
  473. if (!minorTickModel.get('show') || axis.scale.isBlank()) {
  474. return;
  475. }
  476. var minorTicksCoords = axis.getMinorTicksCoords();
  477. if (!minorTicksCoords.length) {
  478. return;
  479. }
  480. var lineStyleModel = minorTickModel.getModel('lineStyle');
  481. var tickEndCoord = tickDirection * minorTickModel.get('length');
  482. var minorTickLineStyle = defaults(lineStyleModel.getLineStyle(), defaults(axisModel.getModel('axisTick').getLineStyle(), {
  483. stroke: axisModel.get(['axisLine', 'lineStyle', 'color'])
  484. }));
  485. for (var i = 0; i < minorTicksCoords.length; i++) {
  486. var minorTicksEls = createTicks(minorTicksCoords[i], transformGroup.transform, tickEndCoord, minorTickLineStyle, 'minorticks_' + i);
  487. for (var k = 0; k < minorTicksEls.length; k++) {
  488. group.add(minorTicksEls[k]);
  489. }
  490. }
  491. }
  492. function buildAxisLabel(group, transformGroup, axisModel, opt) {
  493. var axis = axisModel.axis;
  494. var show = retrieve(opt.axisLabelShow, axisModel.get(['axisLabel', 'show']));
  495. if (!show || axis.scale.isBlank()) {
  496. return;
  497. }
  498. var labelModel = axisModel.getModel('axisLabel');
  499. var labelMargin = labelModel.get('margin');
  500. var labels = axis.getViewLabels();
  501. // Special label rotate.
  502. var labelRotation = (retrieve(opt.labelRotate, labelModel.get('rotate')) || 0) * PI / 180;
  503. var labelLayout = AxisBuilder.innerTextLayout(opt.rotation, labelRotation, opt.labelDirection);
  504. var rawCategoryData = axisModel.getCategories && axisModel.getCategories(true);
  505. var labelEls = [];
  506. var silent = AxisBuilder.isLabelSilent(axisModel);
  507. var triggerEvent = axisModel.get('triggerEvent');
  508. each(labels, function (labelItem, index) {
  509. var tickValue = axis.scale.type === 'ordinal' ? axis.scale.getRawOrdinalNumber(labelItem.tickValue) : labelItem.tickValue;
  510. var formattedLabel = labelItem.formattedLabel;
  511. var rawLabel = labelItem.rawLabel;
  512. var itemLabelModel = labelModel;
  513. if (rawCategoryData && rawCategoryData[tickValue]) {
  514. var rawCategoryItem = rawCategoryData[tickValue];
  515. if (isObject(rawCategoryItem) && rawCategoryItem.textStyle) {
  516. itemLabelModel = new Model(rawCategoryItem.textStyle, labelModel, axisModel.ecModel);
  517. }
  518. }
  519. var textColor = itemLabelModel.getTextColor() || axisModel.get(['axisLine', 'lineStyle', 'color']);
  520. var tickCoord = axis.dataToCoord(tickValue);
  521. var align = itemLabelModel.getShallow('align', true) || labelLayout.textAlign;
  522. var alignMin = retrieve2(itemLabelModel.getShallow('alignMinLabel', true), align);
  523. var alignMax = retrieve2(itemLabelModel.getShallow('alignMaxLabel', true), align);
  524. var verticalAlign = itemLabelModel.getShallow('verticalAlign', true) || itemLabelModel.getShallow('baseline', true) || labelLayout.textVerticalAlign;
  525. var verticalAlignMin = retrieve2(itemLabelModel.getShallow('verticalAlignMinLabel', true), verticalAlign);
  526. var verticalAlignMax = retrieve2(itemLabelModel.getShallow('verticalAlignMaxLabel', true), verticalAlign);
  527. var textEl = new graphic.Text({
  528. x: tickCoord,
  529. y: opt.labelOffset + opt.labelDirection * labelMargin,
  530. rotation: labelLayout.rotation,
  531. silent: silent,
  532. z2: 10 + (labelItem.level || 0),
  533. style: createTextStyle(itemLabelModel, {
  534. text: formattedLabel,
  535. align: index === 0 ? alignMin : index === labels.length - 1 ? alignMax : align,
  536. verticalAlign: index === 0 ? verticalAlignMin : index === labels.length - 1 ? verticalAlignMax : verticalAlign,
  537. fill: isFunction(textColor) ? textColor(
  538. // (1) In category axis with data zoom, tick is not the original
  539. // index of axis.data. So tick should not be exposed to user
  540. // in category axis.
  541. // (2) Compatible with previous version, which always use formatted label as
  542. // input. But in interval scale the formatted label is like '223,445', which
  543. // maked user replace ','. So we modify it to return original val but remain
  544. // it as 'string' to avoid error in replacing.
  545. axis.type === 'category' ? rawLabel : axis.type === 'value' ? tickValue + '' : tickValue, index) : textColor
  546. })
  547. });
  548. textEl.anid = 'label_' + tickValue;
  549. // Pack data for mouse event
  550. if (triggerEvent) {
  551. var eventData = AxisBuilder.makeAxisEventDataBase(axisModel);
  552. eventData.targetType = 'axisLabel';
  553. eventData.value = rawLabel;
  554. eventData.tickIndex = index;
  555. if (axis.type === 'category') {
  556. eventData.dataIndex = tickValue;
  557. }
  558. getECData(textEl).eventData = eventData;
  559. }
  560. // FIXME
  561. transformGroup.add(textEl);
  562. textEl.updateTransform();
  563. labelEls.push(textEl);
  564. group.add(textEl);
  565. textEl.decomposeTransform();
  566. });
  567. return labelEls;
  568. }
  569. export default AxisBuilder;