From 62f62ef5e58c196a39acb25f0723bc55a3d93ea5 Mon Sep 17 00:00:00 2001 From: peterlu14 Date: Fri, 3 Feb 2023 17:02:39 +0800 Subject: [PATCH] [update] add y-axis manager --- src/utils/chart/chart.ts | 8 ++- src/utils/chart/y-axis/yAxis.ts | 51 +++++++++++++++++ src/utils/chart/y-axis/yAxisManager.ts | 79 ++++++++++++++++++++++++++ 3 files changed, 136 insertions(+), 2 deletions(-) create mode 100644 src/utils/chart/y-axis/yAxis.ts create mode 100644 src/utils/chart/y-axis/yAxisManager.ts diff --git a/src/utils/chart/chart.ts b/src/utils/chart/chart.ts index 5d2abf7..576c083 100644 --- a/src/utils/chart/chart.ts +++ b/src/utils/chart/chart.ts @@ -7,6 +7,7 @@ import { GridManager } from './grid/gridManager' import { SeriesManager } from './series/seriesManager' import { XAxisManager } from './x-axis/xAxisManager' +import { YAxisManager } from './y-axis/yAxisManager' class Chart { // Core Option @@ -23,6 +24,7 @@ class Chart { // Core Manager Option gridManager: GridManager xAxisManager: XAxisManager + yAxisManager: YAxisManager seriesManager: SeriesManager // Custom Option @@ -32,6 +34,7 @@ class Chart { // custom option this.libraryMode = {} this.xAxisManager = new XAxisManager() + this.yAxisManager = new YAxisManager() this.seriesManager = new SeriesManager() this.gridManager = new GridManager() @@ -42,7 +45,7 @@ class Chart { } this.grid = this.gridManager.getGrid() this.xAxis = this.xAxisManager.getXAxis() - this.yAxis = { scale: true } + this.yAxis = this.yAxisManager.getYAxis() this.series = this.seriesManager.getSeries({}) this.dataZoom = [{ type: 'inside' }] this.toolbox = { @@ -68,11 +71,12 @@ class Chart { reset() { this.libraryMode = {} this.xAxisManager = new XAxisManager() + this.yAxisManager = new YAxisManager() this.seriesManager = new SeriesManager() this.gridManager = new GridManager() this.grid = this.gridManager.getGrid() this.xAxis = this.xAxisManager.getXAxis() - this.yAxis = { scale: true } + this.yAxis = this.yAxisManager.getYAxis() this.series = this.seriesManager.getSeries({}) } } diff --git a/src/utils/chart/y-axis/yAxis.ts b/src/utils/chart/y-axis/yAxis.ts new file mode 100644 index 0000000..0dff63d --- /dev/null +++ b/src/utils/chart/y-axis/yAxis.ts @@ -0,0 +1,51 @@ +import { YAXisComponentOption } from 'echarts' + +interface yAxisOption { + id?: string | number + show?: boolean + name?: string + type?: 'value' | 'category' | 'time' | 'log' + gridIndex?: number + boundaryGap?: [number | string, number | string] + splitNumber?: number + interval?: number + minInterval?: number + maxInterval?: number + alignTicks?: boolean + scale?: boolean + axisLine?: YAXisComponentOption['axisLine'] + axisTick?: YAXisComponentOption['axisTick'] + axisLabel: YAXisComponentOption['axisLabel'] + splitLine?: YAXisComponentOption['splitLine'] + min?: YAXisComponentOption['min'] + max?: YAXisComponentOption['max'] + unit: { text: string; scale: number; option: Record } +} + +interface yAxis extends yAxisOption {} +class yAxis { + constructor() { + // this.id = undefined + this.show = true + this.type = 'value' + this.name = '' + this.scale = true + this.gridIndex = 0 + this.axisLine = {} + this.axisLabel = { + formatter: (value: string) => `${Number(value) / this.unit.scale} ${this.unit.text}`, + } + this.axisTick = {} + this.splitLine = {} + this.boundaryGap = undefined + this.min = undefined + this.max = undefined + this.unit = { + text: '', + scale: 1, + option: {}, + } + } +} + +export { yAxis, yAxisOption } diff --git a/src/utils/chart/y-axis/yAxisManager.ts b/src/utils/chart/y-axis/yAxisManager.ts new file mode 100644 index 0000000..1c44fd6 --- /dev/null +++ b/src/utils/chart/y-axis/yAxisManager.ts @@ -0,0 +1,79 @@ +import { yAxis } from './yAxis' + +class YAxisManager { + children: yAxis[] + constructor() { + this.children = [] + this.children.push(new yAxis()) + } + + addYAxis() { + return + } + + getYAxis() { + return this.children + } + + switchYAxis(idxFrom: number, idxTo: number) { + const temp = this.children[idxTo] + this.children[idxTo] = this.children[idxFrom] + this.children[idxFrom] = temp + } + + delYAxis() { + return + } + + setName(name: string, idx = 0) { + this.children[idx].name = name + } + + setAxisLabel(inputOption: { text?: string; scale?: number; option: Record }, idx = 0) { + const { text, scale, option } = inputOption + const yAxis = this.children[idx] + + if (text) yAxis.unit.text = text + if (scale) yAxis.unit.scale = scale + if (option) yAxis.unit.option = option + } + + setBoundry(boundaryGap: [number | string, number | string], idx = 0) { + this.children[idx].boundaryGap = boundaryGap + } + + resetBoundry(idx = 0) { + this.children[idx].boundaryGap = undefined + } + + setMax(max: number | string, idx = 0) { + this.children[idx].max = max + } + + setMin(min: number | string, idx = 0) { + this.children[idx].min = min + } + + resetMinMax(idx = 0) { + this.children[idx].max = undefined + this.children[idx].min = undefined + } + + setInterval(interval: number, idx = 0) { + this.children[idx].interval = interval + } + + resetInterval(idx = 0) { + this.children[idx].interval = undefined + } + + setSplitNumber(splitNumber: number, idx = 0) { + this.children[idx].splitNumber = splitNumber + } + + getUnit(idx = 0) { + return this.children[idx].unit + } +} + +export { YAxisManager }