ThemeRiverView.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  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 { ECPolygon } from '../line/poly.js';
  42. import * as graphic from '../../util/graphic.js';
  43. import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states.js';
  44. import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle.js';
  45. import { bind } from 'zrender/lib/core/util.js';
  46. import DataDiffer from '../../data/DataDiffer.js';
  47. import ChartView from '../../view/Chart.js';
  48. import { saveOldStyle } from '../../animation/basicTransition.js';
  49. var ThemeRiverView =
  50. /** @class */
  51. function (_super) {
  52. __extends(ThemeRiverView, _super);
  53. function ThemeRiverView() {
  54. var _this = _super !== null && _super.apply(this, arguments) || this;
  55. _this.type = ThemeRiverView.type;
  56. _this._layers = [];
  57. return _this;
  58. }
  59. ThemeRiverView.prototype.render = function (seriesModel, ecModel, api) {
  60. var data = seriesModel.getData();
  61. var self = this;
  62. var group = this.group;
  63. var layersSeries = seriesModel.getLayerSeries();
  64. var layoutInfo = data.getLayout('layoutInfo');
  65. var rect = layoutInfo.rect;
  66. var boundaryGap = layoutInfo.boundaryGap;
  67. group.x = 0;
  68. group.y = rect.y + boundaryGap[0];
  69. function keyGetter(item) {
  70. return item.name;
  71. }
  72. var dataDiffer = new DataDiffer(this._layersSeries || [], layersSeries, keyGetter, keyGetter);
  73. var newLayersGroups = [];
  74. dataDiffer.add(bind(process, this, 'add')).update(bind(process, this, 'update')).remove(bind(process, this, 'remove')).execute();
  75. function process(status, idx, oldIdx) {
  76. var oldLayersGroups = self._layers;
  77. if (status === 'remove') {
  78. group.remove(oldLayersGroups[idx]);
  79. return;
  80. }
  81. var points0 = [];
  82. var points1 = [];
  83. var style;
  84. var indices = layersSeries[idx].indices;
  85. var j = 0;
  86. for (; j < indices.length; j++) {
  87. var layout = data.getItemLayout(indices[j]);
  88. var x = layout.x;
  89. var y0 = layout.y0;
  90. var y = layout.y;
  91. points0.push(x, y0);
  92. points1.push(x, y0 + y);
  93. style = data.getItemVisual(indices[j], 'style');
  94. }
  95. var polygon;
  96. var textLayout = data.getItemLayout(indices[0]);
  97. var labelModel = seriesModel.getModel('label');
  98. var margin = labelModel.get('margin');
  99. var emphasisModel = seriesModel.getModel('emphasis');
  100. if (status === 'add') {
  101. var layerGroup = newLayersGroups[idx] = new graphic.Group();
  102. polygon = new ECPolygon({
  103. shape: {
  104. points: points0,
  105. stackedOnPoints: points1,
  106. smooth: 0.4,
  107. stackedOnSmooth: 0.4,
  108. smoothConstraint: false
  109. },
  110. z2: 0
  111. });
  112. layerGroup.add(polygon);
  113. group.add(layerGroup);
  114. if (seriesModel.isAnimationEnabled()) {
  115. polygon.setClipPath(createGridClipShape(polygon.getBoundingRect(), seriesModel, function () {
  116. polygon.removeClipPath();
  117. }));
  118. }
  119. } else {
  120. var layerGroup = oldLayersGroups[oldIdx];
  121. polygon = layerGroup.childAt(0);
  122. group.add(layerGroup);
  123. newLayersGroups[idx] = layerGroup;
  124. graphic.updateProps(polygon, {
  125. shape: {
  126. points: points0,
  127. stackedOnPoints: points1
  128. }
  129. }, seriesModel);
  130. saveOldStyle(polygon);
  131. }
  132. setLabelStyle(polygon, getLabelStatesModels(seriesModel), {
  133. labelDataIndex: indices[j - 1],
  134. defaultText: data.getName(indices[j - 1]),
  135. inheritColor: style.fill
  136. }, {
  137. normal: {
  138. verticalAlign: 'middle' // align: 'right'
  139. }
  140. });
  141. polygon.setTextConfig({
  142. position: null,
  143. local: true
  144. });
  145. var labelEl = polygon.getTextContent(); // TODO More label position options.
  146. if (labelEl) {
  147. labelEl.x = textLayout.x - margin;
  148. labelEl.y = textLayout.y0 + textLayout.y / 2;
  149. }
  150. polygon.useStyle(style);
  151. data.setItemGraphicEl(idx, polygon);
  152. setStatesStylesFromModel(polygon, seriesModel);
  153. toggleHoverEmphasis(polygon, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
  154. }
  155. this._layersSeries = layersSeries;
  156. this._layers = newLayersGroups;
  157. };
  158. ThemeRiverView.type = 'themeRiver';
  159. return ThemeRiverView;
  160. }(ChartView);
  161. ; // add animation to the view
  162. function createGridClipShape(rect, seriesModel, cb) {
  163. var rectEl = new graphic.Rect({
  164. shape: {
  165. x: rect.x - 10,
  166. y: rect.y - 10,
  167. width: 0,
  168. height: rect.height + 20
  169. }
  170. });
  171. graphic.initProps(rectEl, {
  172. shape: {
  173. x: rect.x - 50,
  174. width: rect.width + 100,
  175. height: rect.height + 20
  176. }
  177. }, seriesModel, cb);
  178. return rectEl;
  179. }
  180. export default ThemeRiverView;