From cb4ef36cbe47742d931d5ac03502b6456ec2b318 Mon Sep 17 00:00:00 2001 From: cipchk Date: Mon, 30 Oct 2023 19:54:46 +0800 Subject: [PATCH] feat(chart): upgrade antv/g2 to `5.x` --- package.json | 2 +- packages/chart/bar/bar.component.ts | 60 ++--- packages/chart/core/g2.base.component.ts | 13 +- packages/chart/core/g2.servicce.ts | 3 +- packages/chart/core/utils.ts | 42 +-- packages/chart/custom/demo/basic.md | 116 +++------ packages/chart/gauge/gauge.component.ts | 135 ++-------- .../chart/mini-area/mini-area.component.ts | 123 +++++---- packages/chart/mini-bar/mini-bar.component.ts | 75 +++--- packages/chart/pie/pie.component.ts | 241 +++++++++--------- packages/chart/radar/radar.component.ts | 171 ++++++------- .../chart/single-bar/single-bar.component.ts | 80 +++--- .../chart/tag-cloud/tag-cloud.component.ts | 208 ++++++++------- packages/chart/timeline/timeline.component.ts | 230 ++++++++--------- 14 files changed, 646 insertions(+), 853 deletions(-) diff --git a/package.json b/package.json index 6cc2a6d213..b07f2868b9 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "@angular/platform-server": "^16.2.0", "@angular/elements": "^16.2.0", "@antv/data-set": "^0.11.8", - "@antv/g2": "^4.2.10", + "@antv/g2": "^5.1.6", "echarts": "^5.4.3", "@stackblitz/sdk": "^1.9.0", "codesandbox": "^2.2.3", diff --git a/packages/chart/bar/bar.component.ts b/packages/chart/bar/bar.component.ts index c7e2481c18..08f9397e88 100644 --- a/packages/chart/bar/bar.component.ts +++ b/packages/chart/bar/bar.component.ts @@ -9,9 +9,9 @@ import { } from '@angular/core'; import { fromEvent, debounceTime, filter, takeUntil } from 'rxjs'; -import type { Chart, Event } from '@antv/g2'; +import type { Chart, InteractionTypes } from '@antv/g2'; -import { G2BaseComponent, G2InteractionType } from '@delon/chart/core'; +import { G2BaseComponent } from '@delon/chart/core'; import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; @@ -26,7 +26,7 @@ export interface G2BarData { export interface G2BarClickItem { item: G2BarData; - ev: Event; + ev: NzSafeAny; } @Component({ @@ -58,7 +58,7 @@ export class G2BarComponent extends G2BaseComponent { @Input() padding: number | number[] | 'auto' = 'auto'; @Input() data: G2BarData[] = []; @Input() @InputBoolean() autoLabel = true; - @Input() interaction: G2InteractionType = 'none'; + @Input() interaction?: InteractionTypes; @Output() readonly clickItem = new EventEmitter(); // #endregion @@ -68,7 +68,7 @@ export class G2BarComponent extends G2BaseComponent { } install(): void { - const { node, padding, interaction, theme } = this; + const { node, padding, theme, interaction } = this; const container = node.nativeElement as HTMLElement; const chart: Chart = (this._chart = new this.winG2.Chart({ @@ -78,42 +78,30 @@ export class G2BarComponent extends G2BaseComponent { padding, theme })); - this.updatelabel(); - chart.axis('y', { - title: null, - line: null, - tickLine: null - }); - chart.scale({ - x: { - type: 'cat' - }, - y: { - min: 0 - } - }); - chart.tooltip({ - showTitle: false - }); - if (interaction !== 'none') { - chart.interaction(interaction); - } - chart.legend(false); - chart - .interval() - .position('x*y') - .color('x*y', (x, y) => { - const colorItem = this.data.find(w => w.x === x && w.y === y); - return colorItem && colorItem.color ? colorItem.color : this.color; + this.mark = chart.interval(); + this.mark + .legend(false) + .interaction(interaction) + .encode('x', 'x') + .encode('y', 'y') + .encode('color', 'x') + .axis('x', { title: null }) + .axis('y', { title: null, line: null, tickLine: null }) + .scale('color', { + range: this.data.map(({ color }) => color ?? this.color) }) - .tooltip('x*y', (x, y) => ({ name: x, value: y })); + .tooltip({ + title: '', + items: [(_, i, ___, column) => ({ name: column.x.value[i!], value: column.y.value[i!] })] + }); - chart.on(`interval:click`, (ev: Event) => { + chart.on(`interval:click`, (ev: NzSafeAny) => { this.ngZone.run(() => this.clickItem.emit({ item: ev.data?.data, ev })); }); this.ready.next(chart); + this.updatelabel(); this.changeData(); chart.render(); this.installResizeEvent(); @@ -127,10 +115,10 @@ export class G2BarComponent extends G2BaseComponent { } private updatelabel(): void { - const { node, data, _chart } = this; + const { node, data } = this; const canvasWidth = node.nativeElement.clientWidth; const minWidth = data.length * 30; - _chart.axis('x', canvasWidth > minWidth).render(); + this.mark?.axis('x', canvasWidth > minWidth ? { title: null } : false); } private installResizeEvent(): void { diff --git a/packages/chart/core/g2.base.component.ts b/packages/chart/core/g2.base.component.ts index c5ece0b672..986db46c07 100644 --- a/packages/chart/core/g2.base.component.ts +++ b/packages/chart/core/g2.base.component.ts @@ -15,7 +15,7 @@ import { } from '@angular/core'; import { Subject, Subscription, filter, takeUntil } from 'rxjs'; -import type { Chart, Types } from '@antv/g2'; +import type { Chart, MarkNode } from '@antv/g2'; import { BooleanInput, InputBoolean, InputNumber, NumberInput, ZoneOutside } from '@delon/util/decorator'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; @@ -39,7 +39,7 @@ export abstract class G2BaseComponent implements OnInit, OnChanges, OnDestroy { protected platform: Platform, protected cdr: ChangeDetectorRef ) { - this.theme = srv.cog.theme!; + // this.theme = srv.cog.theme!; this.srv.notify .pipe( takeUntil(this.destroy$), @@ -55,10 +55,11 @@ export abstract class G2BaseComponent implements OnInit, OnChanges, OnDestroy { protected resize$?: Subscription; protected destroy$ = new Subject(); protected _chart!: Chart; + protected mark?: MarkNode; loaded = false; @Input() @InputNumber() delay = 0; - @Input() theme: string | Types.LooseObject; + @Input() theme?: string; @Output() readonly ready = new EventEmitter(); /** 检查是否只变更数据 */ @@ -102,7 +103,7 @@ export abstract class G2BaseComponent implements OnInit, OnChanges, OnDestroy { const isOnlyChangeData = this.onlyChangeData ? this.onlyChangeData(changes) : Object.keys(changes).length === 1 && !!changes.data; - if (isOnlyChangeData) { + if (this.chart && isOnlyChangeData) { this.changeData(); return; } @@ -114,9 +115,7 @@ export abstract class G2BaseComponent implements OnInit, OnChanges, OnDestroy { @ZoneOutside() protected destroyChart(): this { - if (this._chart) { - this._chart.destroy(); - } + this._chart?.destroy(); return this; } diff --git a/packages/chart/core/g2.servicce.ts b/packages/chart/core/g2.servicce.ts index 8189d89c32..735a6916dd 100644 --- a/packages/chart/core/g2.servicce.ts +++ b/packages/chart/core/g2.servicce.ts @@ -20,7 +20,8 @@ export class G2Service implements OnDestroy { { theme: '', libs: [ - 'https://gw.alipayobjects.com/os/lib/antv/g2/4.1.46/dist/g2.min.js', + // 'https://gw.alipayobjects.com/os/lib/antv/g2/4.1.46/dist/g2.min.js', + 'https://unpkg.com/@antv/g2/dist/g2.min.js', 'https://gw.alipayobjects.com/os/lib/antv/data-set/0.11.8/dist/data-set.js' ] } as AlainChartConfig, diff --git a/packages/chart/core/utils.ts b/packages/chart/core/utils.ts index a677d72ef0..4902f734ad 100644 --- a/packages/chart/core/utils.ts +++ b/packages/chart/core/utils.ts @@ -1,23 +1,25 @@ -import type { Types } from '@antv/g2'; +// import type { Types } from '@antv/g2'; -export function genMiniTooltipOptions(type: 'mini' | 'default', options?: Types.TooltipCfg): Types.TooltipCfg { - const res: Types.TooltipCfg = { - showTitle: false, - showMarkers: true, - enterable: true, - domStyles: { - 'g2-tooltip': { padding: '0px' }, - 'g2-tooltip-title': { display: 'none' }, - 'g2-tooltip-list-item': { margin: '4px' } - }, - ...options - }; - if (type === 'mini') { - res.position = 'top'; - res.domStyles!['g2-tooltip'] = { padding: '0px', backgroundColor: 'transparent', boxShadow: 'none' }; - res.itemTpl = `
  • {value}
    • `; - res.offset = 8; - } +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export function genMiniTooltipOptions(): any { + // const res: Types.TooltipCfg = { + // showTitle: false, + // showMarkers: true, + // enterable: true, + // domStyles: { + // 'g2-tooltip': { padding: '0px' }, + // 'g2-tooltip-title': { display: 'none' }, + // 'g2-tooltip-list-item': { margin: '4px' } + // }, + // ...options + // }; + // if (type === 'mini') { + // res.position = 'top'; + // res.domStyles!['g2-tooltip'] = { padding: '0px', backgroundColor: 'transparent', boxShadow: 'none' }; + // res.itemTpl = `
  • {value}
    • `; + // res.offset = 8; + // } - return res; + // return res; + return {}; } diff --git a/packages/chart/custom/demo/basic.md b/packages/chart/custom/demo/basic.md index 74f78c9f1c..5975d93670 100644 --- a/packages/chart/custom/demo/basic.md +++ b/packages/chart/custom/demo/basic.md @@ -15,11 +15,14 @@ Copy [Basic Funnel Chart](https://antv.alipay.com/zh-cn/g2/3.x/demo/funnel/basic ```ts import { Component, ElementRef, NgZone } from '@angular/core'; + import type { Chart } from '@antv/g2'; +import type { NzSafeAny } from 'ng-zorro-antd/core/types'; + @Component({ selector: 'chart-custom-basic', - template: ` `, + template: `` }) export class DemoComponent { constructor(private ngZone: NgZone) {} @@ -29,99 +32,38 @@ export class DemoComponent { } private init(el: HTMLElement): void { - const data: Array<{ action: string; pv: number; percent: number }> = [ - { action: '浏览网站', pv: 50000, percent: 0 }, - { action: '放入购物车', pv: 35000, percent: 0 }, - { action: '生成订单', pv: 25000, percent: 0 }, - { action: '支付订单', pv: 15000, percent: 0 }, - { action: '完成交易', pv: 8000, percent: 0 }, - ].map(row => { - row.percent = row.pv / 50000; - return row; - }); - const chart: Chart = new (window as any).G2.Chart({ + const data: Array<{ action: string; pv: number }> = [ + { action: '浏览网站', pv: 50000 }, + { action: '放入购物车', pv: 35000 }, + { action: '生成订单', pv: 25000 }, + { action: '支付订单', pv: 15000 }, + { action: '完成交易', pv: 8000 } + ]; + + const chart: Chart = new (window as NzSafeAny).G2.Chart({ container: el, - autoFit: true, - height: 500, - width: el.clientWidth, - padding: [20, 120, 95], + autoFit: true }); - chart.data(data); - chart.axis(false); - chart.tooltip({ - showTitle: false, - showMarkers: false, - itemTpl: - '
  • ' + - '' + - '{name}
    ' + - '浏览人数：{pv}
    ' + - '占比：{percent}
    ' + - '
    • ', + chart.coordinate({ + transform: [{ type: 'transpose' }] }); + chart.data(data); - chart.coordinate('rect').transpose().scale(1, -1); chart .interval() - .adjust('symmetric') - .position('action*percent') - .shape('funnel') - .color('action', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF']) - .label( - 'action*pv', - (action, pv) => { - return { - content: `${action} ${pv}`, - }; - }, - { - offset: 35, - labelLine: { - style: { - lineWidth: 1, - stroke: 'rgba(0, 0, 0, 0.15)', - }, - }, - }, - ) - .tooltip('action*pv*percent', (action, pv, percent) => { - return { - name: action, - percent: +percent * 100 + '%', - pv, - }; + .encode('x', 'action') + .encode('y', 'pv') + .encode('color', 'action') + .encode('shape', 'funnel') + .transform({ type: 'symmetryY' }) + .scale('x', { padding: 0 }) + .animate('enter', { type: 'fadeIn' }) + .label({ + text: (d: { action: string; pv: number }) => `${d.action}\n${d.pv}`, + position: 'inside', + transform: [{ type: 'contrastReverse' }] }) - .animate({ - appear: { - animation: 'fade-in', - }, - update: { - // annotation: 'fade-in' - }, - }); - - chart.interaction('element-active'); - - chart.on('beforepaint', () => { - chart.annotation().clear(true); - const chartData = chart.getData(); - // 中间标签文本 - chartData.forEach(obj => { - chart.annotation().text({ - top: true, - position: { - action: obj.action, - percent: 'median', - }, - content: +obj.percent * 100 + '%', // 显示的文本内容 - style: { - stroke: null, - fill: '#fff', - textAlign: 'center', - }, - }); - }); - }); + .axis(false); chart.render(); } diff --git a/packages/chart/gauge/gauge.component.ts b/packages/chart/gauge/gauge.component.ts index f348cc98be..558eb08d5c 100644 --- a/packages/chart/gauge/gauge.component.ts +++ b/packages/chart/gauge/gauge.component.ts @@ -33,130 +33,45 @@ export class G2GaugeComponent extends G2BaseComponent { // #endregion - install(): void { - // 自定义Shape 部分 - this.winG2.registerShape('point', 'pointer', { - draw(cfg: NzSafeAny, container: NzSafeAny) { - const group = container.addGroup({}); - // 获取极坐标系下画布中心点 - const center = (this as NzSafeAny).parsePoint({ x: 0, y: 0 }); - // 绘制指针 - group.addShape('line', { - attrs: { - x1: center.x, - y1: center.y, - x2: cfg.x, - y2: cfg.y, - stroke: cfg.color, - lineWidth: 2.5, - lineCap: 'round' - } - }); - group.addShape('circle', { - attrs: { - x: center.x, - y: center.y, - r: 5.75, - stroke: cfg.color, - lineWidth: 2, - fill: '#fff' - } - }); - return group; - } - }); + onlyChangeData = (): boolean => { + return true; + }; - const { el, height, padding, format, theme } = this; + install(): void { + const { el, padding, theme, percent } = this; + const container = el.nativeElement as HTMLElement; const chart: Chart = (this._chart = new this.winG2.Chart({ - container: el.nativeElement, + container, autoFit: true, - height, padding, theme })); - chart.legend(false); - chart.animate(false); - chart.tooltip(false); - chart.coordinate('polar', { - startAngle: (-9 / 8) * Math.PI, - endAngle: (1 / 8) * Math.PI, - radius: 0.75 - }); - chart.scale('value', { - min: 0, - max: 100, - nice: true, - tickCount: 6 - }); - chart.axis('1', false); - chart.axis('value', { - line: null, - label: { - offset: -14, - formatter: format - }, - tickLine: null, - grid: null - }); - chart.point().position('value*1').shape('pointer'); - - this.ready.next(chart); - this.changeData(); + this.mark = chart.gauge(); + this.mark + .data({ + value: { + target: percent, + total: 100 + // name: 'score', + } + }) + .animate('enter', false) + .animate('update', false) + .animate('exit', false) + .legend(false); chart.render(); } changeData(): void { - const { _chart, percent, color, bgColor, title } = this; - if (!_chart) return; - - const data = [{ name: title, value: percent }]; - const val = data[0].value; - _chart.annotation().clear(true); - _chart.geometries[0].color(color); - // 绘制仪表盘背景 - _chart.annotation().arc({ - top: false, - start: [0, 0.95], - end: [100, 0.95], - style: { - stroke: bgColor, - lineWidth: 12, - lineDash: null - } - }); - _chart.annotation().arc({ - start: [0, 0.95], - end: [data[0].value!, 0.95], - style: { - stroke: color, - lineWidth: 12, - lineDash: null - } - }); - - _chart.annotation().text({ - position: ['50%', '85%'], - content: title, - style: { - fontSize: 12, - fill: this.theme === 'dark' ? 'rgba(255, 255, 255, 0.43)' : 'rgba(0, 0, 0, 0.43)', - textAlign: 'center' + this.mark?.changeData({ + value: { + target: this.percent, + total: 100 + // name: 'score', } }); - _chart.annotation().text({ - position: ['50%', '90%'], - content: `${val} %`, - style: { - fontSize: 20, - fill: this.theme === 'dark' ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.85)', - textAlign: 'center' - }, - offsetY: 15 - }); - - _chart.changeData(data); } } diff --git a/packages/chart/mini-area/mini-area.component.ts b/packages/chart/mini-area/mini-area.component.ts index acb6487912..b07dd2029c 100644 --- a/packages/chart/mini-area/mini-area.component.ts +++ b/packages/chart/mini-area/mini-area.component.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core'; -import type { Chart, Event } from '@antv/g2'; +// import type { Chart, Event } from '@antv/g2'; -import { G2BaseComponent, genMiniTooltipOptions } from '@delon/chart/core'; +import { G2BaseComponent } from '@delon/chart/core'; import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; @@ -55,70 +55,61 @@ export class G2MiniAreaComponent extends G2BaseComponent { // #endregion install(): void { - const { - el, - fit, - height, - padding, - xAxis, - yAxis, - yTooltipSuffix, - tooltipType, - line, - theme, - animate, - color, - borderColor, - borderWidth - } = this; - const chart: Chart = (this._chart = new this.winG2.Chart({ - container: el.nativeElement, - autoFit: fit, - height, - padding, - theme - })); - chart.animate(animate); - - if (!xAxis && !yAxis) { - chart.axis(false); - } - - if (xAxis) { - chart.axis('x', xAxis); - } else { - chart.axis('x', false); - } - - if (yAxis) { - chart.axis('y', yAxis); - } else { - chart.axis('y', false); - } - - chart.legend(false); - chart.tooltip(genMiniTooltipOptions(tooltipType)); - - chart - .area() - .position('x*y') - .color(color) - .tooltip('x*y', (x, y) => ({ name: x, value: y + yTooltipSuffix })) - .shape('smooth'); - - if (line) { - chart.line().position('x*y').shape('smooth').color(borderColor).size(borderWidth).tooltip(false); - } - - chart.on(`plot:click`, (ev: Event) => { - const records = this._chart.getSnapRecords({ x: ev.x, y: ev.y }); - this.ngZone.run(() => this.clickItem.emit({ item: records[0]._origin, ev })); - }); - - this.ready.next(chart); - - this.changeData(); - chart.render(); + // const { + // el, + // fit, + // height, + // padding, + // xAxis, + // yAxis, + // yTooltipSuffix, + // tooltipType, + // line, + // theme, + // animate, + // color, + // borderColor, + // borderWidth + // } = this; + // const chart: Chart = (this._chart = new this.winG2.Chart({ + // container: el.nativeElement, + // autoFit: fit, + // height, + // padding, + // theme + // })); + // chart.animate(animate); + // if (!xAxis && !yAxis) { + // chart.axis(false); + // } + // if (xAxis) { + // chart.axis('x', xAxis); + // } else { + // chart.axis('x', false); + // } + // if (yAxis) { + // chart.axis('y', yAxis); + // } else { + // chart.axis('y', false); + // } + // chart.legend(false); + // chart.tooltip(genMiniTooltipOptions(tooltipType)); + // chart + // .area() + // .position('x*y') + // .color(color) + // .tooltip('x*y', (x, y) => ({ name: x, value: y + yTooltipSuffix })) + // .shape('smooth'); + // if (line) { + // chart.line().position('x*y').shape('smooth').color(borderColor).size(borderWidth).tooltip(false); + // } + // chart.on(`plot:click`, (ev: Event) => { + // const records = this._chart.getSnapRecords({ x: ev.x, y: ev.y }); + // this.ngZone.run(() => this.clickItem.emit({ item: records[0]._origin, ev })); + // }); + // this.ready.next(chart); + // this.changeData(); + // chart.render(); } changeData(): void { diff --git a/packages/chart/mini-bar/mini-bar.component.ts b/packages/chart/mini-bar/mini-bar.component.ts index 41dac9d776..4606d38d44 100644 --- a/packages/chart/mini-bar/mini-bar.component.ts +++ b/packages/chart/mini-bar/mini-bar.component.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core'; -import type { Chart, Event } from '@antv/g2'; +// import type { Chart, Event } from '@antv/g2'; -import { G2BaseComponent, genMiniTooltipOptions } from '@delon/chart/core'; +import { G2BaseComponent } from '@delon/chart/core'; import { InputNumber, NumberInput } from '@delon/util/decorator'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; @@ -47,43 +47,40 @@ export class G2MiniBarComponent extends G2BaseComponent { // #endregion install(): void { - const { el, height, padding, yTooltipSuffix, tooltipType, theme, color, borderWidth } = this; - const chart: Chart = (this._chart = new this.winG2.Chart({ - container: el.nativeElement, - autoFit: true, - height, - padding, - theme - })); - chart.scale({ - x: { - type: 'cat' - }, - y: { - min: 0 - } - }); - chart.legend(false); - chart.axis(false); - chart.tooltip(genMiniTooltipOptions(tooltipType, { showCrosshairs: false })); - chart - .interval() - .position('x*y') - .color('x*y', (x, y) => { - const colorItem = this.data.find(w => w.x === x && w.y === y); - return colorItem && colorItem.color ? colorItem.color : color; - }) - .size(borderWidth) - .tooltip('x*y', (x: NzSafeAny, y: NzSafeAny) => ({ name: x, value: y + yTooltipSuffix })); - - chart.on(`interval:click`, (ev: Event) => { - this.ngZone.run(() => this.clickItem.emit({ item: ev.data?.data, ev })); - }); - - this.ready.next(chart); - - this.changeData(); - chart.render(); + // const { el, height, padding, yTooltipSuffix, tooltipType, theme, color, borderWidth } = this; + // const chart: Chart = (this._chart = new this.winG2.Chart({ + // container: el.nativeElement, + // autoFit: true, + // height, + // padding, + // theme + // })); + // chart.scale({ + // x: { + // type: 'cat' + // }, + // y: { + // min: 0 + // } + // }); + // chart.legend(false); + // chart.axis(false); + // chart.tooltip(genMiniTooltipOptions(tooltipType, { showCrosshairs: false })); + // chart + // .interval() + // .position('x*y') + // .color('x*y', (x, y) => { + // const colorItem = this.data.find(w => w.x === x && w.y === y); + // return colorItem && colorItem.color ? colorItem.color : color; + // }) + // .size(borderWidth) + // .tooltip('x*y', (x: NzSafeAny, y: NzSafeAny) => ({ name: x, value: y + yTooltipSuffix })); + // chart.on(`interval:click`, (ev: Event) => { + // this.ngZone.run(() => this.clickItem.emit({ item: ev.data?.data, ev })); + // }); + // this.ready.next(chart); + // this.changeData(); + // chart.render(); } changeData(): void { diff --git a/packages/chart/pie/pie.component.ts b/packages/chart/pie/pie.component.ts index 1b24d5af8c..9455b677d5 100644 --- a/packages/chart/pie/pie.component.ts +++ b/packages/chart/pie/pie.component.ts @@ -8,7 +8,7 @@ import { ViewEncapsulation } from '@angular/core'; -import type { Chart, Event } from '@antv/g2'; +// import type { Chart, Event } from '@antv/g2'; import { G2BaseComponent, G2InteractionType } from '@delon/chart/core'; import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator'; @@ -60,7 +60,7 @@ export class G2PieComponent extends G2BaseComponent { static ngAcceptInputType_blockMaxWidth: NumberInput; static ngAcceptInputType_select: BooleanInput; - private percentColor!: (value: string) => string; + // private percentColor!: (value: string) => string; legendData: NzSafeAny[] = []; isPercent = false; @@ -95,141 +95,132 @@ export class G2PieComponent extends G2BaseComponent { block: boolean = false; - private fixData(): void { - const { percent, color } = this; - this.isPercent = percent != null; - if (!this.isPercent) { - return; - } - - this.select = false; - this.tooltip = false; - const { text, inverse, color: textColor, inverseColor } = this.ratio; - this.percentColor = (value: string) => (value === text ? textColor || color : inverseColor); - this.data = [ - { - x: text, - y: percent! - }, - { - x: inverse, - y: 100 - percent! - } - ]; - } - - private updateBlock(): void { - this.block = this._chart && this.hasLegend && this.el.nativeElement.clientWidth <= this.blockMaxWidth; - this.cdr.detectChanges(); - } + // private fixData(): void { + // const { percent, color } = this; + // this.isPercent = percent != null; + // if (!this.isPercent) { + // return; + // } + + // this.select = false; + // this.tooltip = false; + // const { text, inverse, color: textColor, inverseColor } = this.ratio; + // this.percentColor = (value: string) => (value === text ? textColor || color : inverseColor); + // this.data = [ + // { + // x: text, + // y: percent! + // }, + // { + // x: inverse, + // y: 100 - percent! + // } + // ]; + // } + + // private updateBlock(): void { + // this.block = this._chart && this.hasLegend && this.el.nativeElement.clientWidth <= this.blockMaxWidth; + // this.cdr.detectChanges(); + // } install(): void { - const { - node, - height, - padding, - tooltip, - inner, - hasLegend, - interaction, - theme, - animate, - lineWidth, - isPercent, - percentColor, - colors - } = this; - const chart: Chart = (this._chart = new this.winG2.Chart({ - container: node.nativeElement, - autoFit: true, - height, - padding, - theme - })); - chart.animate(animate); - - if (!tooltip) { - chart.tooltip(false); - } else { - chart.tooltip({ - showTitle: false, - showMarkers: false - }); - } - if (interaction !== 'none') { - chart.interaction(interaction); - } - chart.axis(false).legend(false).coordinate('theta', { innerRadius: inner }); - chart.filter('x', (_val: NzSafeAny, item: NzSafeAny) => item.checked !== false); - chart - .interval() - .adjust('stack') - .position('y') - .style({ lineWidth, stroke: '#fff' }) - .color('x', isPercent ? percentColor : colors) - .tooltip('x*percent', (name: string, p: number) => ({ - name, - value: `${hasLegend ? p : (p * 100).toFixed(2)} %` - })) - .state({}); - chart.scale({ - x: { - type: 'cat', - range: [0, 1] - } - }); - - chart - .on(`interval:click`, (ev: Event) => { - this.ngZone.run(() => this.clickItem.emit({ item: ev.data?.data, ev })); - }) - .on('afterrender', () => { - this.ngZone.run(() => this.updateBlock()); - }); - - this.ready.next(chart); - - this.changeData(); - - chart.render(); + // const { + // node, + // height, + // padding, + // tooltip, + // inner, + // hasLegend, + // interaction, + // theme, + // animate, + // lineWidth, + // isPercent, + // percentColor, + // colors + // } = this; + // const chart: Chart = (this._chart = new this.winG2.Chart({ + // container: node.nativeElement, + // autoFit: true, + // height, + // padding, + // theme + // })); + // chart.animate(animate); + // if (!tooltip) { + // chart.tooltip(false); + // } else { + // chart.tooltip({ + // showTitle: false, + // showMarkers: false + // }); + // } + // if (interaction !== 'none') { + // chart.interaction(interaction); + // } + // chart.axis(false).legend(false).coordinate('theta', { innerRadius: inner }); + // chart.filter('x', (_val: NzSafeAny, item: NzSafeAny) => item.checked !== false); + // chart + // .interval() + // .adjust('stack') + // .position('y') + // .style({ lineWidth, stroke: '#fff' }) + // .color('x', isPercent ? percentColor : colors) + // .tooltip('x*percent', (name: string, p: number) => ({ + // name, + // value: `${hasLegend ? p : (p * 100).toFixed(2)} %` + // })) + // .state({}); + // chart.scale({ + // x: { + // type: 'cat', + // range: [0, 1] + // } + // }); + // chart + // .on(`interval:click`, (ev: Event) => { + // this.ngZone.run(() => this.clickItem.emit({ item: ev.data?.data, ev })); + // }) + // .on('afterrender', () => { + // this.ngZone.run(() => this.updateBlock()); + // }); + // this.ready.next(chart); + // this.changeData(); + // chart.render(); } changeData(): void { - const { _chart, data } = this; - if (!_chart || !Array.isArray(data) || data.length <= 0) return; - - // 转化 percent - const totalSum = data.reduce((cur, item) => cur + item.y, 0); - for (const item of data) { - item.percent = totalSum === 0 ? 0 : item.y / totalSum; - } - _chart.changeData(data); - - this.ngZone.run(() => this.genLegend()); + // const { _chart, data } = this; + // if (!_chart || !Array.isArray(data) || data.length <= 0) return; + // // 转化 percent + // const totalSum = data.reduce((cur, item) => cur + item.y, 0); + // for (const item of data) { + // item.percent = totalSum === 0 ? 0 : item.y / totalSum; + // } + // _chart.changeData(data); + // this.ngZone.run(() => this.genLegend()); } - private genLegend(): void { - const { hasLegend, isPercent, cdr, _chart } = this; - if (!hasLegend || isPercent) return; - - this.legendData = _chart.geometries[0].dataArray.map((item: NzSafeAny) => { - const origin = item[0]._origin; - origin.color = item[0].color; - origin.checked = true; - origin.percent = (origin.percent * 100).toFixed(2); - return origin; - }); - - cdr.detectChanges(); - } + // private genLegend(): void { + // // const { hasLegend, isPercent, cdr, _chart } = this; + // // if (!hasLegend || isPercent) return; + // // this.legendData = _chart.geometries[0].dataArray.map((item: NzSafeAny) => { + // // const origin = item[0]._origin; + // // origin.color = item[0].color; + // // origin.checked = true; + // // origin.percent = (origin.percent * 100).toFixed(2); + // // return origin; + // // }); + // // cdr.detectChanges(); + // } _click(i: number): void { - const { legendData, _chart } = this; + const { legendData } = this; legendData[i].checked = !legendData[i].checked; - _chart.render(true); + // _chart.render(true); } onChanges(): void { - this.fixData(); + // this.fixData(); } } diff --git a/packages/chart/radar/radar.component.ts b/packages/chart/radar/radar.component.ts index 45d8bb825c..3ba1eb67bc 100644 --- a/packages/chart/radar/radar.component.ts +++ b/packages/chart/radar/radar.component.ts @@ -8,7 +8,7 @@ import { ViewEncapsulation } from '@angular/core'; -import type { Chart, Event } from '@antv/g2'; +// import type { Chart, Event } from '@antv/g2'; import { G2BaseComponent } from '@delon/chart/core'; import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator'; @@ -58,106 +58,99 @@ export class G2RadarComponent extends G2BaseComponent { // #endregion - private getHeight(): number { - return this.height - (this.hasLegend ? 80 : 22); - } + // private getHeight(): number { + // return this.height - (this.hasLegend ? 80 : 22); + // } install(): void { - const { node, padding, theme, tickCount } = this; - - const chart: Chart = (this._chart = new this.winG2.Chart({ - container: node.nativeElement, - autoFit: true, - height: this.getHeight(), - padding, - theme - })); - - chart.coordinate('polar'); - chart.legend(false); - chart.axis('label', { - line: null, - label: { - offset: 8 - }, - grid: { - line: { - style: { - stroke: '#e9e9e9', - lineWidth: 1, - lineDash: [0, 0] - } - } - } - }); - chart.axis('value', { - grid: { - line: { - type: 'polygon', - style: { - stroke: '#e9e9e9', - lineWidth: 1, - lineDash: [0, 0] - } - } - } - }); - chart.scale({ - value: { - min: 0, - tickCount - } - }); - chart.filter('name', (name: string) => { - const legendItem = this.legendData.find(w => w.name === name); - return legendItem ? legendItem.checked !== false : true; - }); - - chart.line().position('label*value').color('name', this.colors); - chart.point().position('label*value').shape('circle').size(3); - - chart.on(`point:click`, (ev: Event) => { - this.ngZone.run(() => this.clickItem.emit({ item: ev.data?.data, ev })); - }); - - this.ready.next(chart); - - this.changeData(); - - chart.render(); + // const { node, padding, theme, tickCount } = this; + // const chart: Chart = (this._chart = new this.winG2.Chart({ + // container: node.nativeElement, + // autoFit: true, + // height: this.getHeight(), + // padding, + // theme + // })); + // chart.coordinate('polar'); + // chart.legend(false); + // chart.axis('label', { + // line: null, + // label: { + // offset: 8 + // }, + // grid: { + // line: { + // style: { + // stroke: '#e9e9e9', + // lineWidth: 1, + // lineDash: [0, 0] + // } + // } + // } + // }); + // chart.axis('value', { + // grid: { + // line: { + // type: 'polygon', + // style: { + // stroke: '#e9e9e9', + // lineWidth: 1, + // lineDash: [0, 0] + // } + // } + // } + // }); + // chart.scale({ + // value: { + // min: 0, + // tickCount + // } + // }); + // chart.filter('name', (name: string) => { + // const legendItem = this.legendData.find(w => w.name === name); + // return legendItem ? legendItem.checked !== false : true; + // }); + // chart.line().position('label*value').color('name', this.colors); + // chart.point().position('label*value').shape('circle').size(3); + // chart.on(`point:click`, (ev: Event) => { + // this.ngZone.run(() => this.clickItem.emit({ item: ev.data?.data, ev })); + // }); + // this.ready.next(chart); + // this.changeData(); + // chart.render(); } - changeData(): void { - const { _chart, data } = this; - if (!_chart || !Array.isArray(data) || data.length <= 0) return; - _chart.changeData(data); + // changeData(): void { + // const { _chart, data } = this; + // if (!_chart || !Array.isArray(data) || data.length <= 0) return; + // _chart.changeData(data); - this.ngZone.run(() => this.genLegend()); - } + // this.ngZone.run(() => this.genLegend()); + // } - private genLegend(): void { - const { hasLegend, cdr, _chart } = this; - if (!hasLegend) return; + // private genLegend(): void { + // const { hasLegend, cdr, _chart } = this; + // if (!hasLegend) return; - this.legendData = _chart.geometries[0].dataArray.map(item => { - const origin = item[0]._origin; - const result = { - name: origin.name, - color: item[0].color, - checked: true, - value: item.reduce((p, n) => p + n._origin.value, 0) - }; + // this.legendData = _chart.geometries[0].dataArray.map(item => { + // const origin = item[0]._origin; + // const result = { + // name: origin.name, + // color: item[0].color, + // checked: true, + // value: item.reduce((p, n) => p + n._origin.value, 0) + // }; - return result; - }); + // return result; + // }); - cdr.detectChanges(); - } + // cdr.detectChanges(); + // } _click(i: number): void { - const { legendData, _chart } = this; + const { legendData } = this; legendData[i].checked = !legendData[i].checked; - _chart.render(true); + // _chart.render(true); } onChanges(): void { diff --git a/packages/chart/single-bar/single-bar.component.ts b/packages/chart/single-bar/single-bar.component.ts index 0b0defafe5..a432051800 100644 --- a/packages/chart/single-bar/single-bar.component.ts +++ b/packages/chart/single-bar/single-bar.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, Input, SimpleChanges, ViewEncapsulation } from '@angular/core'; -import type { Chart } from '@antv/g2'; +// import type { Chart } from '@antv/g2'; import { G2BaseComponent } from '@delon/chart/core'; import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator'; @@ -42,47 +42,43 @@ export class G2SingleBarComponent extends G2BaseComponent { // #endregion install(): void { - const { el, height, padding, textStyle, line, format, theme, min, max, plusColor, minusColor, barSize } = this; - const chart: Chart = (this._chart = new this.winG2.Chart({ - container: el.nativeElement, - autoFit: true, - height, - padding, - theme - })); - chart.legend(false); - chart.axis(false); - chart.scale({ value: { max, min } }); - chart.tooltip(false); - chart.coordinate().transpose(); - chart - .interval() - .position('1*value') - .color('value', (val: number) => (val > 0 ? plusColor : minusColor)) - .size(barSize) - .label('value', () => ({ - formatter: format, - style: { - ...textStyle - } - })); - - if (line) { - chart.annotation().line({ - start: ['50%', '0%'], - end: ['50%', '100%'], - style: { - stroke: '#e8e8e8', - lineDash: [0, 0] - } - }); - } - - this.ready.next(chart); - - this.changeData(); - - chart.render(); + // const { el, height, padding, textStyle, line, format, theme, min, max, plusColor, minusColor, barSize } = this; + // const chart: Chart = (this._chart = new this.winG2.Chart({ + // container: el.nativeElement, + // autoFit: true, + // height, + // padding, + // theme + // })); + // chart.legend(false); + // chart.axis(false); + // chart.scale({ value: { max, min } }); + // chart.tooltip(false); + // chart.coordinate().transpose(); + // chart + // .interval() + // .position('1*value') + // .color('value', (val: number) => (val > 0 ? plusColor : minusColor)) + // .size(barSize) + // .label('value', () => ({ + // formatter: format, + // style: { + // ...textStyle + // } + // })); + // if (line) { + // chart.annotation().line({ + // start: ['50%', '0%'], + // end: ['50%', '100%'], + // style: { + // stroke: '#e8e8e8', + // lineDash: [0, 0] + // } + // }); + // } + // this.ready.next(chart); + // this.changeData(); + // chart.render(); } onlyChangeData = (changes: SimpleChanges): boolean => { diff --git a/packages/chart/tag-cloud/tag-cloud.component.ts b/packages/chart/tag-cloud/tag-cloud.component.ts index b7af6ef99d..c45db08d73 100644 --- a/packages/chart/tag-cloud/tag-cloud.component.ts +++ b/packages/chart/tag-cloud/tag-cloud.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core'; import { fromEvent, debounceTime, filter } from 'rxjs'; -import type { Chart, Event } from '@antv/g2'; +// import type { Chart, Event } from '@antv/g2'; import { G2BaseComponent } from '@delon/chart/core'; import { InputNumber, NumberInput } from '@delon/util/decorator'; @@ -40,118 +40,110 @@ export class G2TagCloudComponent extends G2BaseComponent { // #endregion - private initTagCloud(): void { - const winG2 = this.winG2; - winG2.registerShape('point', 'cloud', { - draw(cfg: NzSafeAny, container: NzSafeAny) { - const data = cfg.data as NzSafeAny; - const textShape = container.addShape({ - type: 'text', - name: 'tag-cloud-text', - attrs: { - ...cfg.style, - fontSize: data.size, - text: data.text, - textAlign: 'center', - fontFamily: data.font, - fill: cfg.color, - textBaseline: 'Alphabetic', - x: cfg.x, - y: cfg.y - } as NzSafeAny - }); - if (data.rotate) { - winG2.Util.rotate(textShape, (data.rotate * Math.PI) / 180); - } - return textShape; - } - }); - } + // private initTagCloud(): void { + // const winG2 = this.winG2; + // winG2.registerShape('point', 'cloud', { + // draw(cfg: NzSafeAny, container: NzSafeAny) { + // const data = cfg.data as NzSafeAny; + // const textShape = container.addShape({ + // type: 'text', + // name: 'tag-cloud-text', + // attrs: { + // ...cfg.style, + // fontSize: data.size, + // text: data.text, + // textAlign: 'center', + // fontFamily: data.font, + // fill: cfg.color, + // textBaseline: 'Alphabetic', + // x: cfg.x, + // y: cfg.y + // } as NzSafeAny + // }); + // if (data.rotate) { + // winG2.Util.rotate(textShape, (data.rotate * Math.PI) / 180); + // } + // return textShape; + // } + // }); + // } install(): void { - this.initTagCloud(); - - const { el, padding, theme } = this; - if (this.height === 0) { - this.height = this.el.nativeElement.clientHeight; - } - if (this.width === 0) { - this.width = this.el.nativeElement.clientWidth; - } - - const chart: Chart = (this._chart = new this.winG2.Chart({ - container: el.nativeElement, - autoFit: false, - padding, - height: this.height, - width: this.width, - theme - })); - chart.scale({ - x: { nice: false }, - y: { nice: false } - }); - chart.legend(false); - chart.axis(false); - chart.tooltip({ - showTitle: false, - showMarkers: false - }); - (chart.coordinate() as NzSafeAny).reflect(); - chart - .point() - .position('x*y') - .color('text') - .shape('cloud') - .state({ - active: { - style: { - fillOpacity: 0.4 - } - } - }); - chart.interaction('element-active'); - - chart.on('tag-cloud-text:click', (ev: Event) => { - this.ngZone.run(() => this.clickItem.emit({ item: ev.data?.data, ev })); - }); - - this.ready.next(chart); - - this.changeData(); - chart.render(); + // this.initTagCloud(); + // const { el, padding, theme } = this; + // if (this.height === 0) { + // this.height = this.el.nativeElement.clientHeight; + // } + // if (this.width === 0) { + // this.width = this.el.nativeElement.clientWidth; + // } + // const chart: Chart = (this._chart = new this.winG2.Chart({ + // container: el.nativeElement, + // autoFit: false, + // padding, + // height: this.height, + // width: this.width, + // theme + // })); + // chart.scale({ + // x: { nice: false }, + // y: { nice: false } + // }); + // chart.legend(false); + // chart.axis(false); + // chart.tooltip({ + // showTitle: false, + // showMarkers: false + // }); + // (chart.coordinate() as NzSafeAny).reflect(); + // chart + // .point() + // .position('x*y') + // .color('text') + // .shape('cloud') + // .state({ + // active: { + // style: { + // fillOpacity: 0.4 + // } + // } + // }); + // chart.interaction('element-active'); + // chart.on('tag-cloud-text:click', (ev: Event) => { + // this.ngZone.run(() => this.clickItem.emit({ item: ev.data?.data, ev })); + // }); + // this.ready.next(chart); + // this.changeData(); + // chart.render(); } changeData(): void { - const { _chart, data } = this; - if (!_chart || !Array.isArray(data) || data.length <= 0) return; - - const dv = new (window as NzSafeAny).DataSet.View().source(data); - const range = dv.range('value'); - const min = range[0]; - const max = range[1]; - - dv.transform({ - type: 'tag-cloud', - fields: ['name', 'value'], - // imageMask, - font: 'Verdana', - size: [this.width, this.height], // 宽高设置最好根据 imageMask 做调整 - padding: 0, - timeInterval: 5000, // max execute time - rotate() { - let random = ~~(Math.random() * 4) % 4; - if (random === 2) { - random = 0; - } - return random * 90; // 0, 90, 270 - }, - fontSize(d: NzSafeAny) { - return ((d.value - min) / (max - min)) * (32 - 8) + 8; - } - } as NzSafeAny); - - _chart.changeData(dv.rows); + // const { _chart, data } = this; + // if (!_chart || !Array.isArray(data) || data.length <= 0) return; + // const dv = new (window as NzSafeAny).DataSet.View().source(data); + // const range = dv.range('value'); + // const min = range[0]; + // const max = range[1]; + // dv.transform({ + // type: 'tag-cloud', + // fields: ['name', 'value'], + // // imageMask, + // font: 'Verdana', + // size: [this.width, this.height], // 宽高设置最好根据 imageMask 做调整 + // padding: 0, + // timeInterval: 5000, // max execute time + // rotate() { + // let random = ~~(Math.random() * 4) % 4; + // if (random === 2) { + // random = 0; + // } + // return random * 90; // 0, 90, 270 + // }, + // fontSize(d: NzSafeAny) { + // return ((d.value - min) / (max - min)) * (32 - 8) + 8; + // } + // } as NzSafeAny); + // _chart.changeData(dv.rows); } private installResizeEvent(): void { diff --git a/packages/chart/timeline/timeline.component.ts b/packages/chart/timeline/timeline.component.ts index ca255af377..1c94b85abe 100644 --- a/packages/chart/timeline/timeline.component.ts +++ b/packages/chart/timeline/timeline.component.ts @@ -9,11 +9,11 @@ import { ViewEncapsulation } from '@angular/core'; -import type { Chart, Event, Types } from '@antv/g2'; -import { format } from 'date-fns'; +// import type { Chart, Event, Types } from '@antv/g2'; +// import { format } from 'date-fns'; import { G2BaseComponent, G2Time } from '@delon/chart/core'; -import { toDate } from '@delon/util/date-time'; +// import { toDate } from '@delon/util/date-time'; import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; @@ -104,127 +104,113 @@ export class G2TimelineComponent extends G2BaseComponent { }; install(): void { - const { node, height, padding, slider, maxAxis, theme, maskSlider } = this; - const chart: Chart = (this._chart = new this.winG2.Chart({ - container: node.nativeElement, - autoFit: true, - height, - padding, - theme - })); - chart.axis('time', { title: null }); - chart.axis('y1', { title: null }); - for (let i = 2; i <= maxAxis; i++) { - chart.axis(`y${i}`, false); - } - - chart.line().position('time*y1'); - for (let i = 2; i <= maxAxis; i++) { - chart.line().position(`time*y${i}`); - } - - chart.tooltip({ - showCrosshairs: true, - shared: true - }); - - const sliderPadding = { ...[], ...padding }; - sliderPadding[0] = 0; - if (slider) { - chart.option('slider', { - height: 26, - start: 0, - end: 1, - trendCfg: { - isArea: false - }, - minLimit: 2, - formatter: (val: Date) => format(val, maskSlider) - }); - } - - chart.on(`plot:click`, (ev: Event) => { - const records = this._chart.getSnapRecords({ x: ev.x, y: ev.y }); - this.ngZone.run(() => this.clickItem.emit({ item: records[0]._origin, ev })); - }); - - chart.on(`legend-item:click`, (ev: Event) => { - const item = ev?.target?.get('delegateObject').item; - const id = item?.id; - const line = chart.geometries.find(w => w.getAttribute('position').getFields()[1] === id); - if (line) { - line.changeVisible(!item.unchecked); - } - }); - - this.ready.next(chart); - - this.changeData(); - - chart.render(); + // const { node, height, padding, slider, maxAxis, theme, maskSlider } = this; + // const chart: Chart = (this._chart = new this.winG2.Chart({ + // container: node.nativeElement, + // autoFit: true, + // height, + // padding, + // theme + // })); + // chart.axis('time', { title: null }); + // chart.axis('y1', { title: null }); + // for (let i = 2; i <= maxAxis; i++) { + // chart.axis(`y${i}`, false); + // } + // chart.line().position('time*y1'); + // for (let i = 2; i <= maxAxis; i++) { + // chart.line().position(`time*y${i}`); + // } + // chart.tooltip({ + // showCrosshairs: true, + // shared: true + // }); + // const sliderPadding = { ...[], ...padding }; + // sliderPadding[0] = 0; + // if (slider) { + // chart.option('slider', { + // height: 26, + // start: 0, + // end: 1, + // trendCfg: { + // isArea: false + // }, + // minLimit: 2, + // formatter: (val: Date) => format(val, maskSlider) + // }); + // } + // chart.on(`plot:click`, (ev: Event) => { + // const records = this._chart.getSnapRecords({ x: ev.x, y: ev.y }); + // this.ngZone.run(() => this.clickItem.emit({ item: records[0]._origin, ev })); + // }); + // chart.on(`legend-item:click`, (ev: Event) => { + // const item = ev?.target?.get('delegateObject').item; + // const id = item?.id; + // const line = chart.geometries.find(w => w.getAttribute('position').getFields()[1] === id); + // if (line) { + // line.changeVisible(!item.unchecked); + // } + // }); + // this.ready.next(chart); + // this.changeData(); + // chart.render(); } changeData(): void { - const { _chart, height, padding, mask, titleMap, position, colorMap, borderWidth, maxAxis } = this; - let data = [...this.data]; - if (!_chart || data.length <= 0) return; - - const arrAxis = [...Array(maxAxis)].map((_, index) => index + 1); - - _chart.legend({ - position, - custom: true, - items: arrAxis.map(id => { - const key = `y${id}`; - return { - id: key, - name: titleMap![key], - value: key, - marker: { style: { fill: colorMap[key] } } - } as Types.LegendItem; - }) - }); - - // border - _chart.geometries.forEach((v, idx: number) => { - v.color((colorMap as NzSafeAny)[`y${idx + 1}`]).size(borderWidth); - }); - _chart.height = height; - _chart.padding = padding; - - // 转换成日期类型 - data = data - .map(item => { - item.time = toDate(item.time!); - item._time = +item.time; - return item; - }) - .sort((a, b) => a._time - b._time); - - const max = Math.max(...arrAxis.map(id => [...data].sort((a, b) => b[`y${id}`] - a[`y${id}`])[0][`y${id}`])); - const scaleOptions: Record = {}; - arrAxis.forEach(id => { - const key = `y${id}`; - scaleOptions[key] = { - alias: titleMap![key], - max, - min: 0 - }; - }); - _chart.scale({ - time: { - type: 'time', - mask, - range: [0, 1] - }, - ...scaleOptions - }); - - const initialRange = { - start: data[0]._time, - end: data[data.length - 1]._time - }; - const filterData = data.filter(val => val._time >= initialRange.start && val._time <= initialRange.end); - _chart.changeData(filterData); + // const { _chart, height, padding, mask, titleMap, position, colorMap, borderWidth, maxAxis } = this; + // let data = [...this.data]; + // if (!_chart || data.length <= 0) return; + // const arrAxis = [...Array(maxAxis)].map((_, index) => index + 1); + // _chart.legend({ + // position, + // custom: true, + // items: arrAxis.map(id => { + // const key = `y${id}`; + // return { + // id: key, + // name: titleMap![key], + // value: key, + // marker: { style: { fill: colorMap[key] } } + // } as Types.LegendItem; + // }) + // }); + // // border + // _chart.geometries.forEach((v, idx: number) => { + // v.color((colorMap as NzSafeAny)[`y${idx + 1}`]).size(borderWidth); + // }); + // _chart.height = height; + // _chart.padding = padding; + // // 转换成日期类型 + // data = data + // .map(item => { + // item.time = toDate(item.time!); + // item._time = +item.time; + // return item; + // }) + // .sort((a, b) => a._time - b._time); + // const max = Math.max(...arrAxis.map(id => [...data].sort((a, b) => b[`y${id}`] - a[`y${id}`])[0][`y${id}`])); + // const scaleOptions: Record = {}; + // arrAxis.forEach(id => { + // const key = `y${id}`; + // scaleOptions[key] = { + // alias: titleMap![key], + // max, + // min: 0 + // }; + // }); + // _chart.scale({ + // time: { + // type: 'time', + // mask, + // range: [0, 1] + // }, + // ...scaleOptions + // }); + // const initialRange = { + // start: data[0]._time, + // end: data[data.length - 1]._time + // }; + // const filterData = data.filter(val => val._time >= initialRange.start && val._time <= initialRange.end); + // _chart.changeData(filterData); } }