This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/echarts-custom-series.git
The following commit(s) were added to refs/heads/main by this push:
new 25250a8 feat(lineRange): complete lineRange
25250a8 is described below
commit 25250a81f0cc46a7e62e323b834451567bb303b8
Author: Ovilia <[email protected]>
AuthorDate: Wed Oct 16 18:07:26 2024 +0800
feat(lineRange): complete lineRange
---
custom-series/lineRange/src/index.ts | 87 ++++++++++++++++++++++++++++++---
custom-series/lineRange/test/index.html | 20 +++++++-
2 files changed, 97 insertions(+), 10 deletions(-)
diff --git a/custom-series/lineRange/src/index.ts
b/custom-series/lineRange/src/index.ts
index 376ca81..2b611d9 100644
--- a/custom-series/lineRange/src/index.ts
+++ b/custom-series/lineRange/src/index.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import echarts from 'echarts';
+import echarts, { zrUtil } from 'echarts';
import type {
CustomElementOption,
CustomSeriesRenderItem,
@@ -25,6 +25,31 @@ import type {
import type { EChartsExtensionInstallRegisters } from
'echarts/src/extension.ts';
import type { Polygon, Polyline } from 'echarts/src/util/graphic.ts';
+type LineRangeItemPayload = {
+ lineStyle?: {
+ color?: string;
+ opacity?: number;
+ width?: number;
+ type?: string;
+ dashOffset?: number;
+ cap?: 'butt' | 'round' | 'square';
+ join?: 'bevel' | 'round' | 'miter';
+ miterLimit?: number;
+ shadowBlur?: number;
+ shadowColor?: string;
+ shadowOffsetX?: number;
+ shadowOffsetY?: number;
+ };
+ areaStyle?: {
+ color?: string;
+ opacity?: number;
+ shadowBlur?: number;
+ shadowColor?: string;
+ shadowOffsetX?: number;
+ shadowOffsetY?: number;
+ };
+};
+
const renderItem = (
params: echarts.CustomSeriesRenderItemParams,
api: echarts.CustomSeriesRenderItemAPI
@@ -37,27 +62,73 @@ const renderItem = (
// If is the last item, render the line range
const cnt = params.dataInsideLength;
if (params.dataIndex === cnt - 1) {
+ const itemPayload = params.itemPayload as LineRangeItemPayload;
+
const points: number[][] = [];
+ let pathDataStart: string = '';
+ let pathDataEnd: string = '';
for (let i = 0; i < cnt; i++) {
const startValue = api.value(1, i);
const startCoord = api.coord([i, startValue]);
points.push(startCoord);
+ pathDataStart +=
+ (i === 0 ? 'M' : 'L') + startCoord[0] + ',' + startCoord[1] + ' ';
}
for (let i = cnt - 1; i >= 0; i--) {
const endValue = api.value(2, i);
const endCoord = api.coord([i, endValue]);
points.push(endCoord);
+ pathDataEnd +=
+ (i === cnt - 1 ? 'M' : 'L') + endCoord[0] + ',' + endCoord[1] + ' ';
}
- const polygon = {
- type: 'polygon',
+
+ if (itemPayload.areaStyle) {
+ const areaStyle = itemPayload.areaStyle;
+ group.children.push({
+ type: 'polygon',
+ shape: {
+ points,
+ },
+ style: {
+ fill: areaStyle.color || api.visual('color'),
+ opacity: zrUtil.retrieve2(areaStyle.opacity, 0.2),
+ },
+ silent: true,
+ } as Polygon);
+ }
+
+ const lineStyle = itemPayload.lineStyle || {};
+ const polylineStyle = {
+ fill: 'none',
+ stroke: lineStyle.color || api.visual('color'),
+ lineWidth: zrUtil.retrieve2(lineStyle.width, 0),
+ opacity: zrUtil.retrieve2(lineStyle.opacity, 1),
+ type: lineStyle.type,
+ dashOffset: lineStyle.dashOffset,
+ lineCap: lineStyle.cap,
+ lineJoin: lineStyle.join,
+ miterLimit: lineStyle.miterLimit,
+ shadowBlur: lineStyle.shadowBlur,
+ shadowColor: lineStyle.shadowColor,
+ shadowOffsetX: lineStyle.shadowOffsetX,
+ shadowOffsetY: lineStyle.shadowOffsetY,
+ };
+ group.children.push({
+ type: 'path',
shape: {
- points,
+ pathData: pathDataStart,
},
- style: {
- fill: api.visual('color'),
+ style: polylineStyle,
+ silent: true,
+ } as Polyline);
+ group.children.push({
+ type: 'path',
+ shape: {
+ pathData: pathDataEnd,
},
- } as Polygon;
- group.children.push(polygon);
+ style: polylineStyle,
+ silent: true,
+ } as Polyline);
}
return group;
};
diff --git a/custom-series/lineRange/test/index.html
b/custom-series/lineRange/test/index.html
index 222629a..b0ff6c0 100644
--- a/custom-series/lineRange/test/index.html
+++ b/custom-series/lineRange/test/index.html
@@ -36,18 +36,34 @@
tooltip: {
show: true
},
- series: {
+ legend: {
+ top: 15
+ },
+ series: [{
type: 'custom',
+ name: 'line',
renderItem: 'lineRange',
data,
itemPayload: {
+ areaStyle: {
+ },
+ // lineStyle: {
+ // width: 2
+ // }
},
encode: {
x: 0,
y: [1, 2],
tooltip: [1, 2]
}
- }
+ }, {
+ type: 'line',
+ name: 'line', // To use the same color as custom series
+ data: data.map(function (item) {
+ const ratio = Math.random() * 0.5 + 0.25;
+ return item[1] * ratio + item[2] * (1 - ratio);
+ }),
+ }]
};
chart.setOption(option);
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
