From ec7d082293f7979b0c137a4fbcadf449c2e4999f Mon Sep 17 00:00:00 2001 From: Ovilia Date: Thu, 11 Jul 2024 18:28:19 +0800 Subject: [PATCH 1/4] feat(marker): relativeTo --- src/component/marker/MarkPointModel.ts | 1 + src/component/marker/MarkPointView.ts | 22 ++++++++++++++++++++-- src/component/marker/MarkerModel.ts | 1 + src/component/marker/markerHelper.ts | 2 +- src/coord/CoordinateSystem.ts | 6 +++++- src/coord/polar/Polar.ts | 9 ++++++++- 6 files changed, 36 insertions(+), 5 deletions(-) diff --git a/src/component/marker/MarkPointModel.ts b/src/component/marker/MarkPointModel.ts index 1b672317c7..5fc5c59f4f 100644 --- a/src/component/marker/MarkPointModel.ts +++ b/src/component/marker/MarkPointModel.ts @@ -43,6 +43,7 @@ export interface MarkPointDataItemOption extends SymbolOptionMixin, MarkerPositionOption { name: string + relativeTo: 'screen' | 'coordinate' } export interface MarkPointOption extends MarkerOption, diff --git a/src/component/marker/MarkPointView.ts b/src/component/marker/MarkPointView.ts index 3e4499c0d4..054c0a5d90 100644 --- a/src/component/marker/MarkPointView.ts +++ b/src/component/marker/MarkPointView.ts @@ -41,11 +41,29 @@ function updateMarkerLayout( api: ExtensionAPI ) { const coordSys = seriesModel.coordinateSystem; + const apiWidth = api.getWidth(); + const apiHeight = api.getHeight(); + const coordRect = coordSys.getArea && coordSys.getArea(); + console.log(coordSys) mpData.each(function (idx: number) { const itemModel = mpData.getItemModel(idx); + const relativeTo = itemModel.get('relativeTo'); + const width = relativeTo === 'coordinate' + ? coordRect ? coordRect.width : 0 + : apiWidth; + const height = relativeTo === 'coordinate' + ? coordRect ? coordRect.height : 0 + : apiHeight; + const left = relativeTo === 'coordinate' + ? coordRect ? coordRect.x : 0 + : 0; + const top = relativeTo === 'coordinate' + ? coordRect ? coordRect.y : 0 + : 0; + let point; - const xPx = numberUtil.parsePercent(itemModel.get('x'), api.getWidth()); - const yPx = numberUtil.parsePercent(itemModel.get('y'), api.getHeight()); + const xPx = numberUtil.parsePercent(itemModel.get('x'), width) + left; + const yPx = numberUtil.parsePercent(itemModel.get('y'), height) + top; if (!isNaN(xPx) && !isNaN(yPx)) { point = [xPx, yPx]; } diff --git a/src/component/marker/MarkerModel.ts b/src/component/marker/MarkerModel.ts index 28d29a5768..9699278c3f 100644 --- a/src/component/marker/MarkerModel.ts +++ b/src/component/marker/MarkerModel.ts @@ -53,6 +53,7 @@ export interface MarkerPositionOption { // Absolute position, px or percent string x?: number | string y?: number | string + relativeTo?: 'screen' | 'coordinate' /** * Coord on any coordinate system diff --git a/src/component/marker/markerHelper.ts b/src/component/marker/markerHelper.ts index f5e5b7ddf3..61acfd4d6b 100644 --- a/src/component/marker/markerHelper.ts +++ b/src/component/marker/markerHelper.ts @@ -144,7 +144,7 @@ export function dataTransform( } } // x y is provided - if (item.coord == null || !isArray(dims)) { + if ((item.coord == null || !isArray(dims)) && item.relativeTo === 'screen') { item.coord = []; } else { diff --git a/src/coord/CoordinateSystem.ts b/src/coord/CoordinateSystem.ts index 8c778ab837..ea17e8a9aa 100644 --- a/src/coord/CoordinateSystem.ts +++ b/src/coord/CoordinateSystem.ts @@ -174,7 +174,11 @@ export interface CoordinateSystemHostModel extends ComponentModel { * It is used to clip the graphic elements with the contain methods. */ export interface CoordinateSystemClipArea { - contain(x: number, y: number): boolean + x: number; + y: number; + width: number; + height: number; + contain(x: number, y: number): boolean; } export function isCoordinateSystemType( diff --git a/src/coord/polar/Polar.ts b/src/coord/polar/Polar.ts index e7b9db6cce..9ff3fb0e49 100644 --- a/src/coord/polar/Polar.ts +++ b/src/coord/polar/Polar.ts @@ -25,6 +25,7 @@ import GlobalModel from '../../model/Global'; import { ParsedModelFinder, ParsedModelFinderKnown } from '../../util/model'; import { ScaleDataValue } from '../../util/types'; import ExtensionAPI from '../../core/ExtensionAPI'; +import { BoundingRect } from 'zrender'; export const polarDimensions = ['radius', 'angle']; @@ -234,7 +235,13 @@ class Polar implements CoordinateSystem, CoordinateSystemMaster { const r0 = this.r0; return d2 <= r * r && d2 >= r0 * r0; - } + }, + + // As the bounding box + x: this.cx - radiusExtent[1], + y: this.cy - radiusExtent[1], + width: radiusExtent[1] * 2, + height: radiusExtent[1] * 2 }; } From 8c4a2d83b07143696dd8f9c4fdbbdc1d283503fb Mon Sep 17 00:00:00 2001 From: Ovilia Date: Fri, 12 Jul 2024 12:01:56 +0800 Subject: [PATCH 2/4] test(marker): add test case for markline --- test/markPoint-stock.html | 123 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 test/markPoint-stock.html diff --git a/test/markPoint-stock.html b/test/markPoint-stock.html new file mode 100644 index 0000000000..e91d9344ff --- /dev/null +++ b/test/markPoint-stock.html @@ -0,0 +1,123 @@ + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + From 9766e2f4c1e964fbc108b0f1370c4e6f547d89f1 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Tue, 16 Jul 2024 19:07:37 +0800 Subject: [PATCH 3/4] test(marker): relative to coordinate --- src/component/marker/MarkPointView.ts | 1 - src/component/marker/markerHelper.ts | 3 ++- src/coord/polar/Polar.ts | 1 - test/markPoint-stock.html | 25 ++++++++++++++++++++----- 4 files changed, 22 insertions(+), 8 deletions(-) diff --git a/src/component/marker/MarkPointView.ts b/src/component/marker/MarkPointView.ts index 054c0a5d90..0f8de138b7 100644 --- a/src/component/marker/MarkPointView.ts +++ b/src/component/marker/MarkPointView.ts @@ -44,7 +44,6 @@ function updateMarkerLayout( const apiWidth = api.getWidth(); const apiHeight = api.getHeight(); const coordRect = coordSys.getArea && coordSys.getArea(); - console.log(coordSys) mpData.each(function (idx: number) { const itemModel = mpData.getItemModel(idx); const relativeTo = itemModel.get('relativeTo'); diff --git a/src/component/marker/markerHelper.ts b/src/component/marker/markerHelper.ts index 61acfd4d6b..fdc6aedf06 100644 --- a/src/component/marker/markerHelper.ts +++ b/src/component/marker/markerHelper.ts @@ -144,8 +144,9 @@ export function dataTransform( } } // x y is provided - if ((item.coord == null || !isArray(dims)) && item.relativeTo === 'screen') { + if (item.coord == null || !isArray(dims)) { item.coord = []; + item.value = numCalculate(data, data.mapDimension(dims[1]), item.type); } else { // Each coord support max, min, average diff --git a/src/coord/polar/Polar.ts b/src/coord/polar/Polar.ts index 9ff3fb0e49..c70e1e81c3 100644 --- a/src/coord/polar/Polar.ts +++ b/src/coord/polar/Polar.ts @@ -25,7 +25,6 @@ import GlobalModel from '../../model/Global'; import { ParsedModelFinder, ParsedModelFinderKnown } from '../../util/model'; import { ScaleDataValue } from '../../util/types'; import ExtensionAPI from '../../core/ExtensionAPI'; -import { BoundingRect } from 'zrender'; export const polarDimensions = ['radius', 'angle']; diff --git a/test/markPoint-stock.html b/test/markPoint-stock.html index e91d9344ff..e831e3f6a7 100644 --- a/test/markPoint-stock.html +++ b/test/markPoint-stock.html @@ -79,7 +79,7 @@ }, yAxis: { axisLabel: { - show: false, + // show: false, }, min: 'dataMin', max: 'dataMax' @@ -91,15 +91,30 @@ markPoint: { data: [{ type: 'min', - // x: 0, - // y: 0, - // relativeTo: 'coordinate' + x: 0, + y: 0, + relativeTo: 'coordinate' }, { type: 'max', x: 0, y: '100%', + relativeTo: 'coordinate' + }, { + type: 'min', + x: '100%', + y: 0, + name: 'abcd', + relativeTo: 'coordinate' + }, { + type: 'max', + // x: '100%', + // y: '100%', // relativeTo: 'coordinate' - }] + }], + // label: { + // show: true, + // formatter: 'x: {c}' + // } } } }; From 0ac383d51021c7be549a5a3e0b18bb13f74c4ec0 Mon Sep 17 00:00:00 2001 From: Ovilia Date: Thu, 25 Jul 2024 19:30:49 +0800 Subject: [PATCH 4/4] test(marker): update test case --- test/markPoint-stock.html | 95 +++++++++++++++++++++++++++++++++------ 1 file changed, 82 insertions(+), 13 deletions(-) diff --git a/test/markPoint-stock.html b/test/markPoint-stock.html index e831e3f6a7..c21cc59f8c 100644 --- a/test/markPoint-stock.html +++ b/test/markPoint-stock.html @@ -52,15 +52,25 @@ ], function (echarts) { var option; + const lastClose = 100; const data = []; let date = new Date('2024-07-11 9:30:00'); const endDate = new Date('2024-07-11 15:00:00'); - let value = 120; + let value = lastClose; + let max = -Number.MAX_VALUE; + let min = Number.MAX_VALUE; for (; date <= endDate;) { if (date < new Date('2024-07-11 11:30:00').getTime() || date > new Date('2024-07-11 13:00:00').getTime() ) { - value = value + Math.round((Math.random() - 0.5) * 20); + value = Math.max(0, value + Math.round((Math.random() - 0.5) * 20)); + } + + if (value > max) { + max = value; + } + if (value < min) { + min = value; } data.push([ date, @@ -79,7 +89,7 @@ }, yAxis: { axisLabel: { - // show: false, + show: false, }, min: 'dataMin', max: 'dataMax' @@ -89,32 +99,91 @@ data, showSymbol: false, markPoint: { + symbol: 'circle', + symbolSize: 0, + label: { + position: 'top', + distance: 0, + padding: 5, + textBorderColor: '#fff', + textBorderWidth: 2 + }, data: [{ type: 'min', x: 0, y: 0, - relativeTo: 'coordinate' + relativeTo: 'coordinate', + label: { + align: 'left', + verticalAlign: 'top', + color: min > lastClose ? 'red' : 'green', + } }, { type: 'max', x: 0, y: '100%', - relativeTo: 'coordinate' + relativeTo: 'coordinate', + label: { + align: 'left', + verticalAlign: 'bottom', + color: max > lastClose ? 'red' : 'green', + } + }, { + type: 'middle', + x: 0, + y: '50%', + relativeTo: 'coordinate', + label: { + align: 'left', + verticalAlign: 'middle', + formatter: () => { + return (max + min) / 2; + }, + color: (max + min) / 2 > lastClose ? 'red' : 'green', + } }, { type: 'min', x: '100%', y: 0, name: 'abcd', - relativeTo: 'coordinate' + relativeTo: 'coordinate', + label: { + align: 'right', + verticalAlign: 'top', + formatter: () => { + // Percentage of min + return ((min - lastClose) / lastClose * 100).toFixed(2) + '%'; + }, + color: min > lastClose ? 'red' : 'green', + } }, { type: 'max', - // x: '100%', - // y: '100%', - // relativeTo: 'coordinate' + x: '100%', + y: '100%', + relativeTo: 'coordinate', + label: { + align: 'right', + verticalAlign: 'bottom', + formatter: () => { + // Percentage of max + return ((max - lastClose) / lastClose * 100).toFixed(2) + '%'; + }, + color: max > lastClose ? 'red' : 'green', + } + }, { + name: 'middlePercentage', + x: '100%', + y: '50%', + relativeTo: 'coordinate', + label: { + align: 'right', + verticalAlign: 'middle', + formatter: () => { + return (((max + min) / 2 - lastClose) / lastClose * 100).toFixed(2) + '%'; + }, + color: (max + min) / 2 > lastClose ? 'red' : 'green', + } }], - // label: { - // show: true, - // formatter: 'x: {c}' - // } } } };