viewHelper.js 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  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 graphic = require("../../util/graphic");
  21. var textContain = require("zrender/lib/contain/text");
  22. var formatUtil = require("../../util/format");
  23. var matrix = require("zrender/lib/core/matrix");
  24. var axisHelper = require("../../coord/axisHelper");
  25. var AxisBuilder = require("../axis/AxisBuilder");
  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. * @param {module:echarts/model/Model} axisPointerModel
  46. */
  47. function buildElStyle(axisPointerModel) {
  48. var axisPointerType = axisPointerModel.get('type');
  49. var styleModel = axisPointerModel.getModel(axisPointerType + 'Style');
  50. var style;
  51. if (axisPointerType === 'line') {
  52. style = styleModel.getLineStyle();
  53. style.fill = null;
  54. } else if (axisPointerType === 'shadow') {
  55. style = styleModel.getAreaStyle();
  56. style.stroke = null;
  57. }
  58. return style;
  59. }
  60. /**
  61. * @param {Function} labelPos {align, verticalAlign, position}
  62. */
  63. function buildLabelElOption(elOption, axisModel, axisPointerModel, api, labelPos) {
  64. var value = axisPointerModel.get('value');
  65. var text = getValueLabel(value, axisModel.axis, axisModel.ecModel, axisPointerModel.get('seriesDataIndices'), {
  66. precision: axisPointerModel.get('label.precision'),
  67. formatter: axisPointerModel.get('label.formatter')
  68. });
  69. var labelModel = axisPointerModel.getModel('label');
  70. var paddings = formatUtil.normalizeCssArray(labelModel.get('padding') || 0);
  71. var font = labelModel.getFont();
  72. var textRect = textContain.getBoundingRect(text, font);
  73. var position = labelPos.position;
  74. var width = textRect.width + paddings[1] + paddings[3];
  75. var height = textRect.height + paddings[0] + paddings[2]; // Adjust by align.
  76. var align = labelPos.align;
  77. align === 'right' && (position[0] -= width);
  78. align === 'center' && (position[0] -= width / 2);
  79. var verticalAlign = labelPos.verticalAlign;
  80. verticalAlign === 'bottom' && (position[1] -= height);
  81. verticalAlign === 'middle' && (position[1] -= height / 2); // Not overflow ec container
  82. confineInContainer(position, width, height, api);
  83. var bgColor = labelModel.get('backgroundColor');
  84. if (!bgColor || bgColor === 'auto') {
  85. bgColor = axisModel.get('axisLine.lineStyle.color');
  86. }
  87. elOption.label = {
  88. shape: {
  89. x: 0,
  90. y: 0,
  91. width: width,
  92. height: height,
  93. r: labelModel.get('borderRadius')
  94. },
  95. position: position.slice(),
  96. // TODO: rich
  97. style: {
  98. text: text,
  99. textFont: font,
  100. textFill: labelModel.getTextColor(),
  101. textPosition: 'inside',
  102. textPadding: paddings,
  103. fill: bgColor,
  104. stroke: labelModel.get('borderColor') || 'transparent',
  105. lineWidth: labelModel.get('borderWidth') || 0,
  106. shadowBlur: labelModel.get('shadowBlur'),
  107. shadowColor: labelModel.get('shadowColor'),
  108. shadowOffsetX: labelModel.get('shadowOffsetX'),
  109. shadowOffsetY: labelModel.get('shadowOffsetY')
  110. },
  111. // Lable should be over axisPointer.
  112. z2: 10
  113. };
  114. } // Do not overflow ec container
  115. function confineInContainer(position, width, height, api) {
  116. var viewWidth = api.getWidth();
  117. var viewHeight = api.getHeight();
  118. position[0] = Math.min(position[0] + width, viewWidth) - width;
  119. position[1] = Math.min(position[1] + height, viewHeight) - height;
  120. position[0] = Math.max(position[0], 0);
  121. position[1] = Math.max(position[1], 0);
  122. }
  123. /**
  124. * @param {number} value
  125. * @param {module:echarts/coord/Axis} axis
  126. * @param {module:echarts/model/Global} ecModel
  127. * @param {Object} opt
  128. * @param {Array.<Object>} seriesDataIndices
  129. * @param {number|string} opt.precision 'auto' or a number
  130. * @param {string|Function} opt.formatter label formatter
  131. */
  132. function getValueLabel(value, axis, ecModel, seriesDataIndices, opt) {
  133. value = axis.scale.parse(value);
  134. var text = axis.scale.getLabel( // If `precision` is set, width can be fixed (like '12.00500'), which
  135. // helps to debounce when when moving label.
  136. value, {
  137. precision: opt.precision
  138. });
  139. var formatter = opt.formatter;
  140. if (formatter) {
  141. var params = {
  142. value: axisHelper.getAxisRawValue(axis, value),
  143. axisDimension: axis.dim,
  144. axisIndex: axis.index,
  145. seriesData: []
  146. };
  147. zrUtil.each(seriesDataIndices, function (idxItem) {
  148. var series = ecModel.getSeriesByIndex(idxItem.seriesIndex);
  149. var dataIndex = idxItem.dataIndexInside;
  150. var dataParams = series && series.getDataParams(dataIndex);
  151. dataParams && params.seriesData.push(dataParams);
  152. });
  153. if (zrUtil.isString(formatter)) {
  154. text = formatter.replace('{value}', text);
  155. } else if (zrUtil.isFunction(formatter)) {
  156. text = formatter(params);
  157. }
  158. }
  159. return text;
  160. }
  161. /**
  162. * @param {module:echarts/coord/Axis} axis
  163. * @param {number} value
  164. * @param {Object} layoutInfo {
  165. * rotation, position, labelOffset, labelDirection, labelMargin
  166. * }
  167. */
  168. function getTransformedPosition(axis, value, layoutInfo) {
  169. var transform = matrix.create();
  170. matrix.rotate(transform, transform, layoutInfo.rotation);
  171. matrix.translate(transform, transform, layoutInfo.position);
  172. return graphic.applyTransform([axis.dataToCoord(value), (layoutInfo.labelOffset || 0) + (layoutInfo.labelDirection || 1) * (layoutInfo.labelMargin || 0)], transform);
  173. }
  174. function buildCartesianSingleLabelElOption(value, elOption, layoutInfo, axisModel, axisPointerModel, api) {
  175. var textLayout = AxisBuilder.innerTextLayout(layoutInfo.rotation, 0, layoutInfo.labelDirection);
  176. layoutInfo.labelMargin = axisPointerModel.get('label.margin');
  177. buildLabelElOption(elOption, axisModel, axisPointerModel, api, {
  178. position: getTransformedPosition(axisModel.axis, value, layoutInfo),
  179. align: textLayout.textAlign,
  180. verticalAlign: textLayout.textVerticalAlign
  181. });
  182. }
  183. /**
  184. * @param {Array.<number>} p1
  185. * @param {Array.<number>} p2
  186. * @param {number} [xDimIndex=0] or 1
  187. */
  188. function makeLineShape(p1, p2, xDimIndex) {
  189. xDimIndex = xDimIndex || 0;
  190. return {
  191. x1: p1[xDimIndex],
  192. y1: p1[1 - xDimIndex],
  193. x2: p2[xDimIndex],
  194. y2: p2[1 - xDimIndex]
  195. };
  196. }
  197. /**
  198. * @param {Array.<number>} xy
  199. * @param {Array.<number>} wh
  200. * @param {number} [xDimIndex=0] or 1
  201. */
  202. function makeRectShape(xy, wh, xDimIndex) {
  203. xDimIndex = xDimIndex || 0;
  204. return {
  205. x: xy[xDimIndex],
  206. y: xy[1 - xDimIndex],
  207. width: wh[xDimIndex],
  208. height: wh[1 - xDimIndex]
  209. };
  210. }
  211. function makeSectorShape(cx, cy, r0, r, startAngle, endAngle) {
  212. return {
  213. cx: cx,
  214. cy: cy,
  215. r0: r0,
  216. r: r,
  217. startAngle: startAngle,
  218. endAngle: endAngle,
  219. clockwise: true
  220. };
  221. }
  222. exports.buildElStyle = buildElStyle;
  223. exports.buildLabelElOption = buildLabelElOption;
  224. exports.getValueLabel = getValueLabel;
  225. exports.getTransformedPosition = getTransformedPosition;
  226. exports.buildCartesianSingleLabelElOption = buildCartesianSingleLabelElOption;
  227. exports.makeLineShape = makeLineShape;
  228. exports.makeRectShape = makeRectShape;
  229. exports.makeSectorShape = makeSectorShape;