[update] chart init & series data api init

src/utils/chart/DataZoom/InsideDataZoom.ts

@@ -0,0 +1,6 @@
+import { InsideDataZoomComponentOption } from 'echarts'
+
+interface InsideDataZoomOption {
+  type?: 'inside'
+  filterMode?: InsideDataZoomComponentOption['filterMode']
+}

src/utils/chart/Grid/grid.ts

@@ -0,0 +1,24 @@
+interface GridOption {
+  id?: number
+  show: boolean
+  width?: number
+  height?: string
+  top?: string
+  bottom?: string
+  left?: string
+  right?: string
+}
+
+interface Grid extends GridOption {}
+class Grid {
+  constructor(index: number, length: number) {
+    this.id = undefined
+    this.show = true
+    this.height = 80 + '%'
+    this.top = index * (80 / length) + 5 + '%'
+    this.left = '10%'
+    this.right = '10%'
+  }
+}
+
+export { Grid, GridOption }

src/utils/chart/Grid/gridManager.ts

@@ -0,0 +1,30 @@
+import { LineSeriesOption } from 'echarts'
+import { Grid, GridOption } from './grid'
+
+class GridManager {
+  private children: Array<GridOption>
+
+  constructor() {
+    this.children = []
+    this.appendGrid()
+  }
+
+  private appendGrid() {
+    const newGrid = new Grid(this.children.length, this.children.length + 1)
+    this.children.push(newGrid)
+  }
+
+  private delGrid(idx?: number) {
+    if (idx) {
+      this.children.splice(idx, 1)
+    } else {
+      this.children.length = 0
+    }
+  }
+
+  getGrid() {
+    return this.children
+  }
+}
+
+export { GridManager }

src/utils/chart/Series/index.d.ts

@@ -0,0 +1,13 @@
+type seriesOption = {
+  id?: string
+  name?: string
+  xAxisIndex?: number
+  yAxisIndex?: number
+  showSymbol?: boolean
+}
+
+type seriesTarget = {
+  id?: string
+  name?: string
+  index?: number
+}

src/utils/chart/Series/series.ts

@@ -0,0 +1,21 @@
+import { LineSeriesOption } from 'echarts'
+
+interface Series extends LineSeriesOption {}
+class Series {
+  constructor({ id, name }: LineSeriesOption = {}) {
+    this.id = id
+    this.name = name
+    this.type = 'line'
+    this.showSymbol = false
+    this.data = []
+    this.silent = false
+    this.animation = false
+    this.markLine = {}
+  }
+
+  setOption(options: seriesOption) {
+    Object.assign(this, options)
+  }
+}
+
+export default Series

src/utils/chart/Series/seriesManager.ts

@@ -0,0 +1,50 @@
+import Series from './series'
+
+class SeriesManager {
+  children: Series[]
+
+  constructor() {
+    this.children = []
+  }
+
+  addSeries(option: seriesOption) {
+    const newSeries = new Series(option)
+    this.children.push(newSeries)
+  }
+
+  getSeries(target: seriesTarget): Series | Series[] {
+    console.log('target', target)
+    const idx = this.findSeries(target)
+    console.log('idx', idx)
+    if (idx !== undefined) {
+      return this.children[idx]
+    }
+    return this.children
+  }
+
+  findSeries(target: seriesTarget): number | undefined {
+    const { id, name, index } = target
+    if (id || name) {
+      return this.children.findIndex((ele) => ele.id === id || ele.name === name)
+    }
+    return index
+  }
+
+  setSeries(target: seriesTarget, option: seriesOption) {
+    const idx = this.findSeries(target)
+    if (idx !== undefined) {
+      this.children[idx].setOption(option)
+    }
+  }
+
+  delSeries(target: seriesTarget) {
+    const deleteIdx = this.findSeries(target)
+    if (deleteIdx) {
+      this.children.splice(deleteIdx, 1)
+      return true
+    }
+    this.children.length = 0
+  }
+}
+
+export { SeriesManager }

src/utils/chart/chart.ts

@@ -0,0 +1,34 @@
+// import { Legend, LegendOption } from './legend'
+// import { Tooltip } from './tooltip'
+// import { GridManager } from './Grid/gridManager'
+// import { xAxis, xAxisOption } from './xAxis'
+// import { yAxis, yAxisOption } from './yAxis'
+// import { DataZoom } from './dataZoom'
+import { SeriesManager } from './Series/seriesManager'
+
+class Chart {
+  title: any
+  xAxis: any
+  yAxis: any
+  legend: any
+  // tooltip: any
+  // grid: any
+  // dataZoom: any
+  seriesManager: SeriesManager
+  series: any
+  // gridManager: GridManager
+  constructor() {
+    this.title = { text: 'Gradient along the y axis' }
+    this.seriesManager = new SeriesManager()
+    // this.gridManager = new GridManager()
+    this.legend = {}
+    // this.tooltip = new Tooltip()
+    this.xAxis = {}
+    this.yAxis = {}
+    // this.grid = this.gridManager.getGrid()
+    this.series = this.seriesManager.getSeries({})
+    // this.dataZoom = [{}]
+  }
+}
+
+export default Chart

src/utils/chart/formatter.ts

@@ -0,0 +1,3 @@
+class formatter {}
+
+export { formatter }

src/utils/chart/legend.ts

@@ -0,0 +1,14 @@
+import { LegendComponentOption } from 'echarts'
+
+interface LegendOption {
+  show?: LegendComponentOption['show']
+}
+
+interface Legend extends LegendOption {}
+class Legend {
+  constructor() {
+    this.show = true
+  }
+}
+
+export { Legend, LegendOption }

src/utils/chart/tooltip.ts

@@ -0,0 +1,3 @@
+class Tooltip {}
+
+export { Tooltip }

src/utils/chart/xAxis.ts

@@ -0,0 +1,32 @@
+import { XAXisComponentOption } from 'echarts'
+
+interface xAxisOption {
+  id?: XAXisComponentOption['id']
+  show?: XAXisComponentOption['show']
+  type?: XAXisComponentOption['type']
+  gridIndex?: XAXisComponentOption['gridIndex']
+  axisLine?: XAXisComponentOption['axisLabel']
+  axisTick?: XAXisComponentOption['axisTick']
+  axisLabel?: XAXisComponentOption['axisLabel']
+  splitLine?: XAXisComponentOption['splitLine']
+  min?: XAXisComponentOption['min']
+  max?: XAXisComponentOption['max']
+}
+
+interface xAxis extends xAxisOption {}
+class xAxis {
+  constructor() {
+    // this.id = undefined
+    this.show = true
+    this.type = 'value'
+    this.gridIndex = 0
+    this.axisLine = {}
+    this.axisLabel = {}
+    this.axisTick = {}
+    this.splitLine = {}
+    // this.min = undefined
+    // this.max = undefined
+  }
+}
+
+export { xAxis, xAxisOption }

src/utils/chart/yAxis.ts

@@ -0,0 +1,32 @@
+import { YAXisComponentOption } from 'echarts'
+
+interface yAxisOption {
+  id?: YAXisComponentOption['id']
+  show?: YAXisComponentOption['show']
+  type?: YAXisComponentOption['type']
+  gridIndex?: YAXisComponentOption['gridIndex']
+  axisLine?: YAXisComponentOption['axisLabel']
+  axisTick?: YAXisComponentOption['axisTick']
+  axisLabel?: YAXisComponentOption['axisLabel']
+  splitLine?: YAXisComponentOption['splitLine']
+  min?: YAXisComponentOption['min']
+  max?: YAXisComponentOption['max']
+}
+
+interface yAxis extends yAxisOption {}
+class yAxis {
+  constructor() {
+    // this.id = undefined
+    this.show = true
+    this.type = 'value'
+    this.gridIndex = 0
+    this.axisLine = {}
+    this.axisLabel = {}
+    this.axisTick = {}
+    this.splitLine = {}
+    // this.min = undefined
+    // this.max = undefined
+  }
+}
+
+export { yAxis, yAxisOption }