PieView.js 10 KB

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