diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 339c6a4e9..d11131bb7 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -14,7 +14,7 @@ body: - Find in [examples](https://www.visactor.io/) - Look for / ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/visactor) - For non-technical support or general questions, you can email [yangwenhai@bytedance.com](mailto:yangwenhai@bytedance.com). + For non-technical support or general questions, you can email [xuanhun521@126.com](mailto:xuanhun521@126.com). Also try to search for your issue - it may have already been answered or even fixed in the development branch. However, if you find that an old, closed issue still persists in the latest version, you should open a new issue using the form below instead of commenting on the old issue. diff --git a/.github/ISSUE_TEMPLATE/feaure_request.yml b/.github/ISSUE_TEMPLATE/feaure_request.yml index 5384ed51b..479a5c2b1 100644 --- a/.github/ISSUE_TEMPLATE/feaure_request.yml +++ b/.github/ISSUE_TEMPLATE/feaure_request.yml @@ -14,7 +14,7 @@ body: - Find in [examples](https://www.visactor.io//) - Look for / ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/visactors) - For non-technical support or general questions, you can email [yangwenhai@bytedance.com](mailto:yangwenhai@bytedance.com). + For non-technical support or general questions, you can email [xuanhun521@126.com](mailto:xuanhun521@126.com). Also try to search for your issue - it may have already been answered or even fixed in the development branch. However, if you find that an old, closed issue still persists in the latest version, you should open a new issue using the form below instead of commenting on the old issue. diff --git a/packages/vtable/examples/list/list.ts b/packages/vtable/examples/list/list.ts new file mode 100644 index 000000000..d692af326 --- /dev/null +++ b/packages/vtable/examples/list/list.ts @@ -0,0 +1,78 @@ +import * as VTable from '../../src'; +const Table_CONTAINER_DOM_ID = 'vTable'; +const generatePersons = count => { + return Array.from(new Array(count)).map((_, i) => ({ + id: i + 1, + email1: `${i + 1}@xxx.com`, + name: `小明${i + 1}`, + lastName: '王', + date1: '2022年9月1日', + tel: '000-0000-0000', + sex: i % 2 === 0 ? 'boy' : 'girl', + work: i % 2 === 0 ? 'back-end engineer' : 'front-end engineer', + city: 'beijing' + })); +}; + +const records = generatePersons(1000000); +const columns: VTable.ColumnsDefine = [ + { + field: 'id', + caption: 'ID', + width: 120, + sort: true + }, + { + field: 'email1', + caption: 'email', + width: 200, + sort: true + }, + { + caption: 'full name', + columns: [ + { + field: 'name', + caption: 'First Name', + width: 200 + }, + { + field: 'name', + caption: 'Last Name', + width: 200 + } + ] + }, + { + field: 'date1', + caption: 'birthday', + width: 200 + }, + { + field: 'sex', + caption: 'sex', + width: 100 + }, + { + field: 'tel', + caption: 'telephone', + width: 150 + }, + { + field: 'work', + caption: 'job', + width: 200 + }, + { + field: 'city', + caption: 'city', + width: 150 + } +]; +const option = { + parentElement: document.getElementById(Table_CONTAINER_DOM_ID), + records, + columns +}; +const tableInstance = new VTable.ListTable(option); +window.tableInstance = tableInstance; diff --git a/packages/vtable/examples/menu.ts b/packages/vtable/examples/menu.ts index c9842b9f9..0187d132f 100644 --- a/packages/vtable/examples/menu.ts +++ b/packages/vtable/examples/menu.ts @@ -3,8 +3,8 @@ export const menus = [ menu: '基本表格', children: [ { - path: 'list-table', - name: 'default' + path: 'list', + name: 'list' } ] }, diff --git a/packages/vtable/examples/pivot/pivot-chart.ts b/packages/vtable/examples/pivot/pivot-chart.ts index 86a054dfb..7b48ea16a 100644 --- a/packages/vtable/examples/pivot/pivot-chart.ts +++ b/packages/vtable/examples/pivot/pivot-chart.ts @@ -312,23 +312,20 @@ export function createTable() { pointShowRule: 'none', smooth: true, line: { - visible: true, style: { stroke: '#2E62F1', strokeWidth: 2 // interpolate: 'monotone', } }, - symbol: { + point: { visible: true, - state: { - hover: { - stroke: 'blue', - strokeWidth: 1, - fill: 'red', - shape: 'circle', - size: 4 - } + hover: { + stroke: 'blue', + strokeWidth: 1, + fill: 'red', + shape: 'circle', + size: 4 }, style: { stroke: 'red', diff --git a/packages/vtable/examples/type/spark-line.ts b/packages/vtable/examples/type/spark-line.ts index ba7eb3cac..9f19dc048 100644 --- a/packages/vtable/examples/type/spark-line.ts +++ b/packages/vtable/examples/type/spark-line.ts @@ -8,7 +8,8 @@ export function createTable() { progress: 100, id: 1, name: 'a', - lineData: [ + lineData: [10, 5, 7, 8, 3, 9, 4], + lineData2: [ { x: 0, y: 10 }, { x: 1, y: 40 }, { x: 2, y: 60 }, @@ -23,7 +24,8 @@ export function createTable() { progress: 80, id: 2, name: 'b', - lineData: [ + lineData: [7, 5, 7, 8, 3, 9, 4], + lineData2: [ { x: 0, y: 10 }, { x: 1, y: 40 }, { x: 2, y: 60 }, @@ -40,7 +42,8 @@ export function createTable() { progress: 1, id: 3, name: 'c', - lineData: [ + lineData: [1, 5, 7, 8, 3, 9, 4], + lineData2: [ { x: 0, y: 10 }, { x: 1, y: 40 }, { x: 2, y: 60 }, @@ -57,7 +60,8 @@ export function createTable() { progress: 55, id: 4, name: 'd', - lineData: [ + lineData: [-5, 5, 7, 8, 3, 9, 4], + lineData2: [ { x: 0, y: 10 }, { x: 1, y: 40 }, { x: 2, y: 60 }, @@ -75,7 +79,8 @@ export function createTable() { id: 5, name: 'e', total: true, - lineData: [ + lineData: [4, 5, 7, 8, 3, 9, 4], + lineData2: [ { x: 0, y: 10 }, { x: 1, y: 40 }, { x: 2, y: 60 }, @@ -89,7 +94,8 @@ export function createTable() { ] } ]; - const baseSpec = { + + const baseSpec: VTable.TYPES.SparklineSpec = { type: 'line', xField: { field: 'x', @@ -109,7 +115,7 @@ export function createTable() { strokeWidth: 2 } }, - symbol: { + point: { visible: true, state: { hover: { @@ -135,7 +141,7 @@ export function createTable() { } } }; - const totalSpec = { + const totalSpec: VTable.TYPES.SparklineSpec = { type: 'line', xField: 'x', yField: 'y', @@ -147,7 +153,7 @@ export function createTable() { strokeWidth: 4 } }, - symbol: { + point: { visible: true, state: { hover: { @@ -174,6 +180,43 @@ export function createTable() { } }; + const specFieldString: VTable.TYPES.SparklineSpec = { + type: 'line', + xField: 'x', + yField: 'y', + pointShowRule: 'all', + line: { + style: { + stroke: '#2E62F1', + strokeWidth: 2 + } + }, + point: { + visible: true, + hover: { + stroke: 'blue', + strokeWidth: 1, + fill: 'red', + shape: 'circle', + size: 4 + }, + + style: { + stroke: 'red', + strokeWidth: 1, + fill: 'yellow', + shape: 'circle', + size: 2 + } + }, + crosshair: { + style: { + stroke: 'gray', + strokeWidth: 1 + } + } + }; + const option: VTable.ListTableConstructorOptions = { parentElement: document.getElementById(Table_CONTAINER_DOM_ID), columns: [ @@ -192,23 +235,15 @@ export function createTable() { field: 'lineData', caption: '这是一个折线图1', width: 250, - columnType: 'sparkline', - sparklineSpec: args => { - const { col, row } = args; - const data = instance.getCellOriginRecord(col, row); - if (data.total) { - return totalSpec; - } - return baseSpec; - } + columnType: 'sparkline' }, { - field: 'lineData', + field: 'lineData2', caption: '这是一个折线图2', width: 250, columnType: 'sparkline', sparklineSpec: Object.assign({}, baseSpec, { - symbol: { + point: { visible: false, state: { hover: { @@ -228,6 +263,30 @@ export function createTable() { } } }) + }, + { + field: 'lineData2', + caption: '这是一个折线图3', + width: 250, + columnType: 'sparkline', + sparklineSpec: specFieldString + }, + { + field: 'lineData2', + caption: '这是一个折线图4', + width: 250, + columnType: 'sparkline', + sparklineSpec: { + type: 'line', + xField: 'x', + yField: 'y', + crosshair: { + style: { + stroke: 'red', + interpolate: 'monotone' + } + } + } } ], showPin: true, //显示VTable内置冻结列图标 diff --git a/packages/vtable/site-demo/cell-type/multi-type.md b/packages/vtable/site-demo/cell-type/multi-type.md index 0aa9a829e..28abe6332 100644 --- a/packages/vtable/site-demo/cell-type/multi-type.md +++ b/packages/vtable/site-demo/cell-type/multi-type.md @@ -154,7 +154,6 @@ const columns = [ pointShowRule: 'none', smooth: true, line: { - visible: true, style: { stroke: '#2E62F1', strokeWidth: 2, @@ -162,14 +161,12 @@ const columns = [ }, symbol: { visible: true, - state: { - hover: { + hover: { stroke: 'blue', strokeWidth: 1, fill: 'red', shape: 'circle', size: 4, - }, }, style: { stroke: 'red', diff --git a/packages/vtable/src/event/event.ts b/packages/vtable/src/event/event.ts index fd524f255..53c50c3da 100644 --- a/packages/vtable/src/event/event.ts +++ b/packages/vtable/src/event/event.ts @@ -16,7 +16,7 @@ import { browser, cellInRanges } from '../tools/helper'; import { Rect } from '../tools/Rect'; import { bindMediaClick } from './media-click'; import { bindDrillEvent, drillClick } from './drill'; -import { bindChartHoverEvent } from './chart'; +import { bindSparklineHoverEvent } from './sparkline-event'; import { getIconAndPositionFromTarget } from '../scenegraph/utils/icon'; import type { BaseTableAPI } from '../ts-types/base-table'; import { handleWhell } from './scroll'; @@ -705,7 +705,7 @@ export class EventManeger { } // chart hover - bindChartHoverEvent(this.table); + bindSparklineHoverEvent(this.table); } dealTableHover(eventArgsSet?: SceneEvent) { diff --git a/packages/vtable/src/event/chart.ts b/packages/vtable/src/event/sparkline-event.ts similarity index 75% rename from packages/vtable/src/event/chart.ts rename to packages/vtable/src/event/sparkline-event.ts index 9551bf0b6..55effb384 100644 --- a/packages/vtable/src/event/chart.ts +++ b/packages/vtable/src/event/sparkline-event.ts @@ -4,7 +4,7 @@ import type { PivoLayoutMap } from '../layout/pivot-layout'; import type { MousePointerCellEvent } from '../ts-types'; import type { BaseTableAPI } from '../ts-types/base-table'; -export function bindChartHoverEvent(table: BaseTableAPI) { +export function bindSparklineHoverEvent(table: BaseTableAPI) { // 判断是否有sparkline 类型 let hasSparkLine = false; if (table.isPivotTable()) { @@ -27,8 +27,12 @@ export function bindChartHoverEvent(table: BaseTableAPI) { const { col, row, x, y } = e; const type = table.getBodyColumnType(col, row); if (type !== 'sparkline') { - table.stateManeger.updateChartHoverPose(-1, -1, 0, 0); + table.stateManeger.updateSparklineHoverPose(-1, -1, 0, 0); } - table.stateManeger.updateChartHoverPose(col, row, x, y); + table.stateManeger.updateSparklineHoverPose(col, row, x, y); + }); + + table.listen(TABLE_EVENT_TYPE.MOUSELEAVE_TABLE, (e: MousePointerCellEvent) => { + table.stateManeger.updateSparklineHoverPose(-1, -1, 0, 0); }); } diff --git a/packages/vtable/src/layout/simple-header-layout.ts b/packages/vtable/src/layout/simple-header-layout.ts index bc819d8ba..e535d54f6 100644 --- a/packages/vtable/src/layout/simple-header-layout.ts +++ b/packages/vtable/src/layout/simple-header-layout.ts @@ -1,5 +1,6 @@ /* eslint-disable sort-imports */ import type { ListTable } from '../ListTable'; +import { DefaultSparklineSpec } from '../tools/global'; import type { CellAddress, CellRange, CellType, IListTableCellHeaderPaths, LayoutObjectId } from '../ts-types'; import type { ColumnsDefine, TextColumnDefine } from '../ts-types/list-table/define'; import type { @@ -468,7 +469,7 @@ export class SimpleHeaderLayoutMap implements LayoutMapAPI { columnType: colDef.columnType ?? 'text', chartType: 'chartType' in colDef ? colDef.chartType : null, // todo: 放到对应的column对象中 chartSpec: 'chartSpec' in colDef ? colDef.chartSpec : null, // todo: 放到对应的column对象中 - sparklineSpec: 'sparklineSpec' in colDef ? colDef.sparklineSpec : null, // todo: 放到对应的column对象中 + sparklineSpec: 'sparklineSpec' in colDef ? colDef.sparklineSpec : DefaultSparklineSpec, // todo: 放到对应的column对象中 style: colDef.style, define: colDef, columnWidthComputeMode: colDef.columnWidthComputeMode, diff --git a/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts b/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts index ecb482edf..dfac55db3 100644 --- a/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts +++ b/packages/vtable/src/scenegraph/group-creater/cell-type/spark-line-cell.ts @@ -119,6 +119,12 @@ function createSparkLine( const indexValues = dataValue.map((value: any) => value[sparklineSpec.xField as string]); xScale.domain(indexValues); xField = sparklineSpec.xField; + } else { + // xField未配置 data为数值数组的情况 + if (Array.isArray(dataValue)) { + xScale.domain(Array.from({ length: dataValue.length }, (_, i) => i)); + xField = sparklineSpec.xField; + } } xScale.range([0, width]); @@ -130,6 +136,12 @@ function createSparkLine( const values = dataValue.map((value: any) => value[sparklineSpec.yField as string]); yScale.domain([Math.min(...values), Math.max(...values)]); yField = sparklineSpec.yField; + } else { + // yField未配置 检查data是否为数值数组 + if (Array.isArray(dataValue) && dataValue.every((value: any) => typeof value === 'number')) { + yScale.domain([Math.min(...dataValue), Math.max(...dataValue)]); + yField = sparklineSpec.yField; + } } yScale.range([0, height]); @@ -172,9 +184,9 @@ function createSparkLine( for (let i = 0; i < dataValue.length; i++) { const data: any = dataValue[i]; items.push({ - x: left + xScale.scale(data[xField]), - y: bottom - yScale.scale(data[yField]), - defined: isValid(data[yField]), + x: left + xScale.scale(xField ? data[xField] : i), + y: bottom - yScale.scale(yField ? data[yField] : data), + defined: isValid(yField ? data[yField] : data), rawData: data } as any); dataItems.push(data); @@ -194,8 +206,8 @@ function createSparkLine( // 更新symbol节点属性 const symbolGroup = chartGroup.getChildByName('sparkline-symbol-group') as ILine; if (symbolGroup) { - const isShowIsolatedPoint = sparklineSpec.symbol.visible && sparklineSpec.pointShowRule === 'isolatedPoint'; - if (sparklineSpec.symbol.visible && sparklineSpec.pointShowRule === 'all') { + const isShowIsolatedPoint = sparklineSpec.point?.visible && sparklineSpec.pointShowRule === 'isolatedPoint'; + if (sparklineSpec.point?.visible && sparklineSpec.pointShowRule === 'all') { for (let i = 0; i < items.length; i++) { const { x, y, defined } = items[i]; if (defined) { @@ -246,13 +258,18 @@ function createChartGroup( const line = createLine({ x: 0, y: 0, - curveType: specObj.smooth || specObj.line.style.interpolate === 'monotone' ? 'monotoneX' : 'linear', - strokeColor: specObj.line.style.stroke, - lineWidth: specObj.line.style.strokeWidth + curveType: specObj.smooth ?? specObj.line?.style?.interpolate === 'linear' ? 'linear' : 'monotoneX', + strokeColor: specObj.line?.style?.stroke ?? 'blue', + lineWidth: specObj.line?.style?.strokeWidth ?? 2 }); line.name = 'sparkline-line'; group.addChild(line); - (line as any).hover = specObj.crosshair.style; + if (specObj.crosshair) { + (line as any).hover = specObj.crosshair?.style ?? { + stroke: '#000', + interpolate: 'linear' + }; + } // 生成symbol const symbolGroup = new Group({ @@ -266,15 +283,15 @@ function createChartGroup( symbol: { fill: true, stroke: true, - strokeColor: specObj.symbol.style.stroke, - lineWidth: specObj.symbol.style.strokeWidth, - fillColor: specObj.symbol.style.fill, - size: specObj.symbol.style.size * 2, // 之前配置的是圆半径 + strokeColor: specObj.point?.style?.stroke ?? '#000', + lineWidth: specObj.point?.style?.strokeWidth ?? 1, + fillColor: specObj.point?.style?.fill ?? '#000', + size: (specObj.point?.style?.size ?? 3) * 2, // 之前配置的是圆半径 symbolType: 'circle' } }); group.addChild(symbolGroup); - (symbolGroup as any).hover = specObj.symbol.state.hover; + (symbolGroup as any).hover = specObj.point?.hover ?? false; } return group; } diff --git a/packages/vtable/src/state/state.ts b/packages/vtable/src/state/state.ts index 23f89fb68..4d3d6e9b2 100644 --- a/packages/vtable/src/state/state.ts +++ b/packages/vtable/src/state/state.ts @@ -921,7 +921,7 @@ export class StateManeger { updateDrill(col, row, drillDown, drillUp, this.table); } - updateChartHoverPose(col: number, row: number, x: number, y: number) { + updateSparklineHoverPose(col: number, row: number, x: number, y: number) { if (this.sparkLine.col !== -1 && this.sparkLine.row !== -1) { clearChartHover(this.sparkLine.col, this.sparkLine.row, this.table); } diff --git a/packages/vtable/src/tools/global.ts b/packages/vtable/src/tools/global.ts index c2340ff62..88820313c 100644 --- a/packages/vtable/src/tools/global.ts +++ b/packages/vtable/src/tools/global.ts @@ -1,3 +1,5 @@ +import type { SparklineSpec } from '../ts-types'; + export const DEFAULTFONT = '16px sans-serif'; //默认字体 export const DEFAULTFONTSIZE = 16; //默认字号 export const DEFAULTFONTFAMILY = 'sans-serif'; //默认字体 @@ -21,3 +23,7 @@ export const IndicatorDimensionKeyPlaceholder = '$$indicator$$'; // svg path export const DrillDown = ``; export const DrillUp = ``; + +export const DefaultSparklineSpec: SparklineSpec = { + type: 'line' +}; diff --git a/packages/vtable/src/ts-types/index.ts b/packages/vtable/src/ts-types/index.ts index ece5bc4be..ed1615329 100644 --- a/packages/vtable/src/ts-types/index.ts +++ b/packages/vtable/src/ts-types/index.ts @@ -8,7 +8,7 @@ export * from './new-data-set'; export * from './table-engine'; export * from './customElement'; export * from './customLayout'; -export * from './chartType'; +export * from './sparkline'; export * from './menu'; export * from './icon'; export * from './list-table'; diff --git a/packages/vtable/src/ts-types/list-table/define/index.ts b/packages/vtable/src/ts-types/list-table/define/index.ts index 6949a36eb..fec7ba506 100644 --- a/packages/vtable/src/ts-types/list-table/define/index.ts +++ b/packages/vtable/src/ts-types/list-table/define/index.ts @@ -6,15 +6,15 @@ import type { ITextColumnBodyDefine, ITextHeaderDefine } from './multilinetext-d import type { IProgressbarColumnBodyDefine } from './progressbar-define'; import type { ISparklineColumnBodyDefine } from './sparkline-define'; -export type HeaderDefine = ITextHeaderDefine | ILinkHeaderDefine | IImageHeaderDefine; +export type HeaderDefine = IImageHeaderDefine | ILinkHeaderDefine | ITextHeaderDefine; export type ColumnBodyDefine = - | ITextColumnBodyDefine | ILinkColumnBodyDefine | IImageColumnBodyDefine | ISparklineColumnBodyDefine | IProgressbarColumnBodyDefine - | IChartColumnBodyDefine; + | IChartColumnBodyDefine + | ITextColumnBodyDefine; export type TextColumnDefine = ITextColumnBodyDefine & HeaderDefine; export type LinkColumnDefine = ILinkColumnBodyDefine & HeaderDefine; export type ImageColumnDefine = IImageColumnBodyDefine & HeaderDefine; @@ -27,12 +27,12 @@ export type GroupColumnDefine = HeaderDefine & { hideColumnsSubHeader?: boolean; }; export type ColumnDefine = Either< - | TextColumnDefine | LinkColumnDefine | ImageColumnDefine | SparklineColumnDefine | ProgressbarColumnDefine - | ChartColumnDefine, + | ChartColumnDefine + | TextColumnDefine, GroupColumnDefine >; diff --git a/packages/vtable/src/ts-types/list-table/define/sparkline-define.ts b/packages/vtable/src/ts-types/list-table/define/sparkline-define.ts index 122bfb1a3..f2d5134e1 100644 --- a/packages/vtable/src/ts-types/list-table/define/sparkline-define.ts +++ b/packages/vtable/src/ts-types/list-table/define/sparkline-define.ts @@ -1,4 +1,4 @@ -import type { SparklineSpec } from '../../chartType'; +import type { SparklineSpec } from '../../sparkline'; import type { IStyleOption } from '../../column'; import type { CellInfo } from '../../common'; import type { StylePropertyFunctionArg } from '../../style-define'; diff --git a/packages/vtable/src/ts-types/pivot-table/indicator/sparkline-indicator.ts b/packages/vtable/src/ts-types/pivot-table/indicator/sparkline-indicator.ts index f0ddd3530..c84a084ef 100644 --- a/packages/vtable/src/ts-types/pivot-table/indicator/sparkline-indicator.ts +++ b/packages/vtable/src/ts-types/pivot-table/indicator/sparkline-indicator.ts @@ -1,4 +1,4 @@ -import type { SparklineSpec } from '../../chartType'; +import type { SparklineSpec } from '../../sparkline'; import type { IStyleOption } from '../../column'; import type { CellInfo } from '../../common'; import type { StylePropertyFunctionArg } from '../../style-define'; diff --git a/packages/vtable/src/ts-types/chartType.ts b/packages/vtable/src/ts-types/sparkline.ts similarity index 50% rename from packages/vtable/src/ts-types/chartType.ts rename to packages/vtable/src/ts-types/sparkline.ts index 17b57cee4..84244ac3e 100644 --- a/packages/vtable/src/ts-types/chartType.ts +++ b/packages/vtable/src/ts-types/sparkline.ts @@ -2,47 +2,40 @@ export type ShapeType = 'circle'; export interface SparklineSpec { type: 'line'; - xField: + xField?: | string | { field: string; - type: 'point' | 'linear'; domain?: any[]; - domainMin?: number; - domainMax?: number; }; - yField: + yField?: | string | { field: string; - type: 'point' | 'linear'; domain?: any[]; - domainMin?: number; - domainMax?: number; }; - pointShowRule: 'all' | 'none' | 'isolatedPoint'; + /** all表示正常连接前后点 none表示不会只孤立点 isolatedPoint表示只绘制孤立点的点图形 默认为none */ + pointShowRule?: 'all' | 'none' | 'isolatedPoint'; smooth?: boolean; - line: { - visible: boolean; - // interactive: boolean; + /** 折线配置 */ + line?: { + /** 折线样式 */ style: ILineMarkStyle; - state?: { - hover?: ILineMarkStyle | false; - selected?: ILineMarkStyle | false; - }; }; - symbol: { - visible: boolean; - // interactive: boolean; + /** 数据点配置 默认不显示 */ + point?: { + /** 折线上每个点都显示 默认false*/ + visible?: boolean; style: ISymbolMarkStyle; - state?: { - hover?: ISymbolMarkStyle | false; - selected?: ISymbolMarkStyle | false; - }; + hover?: ISymbolMarkStyle | false; }; - crosshair: { + /** crosshair交叉线配置 默认不显示*/ + crosshair?: { + /** crosshair交叉线样式 */ style: ILineMarkStyle; }; + + //TODO 增加label } interface IMarkStyle { fill?: string; @@ -51,7 +44,7 @@ interface IMarkStyle { } interface ILineMarkStyle extends IMarkStyle { - stroke: string; + stroke?: string; interpolate?: 'linear' | 'monotone'; }