Line.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  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 vector = require("zrender/lib/core/vector");
  21. var symbolUtil = require("../../util/symbol");
  22. var LinePath = require("./LinePath");
  23. var graphic = require("../../util/graphic");
  24. var _number = require("../../util/number");
  25. var round = _number.round;
  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. /**
  45. * @module echarts/chart/helper/Line
  46. */
  47. var SYMBOL_CATEGORIES = ['fromSymbol', 'toSymbol'];
  48. function makeSymbolTypeKey(symbolCategory) {
  49. return '_' + symbolCategory + 'Type';
  50. }
  51. /**
  52. * @inner
  53. */
  54. function createSymbol(name, lineData, idx) {
  55. var color = lineData.getItemVisual(idx, 'color');
  56. var symbolType = lineData.getItemVisual(idx, name);
  57. var symbolSize = lineData.getItemVisual(idx, name + 'Size');
  58. if (!symbolType || symbolType === 'none') {
  59. return;
  60. }
  61. if (!zrUtil.isArray(symbolSize)) {
  62. symbolSize = [symbolSize, symbolSize];
  63. }
  64. var symbolPath = symbolUtil.createSymbol(symbolType, -symbolSize[0] / 2, -symbolSize[1] / 2, symbolSize[0], symbolSize[1], color);
  65. symbolPath.name = name;
  66. return symbolPath;
  67. }
  68. function createLine(points) {
  69. var line = new LinePath({
  70. name: 'line',
  71. subPixelOptimize: true
  72. });
  73. setLinePoints(line.shape, points);
  74. return line;
  75. }
  76. function setLinePoints(targetShape, points) {
  77. targetShape.x1 = points[0][0];
  78. targetShape.y1 = points[0][1];
  79. targetShape.x2 = points[1][0];
  80. targetShape.y2 = points[1][1];
  81. targetShape.percent = 1;
  82. var cp1 = points[2];
  83. if (cp1) {
  84. targetShape.cpx1 = cp1[0];
  85. targetShape.cpy1 = cp1[1];
  86. } else {
  87. targetShape.cpx1 = NaN;
  88. targetShape.cpy1 = NaN;
  89. }
  90. }
  91. function updateSymbolAndLabelBeforeLineUpdate() {
  92. var lineGroup = this;
  93. var symbolFrom = lineGroup.childOfName('fromSymbol');
  94. var symbolTo = lineGroup.childOfName('toSymbol');
  95. var label = lineGroup.childOfName('label'); // Quick reject
  96. if (!symbolFrom && !symbolTo && label.ignore) {
  97. return;
  98. }
  99. var invScale = 1;
  100. var parentNode = this.parent;
  101. while (parentNode) {
  102. if (parentNode.scale) {
  103. invScale /= parentNode.scale[0];
  104. }
  105. parentNode = parentNode.parent;
  106. }
  107. var line = lineGroup.childOfName('line'); // If line not changed
  108. // FIXME Parent scale changed
  109. if (!this.__dirty && !line.__dirty) {
  110. return;
  111. }
  112. var percent = line.shape.percent;
  113. var fromPos = line.pointAt(0);
  114. var toPos = line.pointAt(percent);
  115. var d = vector.sub([], toPos, fromPos);
  116. vector.normalize(d, d);
  117. if (symbolFrom) {
  118. symbolFrom.attr('position', fromPos);
  119. var tangent = line.tangentAt(0);
  120. symbolFrom.attr('rotation', Math.PI / 2 - Math.atan2(tangent[1], tangent[0]));
  121. symbolFrom.attr('scale', [invScale * percent, invScale * percent]);
  122. }
  123. if (symbolTo) {
  124. symbolTo.attr('position', toPos);
  125. var tangent = line.tangentAt(1);
  126. symbolTo.attr('rotation', -Math.PI / 2 - Math.atan2(tangent[1], tangent[0]));
  127. symbolTo.attr('scale', [invScale * percent, invScale * percent]);
  128. }
  129. if (!label.ignore) {
  130. label.attr('position', toPos);
  131. var textPosition;
  132. var textAlign;
  133. var textVerticalAlign;
  134. var textOrigin;
  135. var distance = label.__labelDistance;
  136. var distanceX = distance[0] * invScale;
  137. var distanceY = distance[1] * invScale;
  138. var halfPercent = percent / 2;
  139. var tangent = line.tangentAt(halfPercent);
  140. var n = [tangent[1], -tangent[0]];
  141. var cp = line.pointAt(halfPercent);
  142. if (n[1] > 0) {
  143. n[0] = -n[0];
  144. n[1] = -n[1];
  145. }
  146. var dir = tangent[0] < 0 ? -1 : 1;
  147. if (label.__position !== 'start' && label.__position !== 'end') {
  148. var rotation = -Math.atan2(tangent[1], tangent[0]);
  149. if (toPos[0] < fromPos[0]) {
  150. rotation = Math.PI + rotation;
  151. }
  152. label.attr('rotation', rotation);
  153. }
  154. var dy;
  155. switch (label.__position) {
  156. case 'insideStartTop':
  157. case 'insideMiddleTop':
  158. case 'insideEndTop':
  159. case 'middle':
  160. dy = -distanceY;
  161. textVerticalAlign = 'bottom';
  162. break;
  163. case 'insideStartBottom':
  164. case 'insideMiddleBottom':
  165. case 'insideEndBottom':
  166. dy = distanceY;
  167. textVerticalAlign = 'top';
  168. break;
  169. default:
  170. dy = 0;
  171. textVerticalAlign = 'middle';
  172. }
  173. switch (label.__position) {
  174. case 'end':
  175. textPosition = [d[0] * distanceX + toPos[0], d[1] * distanceY + toPos[1]];
  176. textAlign = d[0] > 0.8 ? 'left' : d[0] < -0.8 ? 'right' : 'center';
  177. textVerticalAlign = d[1] > 0.8 ? 'top' : d[1] < -0.8 ? 'bottom' : 'middle';
  178. break;
  179. case 'start':
  180. textPosition = [-d[0] * distanceX + fromPos[0], -d[1] * distanceY + fromPos[1]];
  181. textAlign = d[0] > 0.8 ? 'right' : d[0] < -0.8 ? 'left' : 'center';
  182. textVerticalAlign = d[1] > 0.8 ? 'bottom' : d[1] < -0.8 ? 'top' : 'middle';
  183. break;
  184. case 'insideStartTop':
  185. case 'insideStart':
  186. case 'insideStartBottom':
  187. textPosition = [distanceX * dir + fromPos[0], fromPos[1] + dy];
  188. textAlign = tangent[0] < 0 ? 'right' : 'left';
  189. textOrigin = [-distanceX * dir, -dy];
  190. break;
  191. case 'insideMiddleTop':
  192. case 'insideMiddle':
  193. case 'insideMiddleBottom':
  194. case 'middle':
  195. textPosition = [cp[0], cp[1] + dy];
  196. textAlign = 'center';
  197. textOrigin = [0, -dy];
  198. break;
  199. case 'insideEndTop':
  200. case 'insideEnd':
  201. case 'insideEndBottom':
  202. textPosition = [-distanceX * dir + toPos[0], toPos[1] + dy];
  203. textAlign = tangent[0] >= 0 ? 'right' : 'left';
  204. textOrigin = [distanceX * dir, -dy];
  205. break;
  206. }
  207. label.attr({
  208. style: {
  209. // Use the user specified text align and baseline first
  210. textVerticalAlign: label.__verticalAlign || textVerticalAlign,
  211. textAlign: label.__textAlign || textAlign
  212. },
  213. position: textPosition,
  214. scale: [invScale, invScale],
  215. origin: textOrigin
  216. });
  217. }
  218. }
  219. /**
  220. * @constructor
  221. * @extends {module:zrender/graphic/Group}
  222. * @alias {module:echarts/chart/helper/Line}
  223. */
  224. function Line(lineData, idx, seriesScope) {
  225. graphic.Group.call(this);
  226. this._createLine(lineData, idx, seriesScope);
  227. }
  228. var lineProto = Line.prototype; // Update symbol position and rotation
  229. lineProto.beforeUpdate = updateSymbolAndLabelBeforeLineUpdate;
  230. lineProto._createLine = function (lineData, idx, seriesScope) {
  231. var seriesModel = lineData.hostModel;
  232. var linePoints = lineData.getItemLayout(idx);
  233. var line = createLine(linePoints);
  234. line.shape.percent = 0;
  235. graphic.initProps(line, {
  236. shape: {
  237. percent: 1
  238. }
  239. }, seriesModel, idx);
  240. this.add(line);
  241. var label = new graphic.Text({
  242. name: 'label',
  243. // FIXME
  244. // Temporary solution for `focusNodeAdjacency`.
  245. // line label do not use the opacity of lineStyle.
  246. lineLabelOriginalOpacity: 1
  247. });
  248. this.add(label);
  249. zrUtil.each(SYMBOL_CATEGORIES, function (symbolCategory) {
  250. var symbol = createSymbol(symbolCategory, lineData, idx); // symbols must added after line to make sure
  251. // it will be updated after line#update.
  252. // Or symbol position and rotation update in line#beforeUpdate will be one frame slow
  253. this.add(symbol);
  254. this[makeSymbolTypeKey(symbolCategory)] = lineData.getItemVisual(idx, symbolCategory);
  255. }, this);
  256. this._updateCommonStl(lineData, idx, seriesScope);
  257. };
  258. lineProto.updateData = function (lineData, idx, seriesScope) {
  259. var seriesModel = lineData.hostModel;
  260. var line = this.childOfName('line');
  261. var linePoints = lineData.getItemLayout(idx);
  262. var target = {
  263. shape: {}
  264. };
  265. setLinePoints(target.shape, linePoints);
  266. graphic.updateProps(line, target, seriesModel, idx);
  267. zrUtil.each(SYMBOL_CATEGORIES, function (symbolCategory) {
  268. var symbolType = lineData.getItemVisual(idx, symbolCategory);
  269. var key = makeSymbolTypeKey(symbolCategory); // Symbol changed
  270. if (this[key] !== symbolType) {
  271. this.remove(this.childOfName(symbolCategory));
  272. var symbol = createSymbol(symbolCategory, lineData, idx);
  273. this.add(symbol);
  274. }
  275. this[key] = symbolType;
  276. }, this);
  277. this._updateCommonStl(lineData, idx, seriesScope);
  278. };
  279. lineProto._updateCommonStl = function (lineData, idx, seriesScope) {
  280. var seriesModel = lineData.hostModel;
  281. var line = this.childOfName('line');
  282. var lineStyle = seriesScope && seriesScope.lineStyle;
  283. var hoverLineStyle = seriesScope && seriesScope.hoverLineStyle;
  284. var labelModel = seriesScope && seriesScope.labelModel;
  285. var hoverLabelModel = seriesScope && seriesScope.hoverLabelModel; // Optimization for large dataset
  286. if (!seriesScope || lineData.hasItemOption) {
  287. var itemModel = lineData.getItemModel(idx);
  288. lineStyle = itemModel.getModel('lineStyle').getLineStyle();
  289. hoverLineStyle = itemModel.getModel('emphasis.lineStyle').getLineStyle();
  290. labelModel = itemModel.getModel('label');
  291. hoverLabelModel = itemModel.getModel('emphasis.label');
  292. }
  293. var visualColor = lineData.getItemVisual(idx, 'color');
  294. var visualOpacity = zrUtil.retrieve3(lineData.getItemVisual(idx, 'opacity'), lineStyle.opacity, 1);
  295. line.useStyle(zrUtil.defaults({
  296. strokeNoScale: true,
  297. fill: 'none',
  298. stroke: visualColor,
  299. opacity: visualOpacity
  300. }, lineStyle));
  301. line.hoverStyle = hoverLineStyle; // Update symbol
  302. zrUtil.each(SYMBOL_CATEGORIES, function (symbolCategory) {
  303. var symbol = this.childOfName(symbolCategory);
  304. if (symbol) {
  305. symbol.setColor(visualColor);
  306. symbol.setStyle({
  307. opacity: visualOpacity
  308. });
  309. }
  310. }, this);
  311. var showLabel = labelModel.getShallow('show');
  312. var hoverShowLabel = hoverLabelModel.getShallow('show');
  313. var label = this.childOfName('label');
  314. var defaultLabelColor;
  315. var baseText; // FIXME: the logic below probably should be merged to `graphic.setLabelStyle`.
  316. if (showLabel || hoverShowLabel) {
  317. defaultLabelColor = visualColor || '#000';
  318. baseText = seriesModel.getFormattedLabel(idx, 'normal', lineData.dataType);
  319. if (baseText == null) {
  320. var rawVal = seriesModel.getRawValue(idx);
  321. baseText = rawVal == null ? lineData.getName(idx) : isFinite(rawVal) ? round(rawVal) : rawVal;
  322. }
  323. }
  324. var normalText = showLabel ? baseText : null;
  325. var emphasisText = hoverShowLabel ? zrUtil.retrieve2(seriesModel.getFormattedLabel(idx, 'emphasis', lineData.dataType), baseText) : null;
  326. var labelStyle = label.style; // Always set `textStyle` even if `normalStyle.text` is null, because default
  327. // values have to be set on `normalStyle`.
  328. if (normalText != null || emphasisText != null) {
  329. graphic.setTextStyle(label.style, labelModel, {
  330. text: normalText
  331. }, {
  332. autoColor: defaultLabelColor
  333. });
  334. label.__textAlign = labelStyle.textAlign;
  335. label.__verticalAlign = labelStyle.textVerticalAlign; // 'start', 'middle', 'end'
  336. label.__position = labelModel.get('position') || 'middle';
  337. var distance = labelModel.get('distance');
  338. if (!zrUtil.isArray(distance)) {
  339. distance = [distance, distance];
  340. }
  341. label.__labelDistance = distance;
  342. }
  343. if (emphasisText != null) {
  344. // Only these properties supported in this emphasis style here.
  345. label.hoverStyle = {
  346. text: emphasisText,
  347. textFill: hoverLabelModel.getTextColor(true),
  348. // For merging hover style to normal style, do not use
  349. // `hoverLabelModel.getFont()` here.
  350. fontStyle: hoverLabelModel.getShallow('fontStyle'),
  351. fontWeight: hoverLabelModel.getShallow('fontWeight'),
  352. fontSize: hoverLabelModel.getShallow('fontSize'),
  353. fontFamily: hoverLabelModel.getShallow('fontFamily')
  354. };
  355. } else {
  356. label.hoverStyle = {
  357. text: null
  358. };
  359. }
  360. label.ignore = !showLabel && !hoverShowLabel;
  361. graphic.setHoverStyle(this);
  362. };
  363. lineProto.highlight = function () {
  364. this.trigger('emphasis');
  365. };
  366. lineProto.downplay = function () {
  367. this.trigger('normal');
  368. };
  369. lineProto.updateLayout = function (lineData, idx) {
  370. this.setLinePoints(lineData.getItemLayout(idx));
  371. };
  372. lineProto.setLinePoints = function (points) {
  373. var linePath = this.childOfName('line');
  374. setLinePoints(linePath.shape, points);
  375. linePath.dirty();
  376. };
  377. zrUtil.inherits(Line, graphic.Group);
  378. var _default = Line;
  379. module.exports = _default;