Newer
Older
smart-metering-front / src / components / Echart / echart-interface.ts
import type { LinearGradientObject } from 'echarts'
// 折线数据格式
export interface lineDataI {
  name: string // 轴线名称
  data: string[] | number[] // 数值
  color?: string // 颜色
}

// 饼图数据格式
export interface pieDataI {
  name: string // 分类名称
  value: number // 分类值
}
// 标题配置
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
    icon?: string // 图形样式
    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[] // 数值
    itemWidth?: number // 图例标记宽
    itemHeight?: number // 图例标记高
    itemStyle?: { // 图例标记样式
      decal?: 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
      }
    }
    formatter?: string
    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)中有效
  min?: number | string | Function
  max?: number | string | Function
  axisLine?: { // 坐标轴线
    show?: boolean
    lineStyle?: {
      color?: string // 轴线的颜色
      width?: number // 轴线宽度,默认1
    }
  }
  nameTextStyle?: { // 坐标轴名称的文字样式。
    color?: string
    fontSize?: number | string // 默认12
    verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
  }
  axisLabel?: { // 坐标轴刻度标签
    show?: boolean
    color?: string // X轴名称颜色
    fontSize?: number | string // 文字大小
    width?: number | string // 文本显示宽度
  }
  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)中有效
  min?: number | string | Function
  max?: number | string | Function
  axisLine?: { // 坐标轴线
    show?: boolean
    lineStyle?: {
      color?: string // 轴线的颜色
      width?: number // 轴线宽度,默认1
    }
  }
  nameTextStyle?: { // 坐标轴名称的文字样式。
    color?: string
    fontSize?: number | string // 默认12
    verticalAlign: 'auto' | 'top' | 'middle' | 'bottom' // 文字垂直对齐方式
  }
  axisLabel?: { // 坐标轴刻度标签
    show?: boolean
    color?: string // X轴名称颜色
    fontSize?: number | string // 文字大小
    width?: number | string // 文本显示宽度
  }
  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
  }
}

// 折线series配置项
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[]
}
// 饼图series配置项
export interface pieSeriesOption {
  name?: string // 系列名称
  type: 'pie'
  animationType?: string// 沿圆弧展开效果 expansion|scale
  avoidLabelOverlap?: boolean // 是否启用防止标签重叠策略
  roseType?: string | boolean // 玫瑰图类型
  radius?: string[] // 饼图的半径[内半径,外半径]
  center?: [string, string] // 圆心坐标[横坐标,纵坐标]
  startAngle?: number // 开始的角度 //起始角度,支持范围[0, 360]。
  label?: { // 饼图图形上的文本标签
    show?: boolean // 是否显示
    position?: string // 标签位置
    fontSize?: number // 文字大小,默认12
    fontWeight?: string // 文字粗细
    lineHeight?: number // 行高
    formatter?: string | Function // 标签内容格式器
    rich?: object // 富文本样式
    emphasis?: { // 高亮状态的扇区和标签样式
      show?: boolean
      textStyle: {
        color?: string
        fontSize?: number
        fontWeight?: string
      }
    }
  }
  labelLine?: { // 视觉引导线
    show?: boolean
  }
  data: pieDataI[]
}
// 柱状图series配置项
export interface barSeriesOption {
  name?: string // 系列名称
  type: 'bar'
  barCategoryGap?: string // 同一系列柱间距离,默认20%
  baryGap?: string // 不同系列的柱间距离,默认30%
  barWidth?: string | number // 柱条宽度,不设自适应
  colorBy: string // 调色盘取色策略: series按照系列,data按照数据项
  itemStyle?: { // 柱子样式
    color?: string | LinearGradientObject | Function // 图形的颜色
    borderColor?: string // 图形的描边颜色
    borderWidth?: number // 描边线宽。默认0,无描边。
    borderRadius?: number | number[] // 柱条圆角半径 统一设置四个角圆角大小,或依次设置(顺时针左上,右上,右下,左下)
    shadowBlur?: number // 图形阴影的模糊大小
    shadowColor?: string // 阴影颜色
    shadowOffsetX?: number // 阴影水平方向的偏移距离
    shadowOffsetY?: number // 阴影垂直方向的偏移距离
    opacity?: number // 图形透明度
  }
  showBackground?: boolean
  backgroundStyle: { // 柱条背景样式
    color?: string // 背景颜色
    borderRadius?: number | number[] // 柱条圆角半径 统一设置四个角圆角大小,或依次设置(顺时针左上,右上,右下,左下)
  }
  label: { // 图形上的文本标签
    normal: {
      show?: boolean // 是否显示标签
      color?: string // 标签文字颜色
      position?: string | [number | string, number | string] // 标签文字位置:top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight
      fontSize?: string | number // 标签文字大小
      align?: string // 文字水平对齐方式
      verticalAlign?: string // 文字垂直对齐方向
      formatter: string | Function // 标签内容格式器
    }
  }
  data: number[] | string[]
}
// 折线图配置项
export interface lineOption extends titleOption, gridOption, legendOption, tooltipOption {
  xAxis: xAxisOption | xAxisOption[]
  yAxis: yAxisOption | yAxisOption[]
  series: lineSeriesOption[]
}
// 饼图配置项
export interface pieOption extends titleOption, gridOption, legendOption, tooltipOption {
  color?: string[]
  series: pieSeriesOption[]
}
// 柱状图配置项
export interface barOption extends titleOption, gridOption, legendOption, tooltipOption {
  xAxis: xAxisOption | xAxisOption[]
  yAxis: yAxisOption | yAxisOption[]
  series: barSeriesOption[]
}