Newer
Older
SpaceIntegration_front / src / components / Echart / echart-interface.ts
import type { LinearGradientObject } from 'echarts'
export interface lineDataI {
  name: string // 轴线名称
  data: string[] | number[] // 数值
  color?: string // 颜色
}
// 标题配置
export interface titleOption {
  title?: {
    show?: boolean // 是否显示标题
    left?: number | string // 上边距
    right?: number | string // 右边距
    bottom?: number | string // 下边距
    top?: number | string // 顶部边距
    text: string // 标题
  }
}

// 网格配置
export interface gridOption {
  grid?: {
    show?: boolean // 是否显示直角坐标系网格
    left?: number | string // 上边距
    right?: number | string // 右边距
    bottom?: number | string // 下边距
    top?: number | string // 顶部边距
    containLabel?: boolean // grid区域是否包含坐标轴的刻度标签
  }
}
// 图例
export interface legendOption {
  legend?: {
    show?: boolean
    orient?: string // 图例方向
    align?: string // 图例标记和文本的对齐,默认自动
    left?: number | string // 上边距
    right?: number | string // 右边距
    bottom?: number | string // 下边距
    top?: number | string // 顶部边距
    padding?: number | [number, number] | [number, number, number, number] // 内边距
    data?: string[]
  }
}
// 提示框
export interface tooltipOption {
  tooltip: {
    show?: boolean
    trigger: 'axis' | 'item' | 'none' // 触发类型
    textStyle: { // 浮层的文本样式
      color?: string // 文字颜色,默认白色
      fontSize?: number // 文字大小, 默认14
    }
    axisPointer: { // 坐标轴指示器
      type: 'cross' | 'line' | 'shadow' | 'none'
      label: {
        show?: boolean // axisPointer为cross时默认显示,其他默认不显示
        fontSize?: number // 文字大小,默认14
      }
    }
    valueFormatter: (value: number | string) => string // 数值显示部分格式化回调函数
  }
}

// x轴
export interface xAxisOption {
  type: string // 'category' | 'value' | 'time' | 'log'
  name?: string
  boundaryGap?: boolean | string[]
  data?: Array<string | Object> // 类目数据,在类目轴(type=category)中有效
  axisLine?: { // 坐标轴线
    show?: boolean
    lineStyle?: {
      color?: string // 轴线的颜色
      width?: number // 轴线宽度,默认1
    }
  }
  nameTextStyle?: { // 坐标轴名称的文字样式。
    color?: string
    fontSize?: number // 默认12
    verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
  }
  axisLabel?: { // 坐标轴刻度标签
    color?: string // X轴名称颜色
    fontSize?: number //
  }
  splitLine: { // 坐标轴在 grid 区域中的分隔线
    show: boolean
    interval?: string | number | ((index: number, value: string) => boolean) // 坐标轴分隔线的显示间隔
    lineStyle?: {
      color?: string | Array<string>
      type?: string // 'dashed' | 'solid' | 'dotted'
      shadowBlur?: number // 图形阴影的模糊大小
      shadowColor?: string // 阴影颜色
      shadowOffsetX?: number // 阴影水平方向的偏移距离
      shadowOffsetY?: number // 阴影垂直方向的偏移距离
    }
    opacity?: number // 透明度,默认1
  }
}

// Y轴
export interface yAxisOption {
  type: string // 'category' | 'value' | 'time' | 'log'
  name?: string
  boundaryGap?: boolean | string[]
  data?: Array<string | Object> // 类目数据,在类目轴(type=category)中有效
  axisLine?: { // 坐标轴线
    show?: boolean
    lineStyle?: {
      color?: string // 轴线的颜色
      width?: number // 轴线宽度,默认1
    }
  }
  nameTextStyle?: { // 坐标轴名称的文字样式。
    color?: string
    fontSize?: number // 默认12
    verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
  }
  axisLabel?: { // 坐标轴刻度标签
    color?: string // X轴名称颜色
    fontSize?: number //
  }
  splitLine: { // 坐标轴在 grid 区域中的分隔线
    show?: boolean
    interval?: string | number | ((index: number, value: string) => boolean) // 坐标轴分隔线的显示间隔
    lineStyle: {
      color?: string | Array<string>
      type?: string // 'dashed' | 'solid' | 'dotted'
      shadowBlur?: number // 图形阴影的模糊大小
      shadowColor?: string // 阴影颜色
      shadowOffsetX?: number // 阴影水平方向的偏移距离
      shadowOffsetY?: number // 阴影垂直方向的偏移距离
    }
    opacity?: number // 透明度,默认1
  }
}

export interface lineSeriesOption {
  name?: string // 系列名称
  type: 'line'
  symbol?: string | Function // 标记的图形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
  smooth?: boolean // 曲线平滑设置, 默认false
  itemStyle?: { // 折线拐点样式
    color?: string // 图形的颜色
    borderColor?: string // 图形的描边颜色
    borderWidth?: number // 描边线宽。默认0,无描边。
    shadowBlur?: number // 图形阴影的模糊大小
    shadowColor?: string // 阴影颜色
    shadowOffsetX?: number // 阴影水平方向的偏移距离
    shadowOffsetY?: number // 阴影垂直方向的偏移距离
  }
  lineStyle?: { // 线条样式
    width: number // 线条宽度,默认2
    color?: string // 线条颜色, 默认#000
    type?: 'solid' | 'dashed' | 'dotted' // 默认solid
  }
  areaStyle?: { // 区域填充样式
    color?: string | LinearGradientObject // 填充颜色
  }
  data: number[] | string[]
}

// 折线图配置项
export interface lineOption extends titleOption, gridOption, legendOption, tooltipOption {
  xAxis: xAxisOption | xAxisOption[]
  yAxis: yAxisOption | yAxisOption[]
  series: lineSeriesOption[]
}