thsc-datav-standard-chart

/** 配置项声明 */ import { type EChartsOption, type ItemStyle, type AnimationConfigs } from 'echarts'; import type { DvMarkerAnimationCfg, DvMarkerData, DvMarkerItemStyle, MarkerType } from '../model/series/dvMarkerSeries/type'; import { type ItemConfig as DvScatterItemConfig } from '../model/series/dvScatter/type'; export type ExtendBarSeries = { type: 'bar'; /** 动态柱状图值的键名，默认是value。一般在双柱图中需要指定值的键名 */ dvValueKey?: string; /** * 最多显示的label数量 * * - 当前实现仅考虑了单柱图 */ dvMaxLabelCount?: number; /** 废弃使用dvSortType 动态柱状图是否升序 */ dvSortByAsc?: boolean; /** 废弃动态柱状图排序类型 */ /** 默认降序排，如需升序，建议使用yAxis.inverse */ dvSortType?: 'desc' | 'asc'; /** 用于排序的字段名称，不传默认是value */ dvSortKey?: string; label: { /** 标签放置在正负值方向的位置上 */ dvPosition: 'valueDirection' | 'adaptBarWidth'; dvInsideColor?: string; dvOutsideColor?: string; }; }; export type ExtendLineSeries = { type: 'line'; dvShowBreathPoint?: boolean; /** 高亮symbol点的填充色 */ dvEmphasisSymbolFill?: string; /** 最多显示的label数量 */ dvMaxLabelCount?: number; /** 折线点的密度的临界值，目前用于显示/隐藏折线节点 */ dvShowSymbolStrategy?: number; endLabel?: { /** 扩展echarts的能力原生echarts不支持单独给endLabel设置z层级 */ dvZ?: number; /** 是否跟据折线第一、二两点自动计算末尾标签旋转角度 */ dvRotate?: 'auto'; }; /** 普通状态symbol点的线宽 */ dvSymbolLineWidth?: number; /** 高亮状态symbol点的线宽 */ emphasis: { dvSymbolLineWidth?: number; }; }; export interface DvScatterOption { type: 'dvScatter'; dvSymbol?: 'circle'; dvSymbolSize?: [number, number] | number; dvItemStyle?: ItemStyle[]; dvItemConfig?: DvScatterItemConfig; dvAnimationConfig?: AnimationConfigs; dvRValueRange?: [number, number]; labelLayout?: { dvAutoLayout?: boolean; }; dvKeepHighlight?: boolean; dvMultipleSelect?: boolean; dvNearSearch?: { enable: boolean; trigger?: 'mousemove' | 'click' | 'all'; }; dvAutoHide?: { enable: boolean; delay?: number; }; } export type ExtendTreemapSeries = { type: 'treemap'; /** 设置最小比例的图形，小于该比例按该比例展示 */ dvMinPercent?: number; /** * label 的展示类型，具体效果参照demo * * - twoLineBasic * - twoLineCenter * - staticCenter */ dvLabelType?: string; /** 适用于带下钻的矩形树图，下钻后展示label的动画时间 */ dvLabelShowTimer?: number; /** label标签的最小字号，比例行高，value字号校准（小数点和一些字符会导致计算异常），具体用法参照demo，依赖dvLabelType，formatter */ label: { rich: { [key: string]: { dvMinFontSize: number; dvLineHeight: number; dvValueFontDeviation: number; }; }; }; }; export type ExtendSankeySeries = { type: 'sankey'; dvLayout?: string; dvRootHeight?: number; data?: [ { compare: number; num: number | string; root: boolean; } ]; }; export type ExtendVoronoiSeries = { type: 'custom'; dvType?: string; data?: [ { index: number; weight: number | string; } ]; }; export interface DvMarkerOption { type: 'dvMarker'; dvMarkType?: MarkerType; data: DvMarkerData; dvItemStyle?: DvMarkerItemStyle; dvAnimationConfig?: DvMarkerAnimationCfg; } export type ExtendSeries = ExtendBarSeries | ExtendLineSeries | DvScatterOption | DvMarkerOption | ExtendTreemapSeries | ExtendSankeySeries | ExtendVoronoiSeries; /** * 扩展配置项 * * ! 所有扩展配置项以 dv 前缀命名 */ export type ExtendOption = { yAxis: { /** 分割线的条数，需大于 1 */ dvSplitLineNumber?: number; /** 多根轴的 0 刻度对齐，需要同时配置 dvSplitLineNumber 和 scale = false 和 alignTicks = true 时有效 */ dvAlignZeroTick?: boolean; /** boundaryGap 配置包含 0 刻度 */ dvBoundaryGapContainZeroTick?: boolean; axisLabel: { /** 使轴线两端的刻度标签偏移到内侧对齐轴边缘 */ dvAlignEdge?: boolean; }; splitLine: { /** 设置y轴分割线的单独层级，优先级大于yAxis.z/z2/zlevel */ dvZ: number; }; /** 轴的两侧内边距 */ dvPadding?: [number, number]; axisPointer?: { shadowStyle?: { /** 设置axisPointer的最大宽度，仅对type: 'shadow'类型有效 */ dvMaxWidth?: number | string; }; }; }; xAxis: { axisLabel: { /** x轴标签最少展示几个 */ dvLayout?: number; /** 在设置了x轴标签最少展示几个后，设置x轴最多展示几个标签 */ dvLayoutTakeEffectGreaterThan?: number | 'auto'; /** 使轴线两端的刻度标签偏移到内侧对齐轴边缘 */ dvAlignEdge?: boolean; /** * pc端范式x轴布局 * 范式要求x轴刻度之间至少保持16px的间隔 * 若间隔小于16px，则隐藏第偶数个刻度 * 若隐藏刻度后间隔仍然小于16px，则继续执行隐藏逻辑知道间隔大于等于16px * * - 设置了 `xAxis.axisLabel.interval` 配置项时该配置项无效 */ dvIntervalStrategy: 'gt16'; }; /** 轴的两侧内边距 */ dvPadding?: [number, number]; axisPointer?: { shadowStyle?: { /** 设置axisPointer的最大宽度，仅对type: 'shadow'类型有效 */ dvMaxWidth?: number | string; }; }; /** * 设置坐标轴名称显示位置，以解决0轴位于图表中间时，轴标题位置跟随0轴的问题 * 参数值同axis.nameLocation * 仅针对X轴生效，Y轴无需该效果 */ dvNameLocation?: string; }; /** * @todo * dataZoom.dvHandleOffset: [number, number] 调整滑块两侧的边距，在option中不好定义， * dataZoom.dvMoveHandleOffset: number 偏移中间移动手柄的交互热区，在option中不好定义， * 先写在这里注释 */ tooltip: { /** 移动端交互中，手指离开屏幕后，是否自动隐藏 */ dvAutoHide?: boolean; }; axisPointer: { /** 隐藏的延迟时间（当前只与 dvAutoHide 一起用） */ dvHideDelay?: number; /** 移动端交互中，手指离开屏幕后，是否自动隐藏 */ dvAutoHide?: boolean; /** 仅在图表有渲染内容时才触发显示 */ dvShowOnlyWhenRenderingContent?: boolean; /** 移动端交互中，在grid中触发axisPointer后不松手，继续滑到图表外依然可以操作axisPointer */ dvShowOutOfGrid?: boolean; /** 是否开启：已触发axisPointer后，再次点击grid，axisPointer消失 */ dvHideWhenClickInGrid?: boolean; shadowStyle?: { /** 设置axisPointer的最大宽度，仅对type: 'shadow'类型有效 */ dvMaxWidth?: number | string; }; }; series: ExtendSeries | ExtendSeries[]; /** * 交互处理配置 */ dvInteraction?: { /** * 默认会支持图表所在页面的滚动交互检测 * * * 由于实现方案是利用延迟判断是否触发图表内交互，在一些全屏场景下延迟带来的体验不好，所以可以安全的关闭对页面滚动的交互支持 */ disablePageScroll?: boolean; /** * 开启页面横向滚动检测 * * - disablePageScroll 不为 true 时才有效 * - 横向滑动默认是检测 dataZoom.inside 交互，所以开启此选项会导致 dataZoom.inside 交互失效 */ enablePageScrollX?: boolean; }; /** * 自定义水印位置和主题 */ dvWaterMark?: { show: boolean; left?: number | string; right?: number | string; top?: number | string; bottom?: number | string; style?: { image?: string; height?: number; width?: number; }; }; }; export type Option = EChartsOption & ExtendOption;