MarkAreaView.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
  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. var zrUtil = require("zrender/lib/core/util");
  20. var colorUtil = require("zrender/lib/tool/color");
  21. var List = require("../../data/List");
  22. var numberUtil = require("../../util/number");
  23. var graphic = require("../../util/graphic");
  24. var markerHelper = require("./markerHelper");
  25. var MarkerView = require("./MarkerView");
  26. /*
  27. * Licensed to the Apache Software Foundation (ASF) under one
  28. * or more contributor license agreements. See the NOTICE file
  29. * distributed with this work for additional information
  30. * regarding copyright ownership. The ASF licenses this file
  31. * to you under the Apache License, Version 2.0 (the
  32. * "License"); you may not use this file except in compliance
  33. * with the License. You may obtain a copy of the License at
  34. *
  35. * http://www.apache.org/licenses/LICENSE-2.0
  36. *
  37. * Unless required by applicable law or agreed to in writing,
  38. * software distributed under the License is distributed on an
  39. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  40. * KIND, either express or implied. See the License for the
  41. * specific language governing permissions and limitations
  42. * under the License.
  43. */
  44. // TODO Better on polar
  45. var markAreaTransform = function (seriesModel, coordSys, maModel, item) {
  46. var lt = markerHelper.dataTransform(seriesModel, item[0]);
  47. var rb = markerHelper.dataTransform(seriesModel, item[1]);
  48. var retrieve = zrUtil.retrieve; // FIXME make sure lt is less than rb
  49. var ltCoord = lt.coord;
  50. var rbCoord = rb.coord;
  51. ltCoord[0] = retrieve(ltCoord[0], -Infinity);
  52. ltCoord[1] = retrieve(ltCoord[1], -Infinity);
  53. rbCoord[0] = retrieve(rbCoord[0], Infinity);
  54. rbCoord[1] = retrieve(rbCoord[1], Infinity); // Merge option into one
  55. var result = zrUtil.mergeAll([{}, lt, rb]);
  56. result.coord = [lt.coord, rb.coord];
  57. result.x0 = lt.x;
  58. result.y0 = lt.y;
  59. result.x1 = rb.x;
  60. result.y1 = rb.y;
  61. return result;
  62. };
  63. function isInifinity(val) {
  64. return !isNaN(val) && !isFinite(val);
  65. } // If a markArea has one dim
  66. function ifMarkLineHasOnlyDim(dimIndex, fromCoord, toCoord, coordSys) {
  67. var otherDimIndex = 1 - dimIndex;
  68. return isInifinity(fromCoord[otherDimIndex]) && isInifinity(toCoord[otherDimIndex]);
  69. }
  70. function markAreaFilter(coordSys, item) {
  71. var fromCoord = item.coord[0];
  72. var toCoord = item.coord[1];
  73. if (coordSys.type === 'cartesian2d') {
  74. // In case
  75. // {
  76. // markArea: {
  77. // data: [{ yAxis: 2 }]
  78. // }
  79. // }
  80. if (fromCoord && toCoord && (ifMarkLineHasOnlyDim(1, fromCoord, toCoord, coordSys) || ifMarkLineHasOnlyDim(0, fromCoord, toCoord, coordSys))) {
  81. return true;
  82. }
  83. }
  84. return markerHelper.dataFilter(coordSys, {
  85. coord: fromCoord,
  86. x: item.x0,
  87. y: item.y0
  88. }) || markerHelper.dataFilter(coordSys, {
  89. coord: toCoord,
  90. x: item.x1,
  91. y: item.y1
  92. });
  93. } // dims can be ['x0', 'y0'], ['x1', 'y1'], ['x0', 'y1'], ['x1', 'y0']
  94. function getSingleMarkerEndPoint(data, idx, dims, seriesModel, api) {
  95. var coordSys = seriesModel.coordinateSystem;
  96. var itemModel = data.getItemModel(idx);
  97. var point;
  98. var xPx = numberUtil.parsePercent(itemModel.get(dims[0]), api.getWidth());
  99. var yPx = numberUtil.parsePercent(itemModel.get(dims[1]), api.getHeight());
  100. if (!isNaN(xPx) && !isNaN(yPx)) {
  101. point = [xPx, yPx];
  102. } else {
  103. // Chart like bar may have there own marker positioning logic
  104. if (seriesModel.getMarkerPosition) {
  105. // Use the getMarkerPoisition
  106. point = seriesModel.getMarkerPosition(data.getValues(dims, idx));
  107. } else {
  108. var x = data.get(dims[0], idx);
  109. var y = data.get(dims[1], idx);
  110. var pt = [x, y];
  111. coordSys.clampData && coordSys.clampData(pt, pt);
  112. point = coordSys.dataToPoint(pt, true);
  113. }
  114. if (coordSys.type === 'cartesian2d') {
  115. var xAxis = coordSys.getAxis('x');
  116. var yAxis = coordSys.getAxis('y');
  117. var x = data.get(dims[0], idx);
  118. var y = data.get(dims[1], idx);
  119. if (isInifinity(x)) {
  120. point[0] = xAxis.toGlobalCoord(xAxis.getExtent()[dims[0] === 'x0' ? 0 : 1]);
  121. } else if (isInifinity(y)) {
  122. point[1] = yAxis.toGlobalCoord(yAxis.getExtent()[dims[1] === 'y0' ? 0 : 1]);
  123. }
  124. } // Use x, y if has any
  125. if (!isNaN(xPx)) {
  126. point[0] = xPx;
  127. }
  128. if (!isNaN(yPx)) {
  129. point[1] = yPx;
  130. }
  131. }
  132. return point;
  133. }
  134. var dimPermutations = [['x0', 'y0'], ['x1', 'y0'], ['x1', 'y1'], ['x0', 'y1']];
  135. MarkerView.extend({
  136. type: 'markArea',
  137. // updateLayout: function (markAreaModel, ecModel, api) {
  138. // ecModel.eachSeries(function (seriesModel) {
  139. // var maModel = seriesModel.markAreaModel;
  140. // if (maModel) {
  141. // var areaData = maModel.getData();
  142. // areaData.each(function (idx) {
  143. // var points = zrUtil.map(dimPermutations, function (dim) {
  144. // return getSingleMarkerEndPoint(areaData, idx, dim, seriesModel, api);
  145. // });
  146. // // Layout
  147. // areaData.setItemLayout(idx, points);
  148. // var el = areaData.getItemGraphicEl(idx);
  149. // el.setShape('points', points);
  150. // });
  151. // }
  152. // }, this);
  153. // },
  154. updateTransform: function (markAreaModel, ecModel, api) {
  155. ecModel.eachSeries(function (seriesModel) {
  156. var maModel = seriesModel.markAreaModel;
  157. if (maModel) {
  158. var areaData = maModel.getData();
  159. areaData.each(function (idx) {
  160. var points = zrUtil.map(dimPermutations, function (dim) {
  161. return getSingleMarkerEndPoint(areaData, idx, dim, seriesModel, api);
  162. }); // Layout
  163. areaData.setItemLayout(idx, points);
  164. var el = areaData.getItemGraphicEl(idx);
  165. el.setShape('points', points);
  166. });
  167. }
  168. }, this);
  169. },
  170. renderSeries: function (seriesModel, maModel, ecModel, api) {
  171. var coordSys = seriesModel.coordinateSystem;
  172. var seriesId = seriesModel.id;
  173. var seriesData = seriesModel.getData();
  174. var areaGroupMap = this.markerGroupMap;
  175. var polygonGroup = areaGroupMap.get(seriesId) || areaGroupMap.set(seriesId, {
  176. group: new graphic.Group()
  177. });
  178. this.group.add(polygonGroup.group);
  179. polygonGroup.__keep = true;
  180. var areaData = createList(coordSys, seriesModel, maModel); // Line data for tooltip and formatter
  181. maModel.setData(areaData); // Update visual and layout of line
  182. areaData.each(function (idx) {
  183. // Layout
  184. var points = zrUtil.map(dimPermutations, function (dim) {
  185. return getSingleMarkerEndPoint(areaData, idx, dim, seriesModel, api);
  186. }); // If none of the area is inside coordSys, allClipped is set to be true
  187. // in layout so that label will not be displayed. See #12591
  188. var allClipped = true;
  189. zrUtil.each(dimPermutations, function (dim) {
  190. if (!allClipped) {
  191. return;
  192. }
  193. var xValue = areaData.get(dim[0], idx);
  194. var yValue = areaData.get(dim[1], idx); // If is infinity, the axis should be considered not clipped
  195. if ((isInifinity(xValue) || coordSys.getAxis('x').containData(xValue)) && (isInifinity(yValue) || coordSys.getAxis('y').containData(yValue))) {
  196. allClipped = false;
  197. }
  198. });
  199. areaData.setItemLayout(idx, {
  200. points: points,
  201. allClipped: allClipped
  202. }); // Visual
  203. areaData.setItemVisual(idx, {
  204. color: seriesData.getVisual('color')
  205. });
  206. });
  207. areaData.diff(polygonGroup.__data).add(function (idx) {
  208. var layout = areaData.getItemLayout(idx);
  209. if (!layout.allClipped) {
  210. var polygon = new graphic.Polygon({
  211. shape: {
  212. points: layout.points
  213. }
  214. });
  215. areaData.setItemGraphicEl(idx, polygon);
  216. polygonGroup.group.add(polygon);
  217. }
  218. }).update(function (newIdx, oldIdx) {
  219. var polygon = polygonGroup.__data.getItemGraphicEl(oldIdx);
  220. var layout = areaData.getItemLayout(newIdx);
  221. if (!layout.allClipped) {
  222. if (polygon) {
  223. graphic.updateProps(polygon, {
  224. shape: {
  225. points: layout.points
  226. }
  227. }, maModel, newIdx);
  228. } else {
  229. polygon = new graphic.Polygon({
  230. shape: {
  231. points: layout.points
  232. }
  233. });
  234. }
  235. areaData.setItemGraphicEl(newIdx, polygon);
  236. polygonGroup.group.add(polygon);
  237. } else if (polygon) {
  238. polygonGroup.group.remove(polygon);
  239. }
  240. }).remove(function (idx) {
  241. var polygon = polygonGroup.__data.getItemGraphicEl(idx);
  242. polygonGroup.group.remove(polygon);
  243. }).execute();
  244. areaData.eachItemGraphicEl(function (polygon, idx) {
  245. var itemModel = areaData.getItemModel(idx);
  246. var labelModel = itemModel.getModel('label');
  247. var labelHoverModel = itemModel.getModel('emphasis.label');
  248. var color = areaData.getItemVisual(idx, 'color');
  249. polygon.useStyle(zrUtil.defaults(itemModel.getModel('itemStyle').getItemStyle(), {
  250. fill: colorUtil.modifyAlpha(color, 0.4),
  251. stroke: color
  252. }));
  253. polygon.hoverStyle = itemModel.getModel('emphasis.itemStyle').getItemStyle();
  254. graphic.setLabelStyle(polygon.style, polygon.hoverStyle, labelModel, labelHoverModel, {
  255. labelFetcher: maModel,
  256. labelDataIndex: idx,
  257. defaultText: areaData.getName(idx) || '',
  258. isRectText: true,
  259. autoColor: color
  260. });
  261. graphic.setHoverStyle(polygon, {});
  262. polygon.dataModel = maModel;
  263. });
  264. polygonGroup.__data = areaData;
  265. polygonGroup.group.silent = maModel.get('silent') || seriesModel.get('silent');
  266. }
  267. });
  268. /**
  269. * @inner
  270. * @param {module:echarts/coord/*} coordSys
  271. * @param {module:echarts/model/Series} seriesModel
  272. * @param {module:echarts/model/Model} mpModel
  273. */
  274. function createList(coordSys, seriesModel, maModel) {
  275. var coordDimsInfos;
  276. var areaData;
  277. var dims = ['x0', 'y0', 'x1', 'y1'];
  278. if (coordSys) {
  279. coordDimsInfos = zrUtil.map(coordSys && coordSys.dimensions, function (coordDim) {
  280. var data = seriesModel.getData();
  281. var info = data.getDimensionInfo(data.mapDimension(coordDim)) || {}; // In map series data don't have lng and lat dimension. Fallback to same with coordSys
  282. return zrUtil.defaults({
  283. name: coordDim
  284. }, info);
  285. });
  286. areaData = new List(zrUtil.map(dims, function (dim, idx) {
  287. return {
  288. name: dim,
  289. type: coordDimsInfos[idx % 2].type
  290. };
  291. }), maModel);
  292. } else {
  293. coordDimsInfos = [{
  294. name: 'value',
  295. type: 'float'
  296. }];
  297. areaData = new List(coordDimsInfos, maModel);
  298. }
  299. var optData = zrUtil.map(maModel.get('data'), zrUtil.curry(markAreaTransform, seriesModel, coordSys, maModel));
  300. if (coordSys) {
  301. optData = zrUtil.filter(optData, zrUtil.curry(markAreaFilter, coordSys));
  302. }
  303. var dimValueGetter = coordSys ? function (item, dimName, dataIndex, dimIndex) {
  304. return item.coord[Math.floor(dimIndex / 2)][dimIndex % 2];
  305. } : function (item) {
  306. return item.value;
  307. };
  308. areaData.initData(optData, null, dimValueGetter);
  309. areaData.hasItemOption = true;
  310. return areaData;
  311. }