vue-echarts-linkage

import { EChartsOption, TooltipComponentOption, GraphicComponentOption } from '../my-echarts/index'; import { GraphicLocationInfoType, VisualMapSeriesType, MarkLineDataType, SeriesDataType, SegementType, ThemeType, SeriesType, OneDataType, ExtraTooltipType, EnlargeShrinkType } from '../../components/echarts-linkage/types/index'; /** * @description 图表数据类型 * @param type 图表类型, maybe 'line' or 'bar', default is 'line' * @param name 图表名称 * @param smooth 是否平滑曲线 * @param seriesData 数据系列 * @param xAxisName x轴名称 * @param yAxisName y轴名称 * @param yAxisShow y轴是否显示 * @param yAxisMin y轴下限 * @param yAxisMax y轴上限 * @param seriesShow series是否显示 * @param seriesYAxisIndex series的y轴索引 * @param visualMapSeries 视觉映射系列 * @param dataType series数据类型 * @param seriesLinkMode 是否为连接模式 */ export type SeriesOptionType = { type?: 'line' | 'bar'; name?: string; smooth?: true; seriesData: SeriesDataType; seriesDataCache: SeriesDataType; xAxisName?: string; yAxisName?: string; yAxisShow?: boolean; yAxisMin?: number; yAxisMax?: number; seriesShow?: boolean; seriesYAxisIndex?: number; visualMapSeries?: VisualMapSeriesType; dataType: SeriesType; seriesLinkMode?: boolean; }; /** * @param {Array<Array<number>>} originData - 原始数据 * @param {ThemeType} theme - 主题 * @param {number} segment - 图表分段数 * @param {Array<string>} colors - 颜色数组 * @param {boolean} useMergedLegend - 是否使用合并图例 * @param {boolean} useSeriesDataSetYAxisMinMax - 是否使用series数据来设置对应Y轴的上下限 */ export type EchartsLinkageModelType = { seriesOptionArray: Array<SeriesOptionType>; theme: ThemeType; segment?: SegementType; echartsColors?: Array<string>; useMergedLegend?: boolean; useSeriesDataSetYAxisMinMax: boolean; extraTooltip?: ExtraTooltipType; enlargeShrink?: EnlargeShrinkType; }; export declare class EchartsLinkageModel { private seriesOptionArray; private segment; private theme; private enlargeShrink; private swichThemeIcon; private xAxisInterval; private offsetNum; private gridLeftInit; private gridTopInit; private echartsColors; private legendShow; private extraTootip; private xAxisData; private usedStandards; private lineSeriesMarkLineTemplate; private resultOption; constructor(param: EchartsLinkageModelType); init: () => void; setLenged: () => void; /** * @description 设置x轴刻度标签显示间隔 * egment值300，表示间隔300，效果应该是0,300,600,...,； * 但在echarts中的含义其实是interval为299，表示『隔299个标签显示一个标签』； * 也就是说，间隔300，实际上interval为299。 * @returns {number | boolean} x轴刻度标签显示间隔 */ setXAxisInterval: () => number | boolean; setXAxisData: () => string[]; initOptionTemplate: () => void; /** * @description 根据series数据，自定义Y轴最小值和最大值 --- 暂未使用，使用echarts自身的优化算法来自动设置 * @returns this 链式调用 */ customYAxisMinMax: () => this; setYAxis: () => void; setToolTip: () => void; setBaseLineOnToolTip: (tooltip: TooltipComponentOption) => void; setThemeButtonIcon: () => this; /** * @description 根据主题设置所有颜色，主要是坐标轴相关的颜色 * @param option 配置项 * @param swichThemeIcon 切换图标 */ setOptionColorsByTheme: (option: any, swichThemeIcon: string) => void; setEnlargeShrinkButtonIcon: () => this; setResultOption: () => void; /** * @description 添加自定义标记线 * @param markLineArray 自定义标记线数组 * @returns this 链式调用 */ addCustomSeriesMarkLine: (markLineArray: MarkLineDataType) => this; /** * @description 清除所有自定义标记线 * @returns this 链式调用 */ clearCustomSeriesMarkLine: () => this; /** * @description 设置自定义标记线 * 根据yAxis的show值，如果show是true，则显示该系列的markLine，否则不显示； * 同时也考虑到重复的markLine，如果有重复的，则只显示第一个重复的 * @returns this 链式调用 */ setCustomSeriesMarkLine: (data: Array<OneDataType>) => this; /** * @description 设置自定义视觉映射 * @param visualMapSreies 自定义视觉映射例如：[ {min: 0, max: 100, color: 'green'}, {min: 100, max: 200, color: 'yellow'} ] * @returns this 链式调用 */ setVisualMap: () => this; /** * @description 设置echarts实例的myDeleteButton按钮的点击事件 * @param callback myDeleteButton按钮的自定义点击事件回调函数 * @returns this 链式调用 */ setMyDeleteButton: (callback: Function) => this; /** * @description 重写echarts实例的SaveAsImage按钮的点击事件 * @param callback SaveAsImage按钮的自定义点击事件回调函数 * @returns this 链式调用 */ setSaveAsImageClickEvent: (callback: Function) => this; /** * @description 设置echarts实例的myThemeButton按钮的点击事件 * @param callback myThemeButton按钮的自定义点击事件回调函数 * @returns this 链式调用 */ setMyThemeButtonClickEvent: (callback: Function) => this; /** * @description 设置echarts实例的放缩按钮的点击事件 * @param callback 放缩按钮的自定义点击事件回调函数 * @returns this 链式调用 */ setMyEnlargeShrinkButtonClickEvent: (callback: Function) => this; /** * @description 设置echarts实例的myExcelView按钮的点击事件 * @param callback myExcelView按钮的自定义点击事件回调函数 * @returns this 链式调用 */ setMyExcelViewClickEvent: (callback: Function) => this; /** * 设置toolbox中相关工具的title语言类型 * @param lang 语言类型，zh-cn | en (中文 | 英文)，默认中文 * @returns this 链式调用 */ setLanguage: (lang: 'zh-cn' | 'en') => this; /** * @description 统一设置所有echarts实例grid的left值对齐 * 当前echarts中没有Y轴显示时，grid的left值设置默认值，无需对齐 * 最大显示数量maxShowYCount为0时，grid的left值设置默认值，无需对齐 * 其他情况，grid的left值设置：默认值 + 最大显示数量-1的偏移量 * @param maxShowYCount 各个图表中Y轴的最大显示数量 * @returns this 链式调用 */ setGridLeftAlign: (maxShowYCount: number) => this; /** * @description 统一设置所有echarts实例的Y轴的显示 * @param myChart echarts实例 * @param graphics 图形元素数组 * @param onPointDragging 自定义图形元素拖拽事件回调函数 * @returns 图形元素数组信息 Array<GraphicLocationInfoType> */ setGraphic: (myChart: any, graphics: Array<GraphicLocationInfoType> | undefined, onPointDragging: Function) => Array<GraphicLocationInfoType>; setMyGraphic: (myChart: any, xAxisSeq: number, option: GraphicComponentOption) => void; /** * 设置背景色 * @param color 背景色 * @returns */ setBackgroundColor: (color: string) => this; /** * @description 获取graphic 矩形图形模板 * @param myChart echarts实例 * @param graphicId 图形元素id * @param xAxisSeq 图形元素x轴坐标序号：从0开始 * @param graphicXAxisX 图形元素x轴坐标：不定，可能是数值可能是时间等等 * @returns */ getGraphicRectTemplate: (myChart: any, graphicId: string, xAxisSeq: number, graphicXAxisX: string) => { id: string; type: string; top: number; z: number; shape: { width: number; height: number; }; position: any[]; draggable: string; info: string; textContent: { type: string; style: { text: string; font: string; }; }; textConfig: { position: string; offset: number[]; }; style: { fill: string; stroke: string; lineWidth: number; }; cursor: string; }; getGraphicRectTemplate_1: (myChart: any, xAxisSeq: number) => { id: string; type: string; top: number; z: number; shape: { width: number; height: number; }; position: number[]; draggable: string; info: string; textContent: { type: string; style: { text: string; font: string; }; }; textConfig: { position: string; offset: number[]; }; style: { fill: string; stroke: string; lineWidth: number; }; cursor: string; }; /** * @description 计算两个graphic矩形的坐标信息: 当前拖拽的图形的左侧位置和在X轴上的坐标值、未拖动的图形的左侧位置和在X轴上的坐标值 * @param positionX 当前拖拽线条的X值,距离echarts左侧边框距离（包含grid） * @param myChart echarts实例 * @param currentDragGraphicId 当前拖拽的图形的id * @param notDragGraphicId 未拖动的图形的id * @returns */ computedTwoGraphicRect: (positionX: number, myChart: any, currentDragGraphicId: string) => GraphicLocationInfoType; /** * @description 设置字体大小和其他自适应 * @param myChart echarts实例 * @returns this 链式调用 */ setFontSizeAndMoreAuto: (height: number, useGraphicLocation?: boolean) => this; /** * @description 根据xAxisName的文本宽度设置grid的right属性 * @param width 容器宽度 * @returns */ setGridRightByXAxisName: (width: number) => this; getXAxisData: () => string[]; getResultOption: () => EChartsOption; } /** * @description 递归合并option，主要是grid、toolbox、xAxis等属性的合并 * 1.自定义配置优先级更高, 相同属性值进行合并, 不同属性值直接赋值 * 2.颜色属性判断是否符合要求, 单独处理 * @param target 目标对象 * @param extraOption 自定义的额外配置 * @param hasThemeButton 是否有主题按钮 */ export declare const mergeDeepOption: (target: any, extraOption: { [key: string]: any; } | undefined, hasThemeButton: boolean) => any; export declare const setMergedOptionTemplate: (extraOption: { [key: string]: any; } | undefined) => void; //# sourceMappingURL=index.d.ts.map