PieView.js 10 KB

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