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] // 圆心坐标[横坐标,纵坐标] right?: number | 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[] }