PieView.js 10 KB

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