PieView.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  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 { __assign, __extends } from "tslib";
  41. import { extend, retrieve3 } from 'zrender/lib/core/util';
  42. import * as graphic from '../../util/graphic';
  43. import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states';
  44. import ChartView from '../../view/Chart';
  45. import labelLayout from './labelLayout';
  46. import { setLabelLineStyle, getLabelLineStatesModels } from '../../label/labelGuideHelper';
  47. import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
  48. import { getSectorCornerRadius } from '../helper/pieHelper';
  49. import { saveOldStyle } from '../../animation/basicTrasition';
  50. import { getBasicPieLayout } from './pieLayout';
  51. /**
  52. * Piece of pie including Sector, Label, LabelLine
  53. */
  54. var PiePiece =
  55. /** @class */
  56. function (_super) {
  57. __extends(PiePiece, _super);
  58. function PiePiece(data, idx, startAngle) {
  59. var _this = _super.call(this) || this;
  60. _this.z2 = 2;
  61. var text = new graphic.Text();
  62. _this.setTextContent(text);
  63. _this.updateData(data, idx, startAngle, true);
  64. return _this;
  65. }
  66. PiePiece.prototype.updateData = function (data, idx, startAngle, firstCreate) {
  67. var sector = this;
  68. var seriesModel = data.hostModel;
  69. var itemModel = data.getItemModel(idx);
  70. var emphasisModel = itemModel.getModel('emphasis');
  71. var layout = data.getItemLayout(idx); // cornerRadius & innerCornerRadius doesn't exist in the item layout. Use `0` if null value is specified.
  72. // see `setItemLayout` in `pieLayout.ts`.
  73. var sectorShape = extend(getSectorCornerRadius(itemModel.getModel('itemStyle'), layout, true), layout); // Ignore NaN data.
  74. if (isNaN(sectorShape.startAngle)) {
  75. // Use NaN shape to avoid drawing shape.
  76. sector.setShape(sectorShape);
  77. return;
  78. }
  79. if (firstCreate) {
  80. sector.setShape(sectorShape);
  81. var animationType = seriesModel.getShallow('animationType');
  82. if (animationType === 'scale') {
  83. sector.shape.r = layout.r0;
  84. graphic.initProps(sector, {
  85. shape: {
  86. r: layout.r
  87. }
  88. }, seriesModel, idx);
  89. } // Expansion
  90. else {
  91. if (startAngle != null) {
  92. sector.setShape({
  93. startAngle: startAngle,
  94. endAngle: startAngle
  95. });
  96. graphic.initProps(sector, {
  97. shape: {
  98. startAngle: layout.startAngle,
  99. endAngle: layout.endAngle
  100. }
  101. }, seriesModel, idx);
  102. } else {
  103. sector.shape.endAngle = layout.startAngle;
  104. graphic.updateProps(sector, {
  105. shape: {
  106. endAngle: layout.endAngle
  107. }
  108. }, seriesModel, idx);
  109. }
  110. }
  111. } else {
  112. saveOldStyle(sector); // Transition animation from the old shape
  113. graphic.updateProps(sector, {
  114. shape: sectorShape
  115. }, seriesModel, idx);
  116. }
  117. sector.useStyle(data.getItemVisual(idx, 'style'));
  118. setStatesStylesFromModel(sector, itemModel);
  119. var midAngle = (layout.startAngle + layout.endAngle) / 2;
  120. var offset = seriesModel.get('selectedOffset');
  121. var dx = Math.cos(midAngle) * offset;
  122. var dy = Math.sin(midAngle) * offset;
  123. var cursorStyle = itemModel.getShallow('cursor');
  124. cursorStyle && sector.attr('cursor', cursorStyle);
  125. this._updateLabel(seriesModel, data, idx);
  126. sector.ensureState('emphasis').shape = __assign({
  127. r: layout.r + (emphasisModel.get('scale') ? emphasisModel.get('scaleSize') || 0 : 0)
  128. }, getSectorCornerRadius(emphasisModel.getModel('itemStyle'), layout));
  129. extend(sector.ensureState('select'), {
  130. x: dx,
  131. y: dy,
  132. shape: getSectorCornerRadius(itemModel.getModel(['select', 'itemStyle']), layout)
  133. });
  134. extend(sector.ensureState('blur'), {
  135. shape: getSectorCornerRadius(itemModel.getModel(['blur', 'itemStyle']), layout)
  136. });
  137. var labelLine = sector.getTextGuideLine();
  138. var labelText = sector.getTextContent();
  139. labelLine && extend(labelLine.ensureState('select'), {
  140. x: dx,
  141. y: dy
  142. }); // TODO: needs dx, dy in zrender?
  143. extend(labelText.ensureState('select'), {
  144. x: dx,
  145. y: dy
  146. });
  147. enableHoverEmphasis(this, emphasisModel.get('focus'), emphasisModel.get('blurScope'));
  148. };
  149. PiePiece.prototype._updateLabel = function (seriesModel, data, idx) {
  150. var sector = this;
  151. var itemModel = data.getItemModel(idx);
  152. var labelLineModel = itemModel.getModel('labelLine');
  153. var style = data.getItemVisual(idx, 'style');
  154. var visualColor = style && style.fill;
  155. var visualOpacity = style && style.opacity;
  156. setLabelStyle(sector, getLabelStatesModels(itemModel), {
  157. labelFetcher: data.hostModel,
  158. labelDataIndex: idx,
  159. inheritColor: visualColor,
  160. defaultOpacity: visualOpacity,
  161. defaultText: seriesModel.getFormattedLabel(idx, 'normal') || data.getName(idx)
  162. });
  163. var labelText = sector.getTextContent(); // Set textConfig on sector.
  164. sector.setTextConfig({
  165. // reset position, rotation
  166. position: null,
  167. rotation: null
  168. }); // Make sure update style on labelText after setLabelStyle.
  169. // Because setLabelStyle will replace a new style on it.
  170. labelText.attr({
  171. z2: 10
  172. });
  173. var labelPosition = seriesModel.get(['label', 'position']);
  174. if (labelPosition !== 'outside' && labelPosition !== 'outer') {
  175. sector.removeTextGuideLine();
  176. } else {
  177. var polyline = this.getTextGuideLine();
  178. if (!polyline) {
  179. polyline = new graphic.Polyline();
  180. this.setTextGuideLine(polyline);
  181. } // Default use item visual color
  182. setLabelLineStyle(this, getLabelLineStatesModels(itemModel), {
  183. stroke: visualColor,
  184. opacity: retrieve3(labelLineModel.get(['lineStyle', 'opacity']), visualOpacity, 1)
  185. });
  186. }
  187. };
  188. return PiePiece;
  189. }(graphic.Sector); // Pie view
  190. var PieView =
  191. /** @class */
  192. function (_super) {
  193. __extends(PieView, _super);
  194. function PieView() {
  195. var _this = _super !== null && _super.apply(this, arguments) || this;
  196. _this.ignoreLabelLineUpdate = true;
  197. return _this;
  198. }
  199. PieView.prototype.init = function () {
  200. var sectorGroup = new graphic.Group();
  201. this._sectorGroup = sectorGroup;
  202. };
  203. PieView.prototype.render = function (seriesModel, ecModel, api, payload) {
  204. var data = seriesModel.getData();
  205. var oldData = this._data;
  206. var group = this.group;
  207. var startAngle; // First render
  208. if (!oldData && data.count() > 0) {
  209. var shape = data.getItemLayout(0);
  210. for (var s = 1; isNaN(shape && shape.startAngle) && s < data.count(); ++s) {
  211. shape = data.getItemLayout(s);
  212. }
  213. if (shape) {
  214. startAngle = shape.startAngle;
  215. }
  216. } // remove empty-circle if it exists
  217. if (this._emptyCircleSector) {
  218. group.remove(this._emptyCircleSector);
  219. } // when all data are filtered, show lightgray empty circle
  220. if (data.count() === 0 && seriesModel.get('showEmptyCircle')) {
  221. var sector = new graphic.Sector({
  222. shape: getBasicPieLayout(seriesModel, api)
  223. });
  224. sector.useStyle(seriesModel.getModel('emptyCircleStyle').getItemStyle());
  225. this._emptyCircleSector = sector;
  226. group.add(sector);
  227. }
  228. data.diff(oldData).add(function (idx) {
  229. var piePiece = new PiePiece(data, idx, startAngle);
  230. data.setItemGraphicEl(idx, piePiece);
  231. group.add(piePiece);
  232. }).update(function (newIdx, oldIdx) {
  233. var piePiece = oldData.getItemGraphicEl(oldIdx);
  234. piePiece.updateData(data, newIdx, startAngle);
  235. piePiece.off('click');
  236. group.add(piePiece);
  237. data.setItemGraphicEl(newIdx, piePiece);
  238. }).remove(function (idx) {
  239. var piePiece = oldData.getItemGraphicEl(idx);
  240. graphic.removeElementWithFadeOut(piePiece, seriesModel, idx);
  241. }).execute();
  242. labelLayout(seriesModel); // Always use initial animation.
  243. if (seriesModel.get('animationTypeUpdate') !== 'expansion') {
  244. this._data = data;
  245. }
  246. };
  247. PieView.prototype.dispose = function () {};
  248. PieView.prototype.containPoint = function (point, seriesModel) {
  249. var data = seriesModel.getData();
  250. var itemLayout = data.getItemLayout(0);
  251. if (itemLayout) {
  252. var dx = point[0] - itemLayout.cx;
  253. var dy = point[1] - itemLayout.cy;
  254. var radius = Math.sqrt(dx * dx + dy * dy);
  255. return radius <= itemLayout.r && radius >= itemLayout.r0;
  256. }
  257. };
  258. PieView.type = 'pie';
  259. return PieView;
  260. }(ChartView);
  261. export default PieView;