BarView.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. var _config = require("../../config");
  2. var __DEV__ = _config.__DEV__;
  3. var echarts = require("../../echarts");
  4. var zrUtil = require("zrender/lib/core/util");
  5. var graphic = require("../../util/graphic");
  6. var _helper = require("./helper");
  7. var setLabel = _helper.setLabel;
  8. var Model = require("../../model/Model");
  9. var barItemStyle = require("./barItemStyle");
  10. var BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'normal', 'barBorderWidth']; // FIXME
  11. // Just for compatible with ec2.
  12. zrUtil.extend(Model.prototype, barItemStyle);
  13. var _default = echarts.extendChartView({
  14. type: 'bar',
  15. render: function (seriesModel, ecModel, api) {
  16. var coordinateSystemType = seriesModel.get('coordinateSystem');
  17. if (coordinateSystemType === 'cartesian2d' || coordinateSystemType === 'polar') {
  18. this._render(seriesModel, ecModel, api);
  19. } else {}
  20. return this.group;
  21. },
  22. dispose: zrUtil.noop,
  23. _render: function (seriesModel, ecModel, api) {
  24. var group = this.group;
  25. var data = seriesModel.getData();
  26. var oldData = this._data;
  27. var coord = seriesModel.coordinateSystem;
  28. var baseAxis = coord.getBaseAxis();
  29. var isHorizontalOrRadial;
  30. if (coord.type === 'cartesian2d') {
  31. isHorizontalOrRadial = baseAxis.isHorizontal();
  32. } else if (coord.type === 'polar') {
  33. isHorizontalOrRadial = baseAxis.dim === 'angle';
  34. }
  35. var animationModel = seriesModel.isAnimationEnabled() ? seriesModel : null;
  36. data.diff(oldData).add(function (dataIndex) {
  37. if (!data.hasValue(dataIndex)) {
  38. return;
  39. }
  40. var itemModel = data.getItemModel(dataIndex);
  41. var layout = getLayout[coord.type](data, dataIndex, itemModel);
  42. var el = elementCreator[coord.type](data, dataIndex, itemModel, layout, isHorizontalOrRadial, animationModel);
  43. data.setItemGraphicEl(dataIndex, el);
  44. group.add(el);
  45. updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, coord.type === 'polar');
  46. }).update(function (newIndex, oldIndex) {
  47. var el = oldData.getItemGraphicEl(oldIndex);
  48. if (!data.hasValue(newIndex)) {
  49. group.remove(el);
  50. return;
  51. }
  52. var itemModel = data.getItemModel(newIndex);
  53. var layout = getLayout[coord.type](data, newIndex, itemModel);
  54. if (el) {
  55. graphic.updateProps(el, {
  56. shape: layout
  57. }, animationModel, newIndex);
  58. } else {
  59. el = elementCreator[coord.type](data, newIndex, itemModel, layout, isHorizontalOrRadial, animationModel, true);
  60. }
  61. data.setItemGraphicEl(newIndex, el); // Add back
  62. group.add(el);
  63. updateStyle(el, data, newIndex, itemModel, layout, seriesModel, isHorizontalOrRadial, coord.type === 'polar');
  64. }).remove(function (dataIndex) {
  65. var el = oldData.getItemGraphicEl(dataIndex);
  66. if (coord.type === 'cartesian2d') {
  67. el && removeRect(dataIndex, animationModel, el);
  68. } else {
  69. el && removeSector(dataIndex, animationModel, el);
  70. }
  71. }).execute();
  72. this._data = data;
  73. },
  74. remove: function (ecModel, api) {
  75. var group = this.group;
  76. var data = this._data;
  77. if (ecModel.get('animation')) {
  78. if (data) {
  79. data.eachItemGraphicEl(function (el) {
  80. if (el.type === 'sector') {
  81. removeSector(el.dataIndex, ecModel, el);
  82. } else {
  83. removeRect(el.dataIndex, ecModel, el);
  84. }
  85. });
  86. }
  87. } else {
  88. group.removeAll();
  89. }
  90. }
  91. });
  92. var elementCreator = {
  93. cartesian2d: function (data, dataIndex, itemModel, layout, isHorizontal, animationModel, isUpdate) {
  94. var rect = new graphic.Rect({
  95. shape: zrUtil.extend({}, layout)
  96. }); // Animation
  97. if (animationModel) {
  98. var rectShape = rect.shape;
  99. var animateProperty = isHorizontal ? 'height' : 'width';
  100. var animateTarget = {};
  101. rectShape[animateProperty] = 0;
  102. animateTarget[animateProperty] = layout[animateProperty];
  103. graphic[isUpdate ? 'updateProps' : 'initProps'](rect, {
  104. shape: animateTarget
  105. }, animationModel, dataIndex);
  106. }
  107. return rect;
  108. },
  109. polar: function (data, dataIndex, itemModel, layout, isRadial, animationModel, isUpdate) {
  110. var sector = new graphic.Sector({
  111. shape: zrUtil.extend({}, layout)
  112. }); // Animation
  113. if (animationModel) {
  114. var sectorShape = sector.shape;
  115. var animateProperty = isRadial ? 'r' : 'endAngle';
  116. var animateTarget = {};
  117. sectorShape[animateProperty] = isRadial ? 0 : layout.startAngle;
  118. animateTarget[animateProperty] = layout[animateProperty];
  119. graphic[isUpdate ? 'updateProps' : 'initProps'](sector, {
  120. shape: animateTarget
  121. }, animationModel, dataIndex);
  122. }
  123. return sector;
  124. }
  125. };
  126. function removeRect(dataIndex, animationModel, el) {
  127. // Not show text when animating
  128. el.style.text = null;
  129. graphic.updateProps(el, {
  130. shape: {
  131. width: 0
  132. }
  133. }, animationModel, dataIndex, function () {
  134. el.parent && el.parent.remove(el);
  135. });
  136. }
  137. function removeSector(dataIndex, animationModel, el) {
  138. // Not show text when animating
  139. el.style.text = null;
  140. graphic.updateProps(el, {
  141. shape: {
  142. r: el.shape.r0
  143. }
  144. }, animationModel, dataIndex, function () {
  145. el.parent && el.parent.remove(el);
  146. });
  147. }
  148. var getLayout = {
  149. cartesian2d: function (data, dataIndex, itemModel) {
  150. var layout = data.getItemLayout(dataIndex);
  151. var fixedLineWidth = getLineWidth(itemModel, layout); // fix layout with lineWidth
  152. var signX = layout.width > 0 ? 1 : -1;
  153. var signY = layout.height > 0 ? 1 : -1;
  154. return {
  155. x: layout.x + signX * fixedLineWidth / 2,
  156. y: layout.y + signY * fixedLineWidth / 2,
  157. width: layout.width - signX * fixedLineWidth,
  158. height: layout.height - signY * fixedLineWidth
  159. };
  160. },
  161. polar: function (data, dataIndex, itemModel) {
  162. var layout = data.getItemLayout(dataIndex);
  163. return {
  164. cx: layout.cx,
  165. cy: layout.cy,
  166. r0: layout.r0,
  167. r: layout.r,
  168. startAngle: layout.startAngle,
  169. endAngle: layout.endAngle
  170. };
  171. }
  172. };
  173. function updateStyle(el, data, dataIndex, itemModel, layout, seriesModel, isHorizontal, isPolar) {
  174. var color = data.getItemVisual(dataIndex, 'color');
  175. var opacity = data.getItemVisual(dataIndex, 'opacity');
  176. var itemStyleModel = itemModel.getModel('itemStyle.normal');
  177. var hoverStyle = itemModel.getModel('itemStyle.emphasis').getBarItemStyle();
  178. if (!isPolar) {
  179. el.setShape('r', itemStyleModel.get('barBorderRadius') || 0);
  180. }
  181. el.useStyle(zrUtil.defaults({
  182. fill: color,
  183. opacity: opacity
  184. }, itemStyleModel.getBarItemStyle()));
  185. var cursorStyle = itemModel.getShallow('cursor');
  186. cursorStyle && el.attr('cursor', cursorStyle);
  187. var labelPositionOutside = isHorizontal ? layout.height > 0 ? 'bottom' : 'top' : layout.width > 0 ? 'left' : 'right';
  188. if (!isPolar) {
  189. setLabel(el.style, hoverStyle, itemModel, color, seriesModel, dataIndex, labelPositionOutside);
  190. }
  191. graphic.setHoverStyle(el, hoverStyle);
  192. } // In case width or height are too small.
  193. function getLineWidth(itemModel, rawLayout) {
  194. var lineWidth = itemModel.get(BAR_BORDER_WIDTH_QUERY) || 0;
  195. return Math.min(lineWidth, Math.abs(rawLayout.width), Math.abs(rawLayout.height));
  196. }
  197. module.exports = _default;