欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 明星 > 来自echarts的灵感

来自echarts的灵感

2024/10/24 11:13:45 来源:https://blog.csdn.net/m0_46543935/article/details/140908741  浏览:    关键词:来自echarts的灵感

刻度定位

在图表的类别轴上找到一个给定刻度值 (targetTickId) 的位置 (coord)

coord:Number;=>像素值 为空间位置
targetValue:Number;=> 刻度线某处所代表的值

遍历刻度线

  • 如果 tickValue 等于 targetTickId,则找到了目标位置,赋值给 coord 并退出循环。
  • 如果 tickValue 小于 targetTickId,更新 leftCoord 为当前遍历处刻度的位置。
  • 如果 tickValue 大于 targetTickId,并且 leftCoord 已经有值,说明 targetTickId 在 leftCoord 和当前刻度之间。计算它们的中间位置作为 coord 并退出循环。
 getMarkerPosition(value: ScaleDataValue[],dims?: typeof dimPermutations[number],startingAtTick?: boolean) {const coordSys = this.coordinateSystem;if (coordSys && coordSys.clampData) {// PENDING if clamp ?const clampData = coordSys.clampData(value);const pt = coordSys.dataToPoint(clampData);if (startingAtTick) {each(coordSys.getAxes(), function (axis: Axis2D, idx: number) {// If axis type is category, use tick coords insteadif (axis.type === 'category' && dims != null) {const tickCoords = axis.getTicksCoords();const alignTicksWithLabel = axis.getTickModel().get('alignWithLabel');//targetTickValue 作为变量名比 targetTickId 更能准确地表达其含义let targetTickId = clampData[idx];// The index of rightmost tick of markArea is 1 larger than x1/y1 indexconst isEnd = dims[idx] === 'x1' || dims[idx] === 'y1';if (isEnd && !alignTicksWithLabel) {targetTickId += 1;}// The only contains one tick, tickCoords is// like [{coord: 0, tickValue: 0}, {coord: 0}]// to the length should always be larger than 1if (tickCoords.length < 2) {return;}else if (tickCoords.length === 2) {// The left value and right value of the axis are// the same. coord is 0 in both items. Use the max// value of the axis as the coordpt[idx] = axis.toGlobalCoord(axis.getExtent()[isEnd ? 1 : 0]);return;}let leftCoord;let coord;let stepTickValue = 1;for (let i = 0; i < tickCoords.length; i++) {const tickCoord = tickCoords[i].coord;// The last item of tickCoords doesn't contain// tickValueconst tickValue = i === tickCoords.length - 1? tickCoords[i - 1].tickValue + stepTickValue//对于最后一个刻度(i === tickCoords.length - 1),由于它通常表示轴的边界,//所以我们用前一个刻度的 tickValue 加上步长 (stepTickValue) 来模拟最后一个刻度的值。: tickCoords[i].tickValue;if (tickValue === targetTickId) {coord = tickCoord;break;}else if (tickValue < targetTickId) {leftCoord = tickCoord;}else if (leftCoord != null && tickValue > targetTickId) {coord = (tickCoord + leftCoord) / 2;break;}if (i === 1) {// Here we assume the step of category axes is// the samestepTickValue = tickValue - tickCoords[0].tickValue;}}if (coord == null) {if (!leftCoord) {// targetTickId is smaller than all tick ids in the// visible area, use the leftmost tick coordcoord = tickCoords[0].coord;}else if (leftCoord) {// targetTickId is larger than all tick ids in the// visible area, use the rightmost tick coordcoord = tickCoords[tickCoords.length - 1].coord;}}pt[idx] = axis.toGlobalCoord(coord);}});}else {const data = this.getData();const offset = data.getLayout('offset');const size = data.getLayout('size');const offsetIndex = (coordSys as Cartesian2D).getBaseAxis().isHorizontal() ? 0 : 1;pt[offsetIndex] += offset + size / 2;}return pt;}return [NaN, NaN];}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com