PictorialBarView.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677
  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 echarts = require("../../echarts");
  20. var zrUtil = require("zrender/lib/core/util");
  21. var graphic = require("../../util/graphic");
  22. var _symbol = require("../../util/symbol");
  23. var createSymbol = _symbol.createSymbol;
  24. var _number = require("../../util/number");
  25. var parsePercent = _number.parsePercent;
  26. var isNumeric = _number.isNumeric;
  27. var _helper = require("./helper");
  28. var setLabel = _helper.setLabel;
  29. /*
  30. * Licensed to the Apache Software Foundation (ASF) under one
  31. * or more contributor license agreements. See the NOTICE file
  32. * distributed with this work for additional information
  33. * regarding copyright ownership. The ASF licenses this file
  34. * to you under the Apache License, Version 2.0 (the
  35. * "License"); you may not use this file except in compliance
  36. * with the License. You may obtain a copy of the License at
  37. *
  38. * http://www.apache.org/licenses/LICENSE-2.0
  39. *
  40. * Unless required by applicable law or agreed to in writing,
  41. * software distributed under the License is distributed on an
  42. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  43. * KIND, either express or implied. See the License for the
  44. * specific language governing permissions and limitations
  45. * under the License.
  46. */
  47. var BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth']; // index: +isHorizontal
  48. var LAYOUT_ATTRS = [{
  49. xy: 'x',
  50. wh: 'width',
  51. index: 0,
  52. posDesc: ['left', 'right']
  53. }, {
  54. xy: 'y',
  55. wh: 'height',
  56. index: 1,
  57. posDesc: ['top', 'bottom']
  58. }];
  59. var pathForLineWidth = new graphic.Circle();
  60. var BarView = echarts.extendChartView({
  61. type: 'pictorialBar',
  62. render: function (seriesModel, ecModel, api) {
  63. var group = this.group;
  64. var data = seriesModel.getData();
  65. var oldData = this._data;
  66. var cartesian = seriesModel.coordinateSystem;
  67. var baseAxis = cartesian.getBaseAxis();
  68. var isHorizontal = !!baseAxis.isHorizontal();
  69. var coordSysRect = cartesian.grid.getRect();
  70. var opt = {
  71. ecSize: {
  72. width: api.getWidth(),
  73. height: api.getHeight()
  74. },
  75. seriesModel: seriesModel,
  76. coordSys: cartesian,
  77. coordSysExtent: [[coordSysRect.x, coordSysRect.x + coordSysRect.width], [coordSysRect.y, coordSysRect.y + coordSysRect.height]],
  78. isHorizontal: isHorizontal,
  79. valueDim: LAYOUT_ATTRS[+isHorizontal],
  80. categoryDim: LAYOUT_ATTRS[1 - isHorizontal]
  81. };
  82. data.diff(oldData).add(function (dataIndex) {
  83. if (!data.hasValue(dataIndex)) {
  84. return;
  85. }
  86. var itemModel = getItemModel(data, dataIndex);
  87. var symbolMeta = getSymbolMeta(data, dataIndex, itemModel, opt);
  88. var bar = createBar(data, opt, symbolMeta);
  89. data.setItemGraphicEl(dataIndex, bar);
  90. group.add(bar);
  91. updateCommon(bar, opt, symbolMeta);
  92. }).update(function (newIndex, oldIndex) {
  93. var bar = oldData.getItemGraphicEl(oldIndex);
  94. if (!data.hasValue(newIndex)) {
  95. group.remove(bar);
  96. return;
  97. }
  98. var itemModel = getItemModel(data, newIndex);
  99. var symbolMeta = getSymbolMeta(data, newIndex, itemModel, opt);
  100. var pictorialShapeStr = getShapeStr(data, symbolMeta);
  101. if (bar && pictorialShapeStr !== bar.__pictorialShapeStr) {
  102. group.remove(bar);
  103. data.setItemGraphicEl(newIndex, null);
  104. bar = null;
  105. }
  106. if (bar) {
  107. updateBar(bar, opt, symbolMeta);
  108. } else {
  109. bar = createBar(data, opt, symbolMeta, true);
  110. }
  111. data.setItemGraphicEl(newIndex, bar);
  112. bar.__pictorialSymbolMeta = symbolMeta; // Add back
  113. group.add(bar);
  114. updateCommon(bar, opt, symbolMeta);
  115. }).remove(function (dataIndex) {
  116. var bar = oldData.getItemGraphicEl(dataIndex);
  117. bar && removeBar(oldData, dataIndex, bar.__pictorialSymbolMeta.animationModel, bar);
  118. }).execute();
  119. this._data = data;
  120. return this.group;
  121. },
  122. dispose: zrUtil.noop,
  123. remove: function (ecModel, api) {
  124. var group = this.group;
  125. var data = this._data;
  126. if (ecModel.get('animation')) {
  127. if (data) {
  128. data.eachItemGraphicEl(function (bar) {
  129. removeBar(data, bar.dataIndex, ecModel, bar);
  130. });
  131. }
  132. } else {
  133. group.removeAll();
  134. }
  135. }
  136. }); // Set or calculate default value about symbol, and calculate layout info.
  137. function getSymbolMeta(data, dataIndex, itemModel, opt) {
  138. var layout = data.getItemLayout(dataIndex);
  139. var symbolRepeat = itemModel.get('symbolRepeat');
  140. var symbolClip = itemModel.get('symbolClip');
  141. var symbolPosition = itemModel.get('symbolPosition') || 'start';
  142. var symbolRotate = itemModel.get('symbolRotate');
  143. var rotation = (symbolRotate || 0) * Math.PI / 180 || 0;
  144. var symbolPatternSize = itemModel.get('symbolPatternSize') || 2;
  145. var isAnimationEnabled = itemModel.isAnimationEnabled();
  146. var symbolMeta = {
  147. dataIndex: dataIndex,
  148. layout: layout,
  149. itemModel: itemModel,
  150. symbolType: data.getItemVisual(dataIndex, 'symbol') || 'circle',
  151. color: data.getItemVisual(dataIndex, 'color'),
  152. symbolClip: symbolClip,
  153. symbolRepeat: symbolRepeat,
  154. symbolRepeatDirection: itemModel.get('symbolRepeatDirection'),
  155. symbolPatternSize: symbolPatternSize,
  156. rotation: rotation,
  157. animationModel: isAnimationEnabled ? itemModel : null,
  158. hoverAnimation: isAnimationEnabled && itemModel.get('hoverAnimation'),
  159. z2: itemModel.getShallow('z', true) || 0
  160. };
  161. prepareBarLength(itemModel, symbolRepeat, layout, opt, symbolMeta);
  162. prepareSymbolSize(data, dataIndex, layout, symbolRepeat, symbolClip, symbolMeta.boundingLength, symbolMeta.pxSign, symbolPatternSize, opt, symbolMeta);
  163. prepareLineWidth(itemModel, symbolMeta.symbolScale, rotation, opt, symbolMeta);
  164. var symbolSize = symbolMeta.symbolSize;
  165. var symbolOffset = itemModel.get('symbolOffset');
  166. if (zrUtil.isArray(symbolOffset)) {
  167. symbolOffset = [parsePercent(symbolOffset[0], symbolSize[0]), parsePercent(symbolOffset[1], symbolSize[1])];
  168. }
  169. prepareLayoutInfo(itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset, symbolPosition, symbolMeta.valueLineWidth, symbolMeta.boundingLength, symbolMeta.repeatCutLength, opt, symbolMeta);
  170. return symbolMeta;
  171. } // bar length can be negative.
  172. function prepareBarLength(itemModel, symbolRepeat, layout, opt, output) {
  173. var valueDim = opt.valueDim;
  174. var symbolBoundingData = itemModel.get('symbolBoundingData');
  175. var valueAxis = opt.coordSys.getOtherAxis(opt.coordSys.getBaseAxis());
  176. var zeroPx = valueAxis.toGlobalCoord(valueAxis.dataToCoord(0));
  177. var pxSignIdx = 1 - +(layout[valueDim.wh] <= 0);
  178. var boundingLength;
  179. if (zrUtil.isArray(symbolBoundingData)) {
  180. var symbolBoundingExtent = [convertToCoordOnAxis(valueAxis, symbolBoundingData[0]) - zeroPx, convertToCoordOnAxis(valueAxis, symbolBoundingData[1]) - zeroPx];
  181. symbolBoundingExtent[1] < symbolBoundingExtent[0] && symbolBoundingExtent.reverse();
  182. boundingLength = symbolBoundingExtent[pxSignIdx];
  183. } else if (symbolBoundingData != null) {
  184. boundingLength = convertToCoordOnAxis(valueAxis, symbolBoundingData) - zeroPx;
  185. } else if (symbolRepeat) {
  186. boundingLength = opt.coordSysExtent[valueDim.index][pxSignIdx] - zeroPx;
  187. } else {
  188. boundingLength = layout[valueDim.wh];
  189. }
  190. output.boundingLength = boundingLength;
  191. if (symbolRepeat) {
  192. output.repeatCutLength = layout[valueDim.wh];
  193. }
  194. output.pxSign = boundingLength > 0 ? 1 : boundingLength < 0 ? -1 : 0;
  195. }
  196. function convertToCoordOnAxis(axis, value) {
  197. return axis.toGlobalCoord(axis.dataToCoord(axis.scale.parse(value)));
  198. } // Support ['100%', '100%']
  199. function prepareSymbolSize(data, dataIndex, layout, symbolRepeat, symbolClip, boundingLength, pxSign, symbolPatternSize, opt, output) {
  200. var valueDim = opt.valueDim;
  201. var categoryDim = opt.categoryDim;
  202. var categorySize = Math.abs(layout[categoryDim.wh]);
  203. var symbolSize = data.getItemVisual(dataIndex, 'symbolSize');
  204. if (zrUtil.isArray(symbolSize)) {
  205. symbolSize = symbolSize.slice();
  206. } else {
  207. if (symbolSize == null) {
  208. symbolSize = '100%';
  209. }
  210. symbolSize = [symbolSize, symbolSize];
  211. } // Note: percentage symbolSize (like '100%') do not consider lineWidth, because it is
  212. // to complicated to calculate real percent value if considering scaled lineWidth.
  213. // So the actual size will bigger than layout size if lineWidth is bigger than zero,
  214. // which can be tolerated in pictorial chart.
  215. symbolSize[categoryDim.index] = parsePercent(symbolSize[categoryDim.index], categorySize);
  216. symbolSize[valueDim.index] = parsePercent(symbolSize[valueDim.index], symbolRepeat ? categorySize : Math.abs(boundingLength));
  217. output.symbolSize = symbolSize; // If x or y is less than zero, show reversed shape.
  218. var symbolScale = output.symbolScale = [symbolSize[0] / symbolPatternSize, symbolSize[1] / symbolPatternSize]; // Follow convention, 'right' and 'top' is the normal scale.
  219. symbolScale[valueDim.index] *= (opt.isHorizontal ? -1 : 1) * pxSign;
  220. }
  221. function prepareLineWidth(itemModel, symbolScale, rotation, opt, output) {
  222. // In symbols are drawn with scale, so do not need to care about the case that width
  223. // or height are too small. But symbol use strokeNoScale, where acture lineWidth should
  224. // be calculated.
  225. var valueLineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0;
  226. if (valueLineWidth) {
  227. pathForLineWidth.attr({
  228. scale: symbolScale.slice(),
  229. rotation: rotation
  230. });
  231. pathForLineWidth.updateTransform();
  232. valueLineWidth /= pathForLineWidth.getLineScale();
  233. valueLineWidth *= symbolScale[opt.valueDim.index];
  234. }
  235. output.valueLineWidth = valueLineWidth;
  236. }
  237. function prepareLayoutInfo(itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset, symbolPosition, valueLineWidth, boundingLength, repeatCutLength, opt, output) {
  238. var categoryDim = opt.categoryDim;
  239. var valueDim = opt.valueDim;
  240. var pxSign = output.pxSign;
  241. var unitLength = Math.max(symbolSize[valueDim.index] + valueLineWidth, 0);
  242. var pathLen = unitLength; // Note: rotation will not effect the layout of symbols, because user may
  243. // want symbols to rotate on its center, which should not be translated
  244. // when rotating.
  245. if (symbolRepeat) {
  246. var absBoundingLength = Math.abs(boundingLength);
  247. var symbolMargin = zrUtil.retrieve(itemModel.get('symbolMargin'), '15%') + '';
  248. var hasEndGap = false;
  249. if (symbolMargin.lastIndexOf('!') === symbolMargin.length - 1) {
  250. hasEndGap = true;
  251. symbolMargin = symbolMargin.slice(0, symbolMargin.length - 1);
  252. }
  253. symbolMargin = parsePercent(symbolMargin, symbolSize[valueDim.index]);
  254. var uLenWithMargin = Math.max(unitLength + symbolMargin * 2, 0); // When symbol margin is less than 0, margin at both ends will be subtracted
  255. // to ensure that all of the symbols will not be overflow the given area.
  256. var endFix = hasEndGap ? 0 : symbolMargin * 2; // Both final repeatTimes and final symbolMargin area calculated based on
  257. // boundingLength.
  258. var repeatSpecified = isNumeric(symbolRepeat);
  259. var repeatTimes = repeatSpecified ? symbolRepeat : toIntTimes((absBoundingLength + endFix) / uLenWithMargin); // Adjust calculate margin, to ensure each symbol is displayed
  260. // entirely in the given layout area.
  261. var mDiff = absBoundingLength - repeatTimes * unitLength;
  262. symbolMargin = mDiff / 2 / (hasEndGap ? repeatTimes : repeatTimes - 1);
  263. uLenWithMargin = unitLength + symbolMargin * 2;
  264. endFix = hasEndGap ? 0 : symbolMargin * 2; // Update repeatTimes when not all symbol will be shown.
  265. if (!repeatSpecified && symbolRepeat !== 'fixed') {
  266. repeatTimes = repeatCutLength ? toIntTimes((Math.abs(repeatCutLength) + endFix) / uLenWithMargin) : 0;
  267. }
  268. pathLen = repeatTimes * uLenWithMargin - endFix;
  269. output.repeatTimes = repeatTimes;
  270. output.symbolMargin = symbolMargin;
  271. }
  272. var sizeFix = pxSign * (pathLen / 2);
  273. var pathPosition = output.pathPosition = [];
  274. pathPosition[categoryDim.index] = layout[categoryDim.wh] / 2;
  275. pathPosition[valueDim.index] = symbolPosition === 'start' ? sizeFix : symbolPosition === 'end' ? boundingLength - sizeFix : boundingLength / 2; // 'center'
  276. if (symbolOffset) {
  277. pathPosition[0] += symbolOffset[0];
  278. pathPosition[1] += symbolOffset[1];
  279. }
  280. var bundlePosition = output.bundlePosition = [];
  281. bundlePosition[categoryDim.index] = layout[categoryDim.xy];
  282. bundlePosition[valueDim.index] = layout[valueDim.xy];
  283. var barRectShape = output.barRectShape = zrUtil.extend({}, layout);
  284. barRectShape[valueDim.wh] = pxSign * Math.max(Math.abs(layout[valueDim.wh]), Math.abs(pathPosition[valueDim.index] + sizeFix));
  285. barRectShape[categoryDim.wh] = layout[categoryDim.wh];
  286. var clipShape = output.clipShape = {}; // Consider that symbol may be overflow layout rect.
  287. clipShape[categoryDim.xy] = -layout[categoryDim.xy];
  288. clipShape[categoryDim.wh] = opt.ecSize[categoryDim.wh];
  289. clipShape[valueDim.xy] = 0;
  290. clipShape[valueDim.wh] = layout[valueDim.wh];
  291. }
  292. function createPath(symbolMeta) {
  293. var symbolPatternSize = symbolMeta.symbolPatternSize;
  294. var path = createSymbol( // Consider texture img, make a big size.
  295. symbolMeta.symbolType, -symbolPatternSize / 2, -symbolPatternSize / 2, symbolPatternSize, symbolPatternSize, symbolMeta.color);
  296. path.attr({
  297. culling: true
  298. });
  299. path.type !== 'image' && path.setStyle({
  300. strokeNoScale: true
  301. });
  302. return path;
  303. }
  304. function createOrUpdateRepeatSymbols(bar, opt, symbolMeta, isUpdate) {
  305. var bundle = bar.__pictorialBundle;
  306. var symbolSize = symbolMeta.symbolSize;
  307. var valueLineWidth = symbolMeta.valueLineWidth;
  308. var pathPosition = symbolMeta.pathPosition;
  309. var valueDim = opt.valueDim;
  310. var repeatTimes = symbolMeta.repeatTimes || 0;
  311. var index = 0;
  312. var unit = symbolSize[opt.valueDim.index] + valueLineWidth + symbolMeta.symbolMargin * 2;
  313. eachPath(bar, function (path) {
  314. path.__pictorialAnimationIndex = index;
  315. path.__pictorialRepeatTimes = repeatTimes;
  316. if (index < repeatTimes) {
  317. updateAttr(path, null, makeTarget(index), symbolMeta, isUpdate);
  318. } else {
  319. updateAttr(path, null, {
  320. scale: [0, 0]
  321. }, symbolMeta, isUpdate, function () {
  322. bundle.remove(path);
  323. });
  324. }
  325. updateHoverAnimation(path, symbolMeta);
  326. index++;
  327. });
  328. for (; index < repeatTimes; index++) {
  329. var path = createPath(symbolMeta);
  330. path.__pictorialAnimationIndex = index;
  331. path.__pictorialRepeatTimes = repeatTimes;
  332. bundle.add(path);
  333. var target = makeTarget(index);
  334. updateAttr(path, {
  335. position: target.position,
  336. scale: [0, 0]
  337. }, {
  338. scale: target.scale,
  339. rotation: target.rotation
  340. }, symbolMeta, isUpdate); // FIXME
  341. // If all emphasis/normal through action.
  342. path.on('mouseover', onMouseOver).on('mouseout', onMouseOut);
  343. updateHoverAnimation(path, symbolMeta);
  344. }
  345. function makeTarget(index) {
  346. var position = pathPosition.slice(); // (start && pxSign > 0) || (end && pxSign < 0): i = repeatTimes - index
  347. // Otherwise: i = index;
  348. var pxSign = symbolMeta.pxSign;
  349. var i = index;
  350. if (symbolMeta.symbolRepeatDirection === 'start' ? pxSign > 0 : pxSign < 0) {
  351. i = repeatTimes - 1 - index;
  352. }
  353. position[valueDim.index] = unit * (i - repeatTimes / 2 + 0.5) + pathPosition[valueDim.index];
  354. return {
  355. position: position,
  356. scale: symbolMeta.symbolScale.slice(),
  357. rotation: symbolMeta.rotation
  358. };
  359. }
  360. function onMouseOver() {
  361. eachPath(bar, function (path) {
  362. path.trigger('emphasis');
  363. });
  364. }
  365. function onMouseOut() {
  366. eachPath(bar, function (path) {
  367. path.trigger('normal');
  368. });
  369. }
  370. }
  371. function createOrUpdateSingleSymbol(bar, opt, symbolMeta, isUpdate) {
  372. var bundle = bar.__pictorialBundle;
  373. var mainPath = bar.__pictorialMainPath;
  374. if (!mainPath) {
  375. mainPath = bar.__pictorialMainPath = createPath(symbolMeta);
  376. bundle.add(mainPath);
  377. updateAttr(mainPath, {
  378. position: symbolMeta.pathPosition.slice(),
  379. scale: [0, 0],
  380. rotation: symbolMeta.rotation
  381. }, {
  382. scale: symbolMeta.symbolScale.slice()
  383. }, symbolMeta, isUpdate);
  384. mainPath.on('mouseover', onMouseOver).on('mouseout', onMouseOut);
  385. } else {
  386. updateAttr(mainPath, null, {
  387. position: symbolMeta.pathPosition.slice(),
  388. scale: symbolMeta.symbolScale.slice(),
  389. rotation: symbolMeta.rotation
  390. }, symbolMeta, isUpdate);
  391. }
  392. updateHoverAnimation(mainPath, symbolMeta);
  393. function onMouseOver() {
  394. this.trigger('emphasis');
  395. }
  396. function onMouseOut() {
  397. this.trigger('normal');
  398. }
  399. } // bar rect is used for label.
  400. function createOrUpdateBarRect(bar, symbolMeta, isUpdate) {
  401. var rectShape = zrUtil.extend({}, symbolMeta.barRectShape);
  402. var barRect = bar.__pictorialBarRect;
  403. if (!barRect) {
  404. barRect = bar.__pictorialBarRect = new graphic.Rect({
  405. z2: 2,
  406. shape: rectShape,
  407. silent: true,
  408. style: {
  409. stroke: 'transparent',
  410. fill: 'transparent',
  411. lineWidth: 0
  412. }
  413. });
  414. bar.add(barRect);
  415. } else {
  416. updateAttr(barRect, null, {
  417. shape: rectShape
  418. }, symbolMeta, isUpdate);
  419. }
  420. }
  421. function createOrUpdateClip(bar, opt, symbolMeta, isUpdate) {
  422. // If not clip, symbol will be remove and rebuilt.
  423. if (symbolMeta.symbolClip) {
  424. var clipPath = bar.__pictorialClipPath;
  425. var clipShape = zrUtil.extend({}, symbolMeta.clipShape);
  426. var valueDim = opt.valueDim;
  427. var animationModel = symbolMeta.animationModel;
  428. var dataIndex = symbolMeta.dataIndex;
  429. if (clipPath) {
  430. graphic.updateProps(clipPath, {
  431. shape: clipShape
  432. }, animationModel, dataIndex);
  433. } else {
  434. clipShape[valueDim.wh] = 0;
  435. clipPath = new graphic.Rect({
  436. shape: clipShape
  437. });
  438. bar.__pictorialBundle.setClipPath(clipPath);
  439. bar.__pictorialClipPath = clipPath;
  440. var target = {};
  441. target[valueDim.wh] = symbolMeta.clipShape[valueDim.wh];
  442. graphic[isUpdate ? 'updateProps' : 'initProps'](clipPath, {
  443. shape: target
  444. }, animationModel, dataIndex);
  445. }
  446. }
  447. }
  448. function getItemModel(data, dataIndex) {
  449. var itemModel = data.getItemModel(dataIndex);
  450. itemModel.getAnimationDelayParams = getAnimationDelayParams;
  451. itemModel.isAnimationEnabled = isAnimationEnabled;
  452. return itemModel;
  453. }
  454. function getAnimationDelayParams(path) {
  455. // The order is the same as the z-order, see `symbolRepeatDiretion`.
  456. return {
  457. index: path.__pictorialAnimationIndex,
  458. count: path.__pictorialRepeatTimes
  459. };
  460. }
  461. function isAnimationEnabled() {
  462. // `animation` prop can be set on itemModel in pictorial bar chart.
  463. return this.parentModel.isAnimationEnabled() && !!this.getShallow('animation');
  464. }
  465. function updateHoverAnimation(path, symbolMeta) {
  466. path.off('emphasis').off('normal');
  467. var scale = symbolMeta.symbolScale.slice();
  468. symbolMeta.hoverAnimation && path.on('emphasis', function () {
  469. this.animateTo({
  470. scale: [scale[0] * 1.1, scale[1] * 1.1]
  471. }, 400, 'elasticOut');
  472. }).on('normal', function () {
  473. this.animateTo({
  474. scale: scale.slice()
  475. }, 400, 'elasticOut');
  476. });
  477. }
  478. function createBar(data, opt, symbolMeta, isUpdate) {
  479. // bar is the main element for each data.
  480. var bar = new graphic.Group(); // bundle is used for location and clip.
  481. var bundle = new graphic.Group();
  482. bar.add(bundle);
  483. bar.__pictorialBundle = bundle;
  484. bundle.attr('position', symbolMeta.bundlePosition.slice());
  485. if (symbolMeta.symbolRepeat) {
  486. createOrUpdateRepeatSymbols(bar, opt, symbolMeta);
  487. } else {
  488. createOrUpdateSingleSymbol(bar, opt, symbolMeta);
  489. }
  490. createOrUpdateBarRect(bar, symbolMeta, isUpdate);
  491. createOrUpdateClip(bar, opt, symbolMeta, isUpdate);
  492. bar.__pictorialShapeStr = getShapeStr(data, symbolMeta);
  493. bar.__pictorialSymbolMeta = symbolMeta;
  494. return bar;
  495. }
  496. function updateBar(bar, opt, symbolMeta) {
  497. var animationModel = symbolMeta.animationModel;
  498. var dataIndex = symbolMeta.dataIndex;
  499. var bundle = bar.__pictorialBundle;
  500. graphic.updateProps(bundle, {
  501. position: symbolMeta.bundlePosition.slice()
  502. }, animationModel, dataIndex);
  503. if (symbolMeta.symbolRepeat) {
  504. createOrUpdateRepeatSymbols(bar, opt, symbolMeta, true);
  505. } else {
  506. createOrUpdateSingleSymbol(bar, opt, symbolMeta, true);
  507. }
  508. createOrUpdateBarRect(bar, symbolMeta, true);
  509. createOrUpdateClip(bar, opt, symbolMeta, true);
  510. }
  511. function removeBar(data, dataIndex, animationModel, bar) {
  512. // Not show text when animating
  513. var labelRect = bar.__pictorialBarRect;
  514. labelRect && (labelRect.style.text = null);
  515. var pathes = [];
  516. eachPath(bar, function (path) {
  517. pathes.push(path);
  518. });
  519. bar.__pictorialMainPath && pathes.push(bar.__pictorialMainPath); // I do not find proper remove animation for clip yet.
  520. bar.__pictorialClipPath && (animationModel = null);
  521. zrUtil.each(pathes, function (path) {
  522. graphic.updateProps(path, {
  523. scale: [0, 0]
  524. }, animationModel, dataIndex, function () {
  525. bar.parent && bar.parent.remove(bar);
  526. });
  527. });
  528. data.setItemGraphicEl(dataIndex, null);
  529. }
  530. function getShapeStr(data, symbolMeta) {
  531. return [data.getItemVisual(symbolMeta.dataIndex, 'symbol') || 'none', !!symbolMeta.symbolRepeat, !!symbolMeta.symbolClip].join(':');
  532. }
  533. function eachPath(bar, cb, context) {
  534. // Do not use Group#eachChild, because it do not support remove.
  535. zrUtil.each(bar.__pictorialBundle.children(), function (el) {
  536. el !== bar.__pictorialBarRect && cb.call(context, el);
  537. });
  538. }
  539. function updateAttr(el, immediateAttrs, animationAttrs, symbolMeta, isUpdate, cb) {
  540. immediateAttrs && el.attr(immediateAttrs); // when symbolCip used, only clip path has init animation, otherwise it would be weird effect.
  541. if (symbolMeta.symbolClip && !isUpdate) {
  542. animationAttrs && el.attr(animationAttrs);
  543. } else {
  544. animationAttrs && graphic[isUpdate ? 'updateProps' : 'initProps'](el, animationAttrs, symbolMeta.animationModel, symbolMeta.dataIndex, cb);
  545. }
  546. }
  547. function updateCommon(bar, opt, symbolMeta) {
  548. var color = symbolMeta.color;
  549. var dataIndex = symbolMeta.dataIndex;
  550. var itemModel = symbolMeta.itemModel; // Color must be excluded.
  551. // Because symbol provide setColor individually to set fill and stroke
  552. var normalStyle = itemModel.getModel('itemStyle').getItemStyle(['color']);
  553. var hoverStyle = itemModel.getModel('emphasis.itemStyle').getItemStyle();
  554. var cursorStyle = itemModel.getShallow('cursor');
  555. eachPath(bar, function (path) {
  556. // PENDING setColor should be before setStyle!!!
  557. path.setColor(color);
  558. path.setStyle(zrUtil.defaults({
  559. fill: color,
  560. opacity: symbolMeta.opacity
  561. }, normalStyle));
  562. graphic.setHoverStyle(path, hoverStyle);
  563. cursorStyle && (path.cursor = cursorStyle);
  564. path.z2 = symbolMeta.z2;
  565. });
  566. var barRectHoverStyle = {};
  567. var barPositionOutside = opt.valueDim.posDesc[+(symbolMeta.boundingLength > 0)];
  568. var barRect = bar.__pictorialBarRect;
  569. setLabel(barRect.style, barRectHoverStyle, itemModel, color, opt.seriesModel, dataIndex, barPositionOutside);
  570. graphic.setHoverStyle(barRect, barRectHoverStyle);
  571. }
  572. function toIntTimes(times) {
  573. var roundedTimes = Math.round(times); // Escapse accurate error
  574. return Math.abs(times - roundedTimes) < 1e-4 ? roundedTimes : Math.ceil(times);
  575. }
  576. var _default = BarView;
  577. module.exports = _default;