opt: opt id

src/component/overlay/Annotation.js

@@ -35,10 +35,9 @@ import {
  */
 export default class Annotation extends Overlay {
   constructor ({
-    id, point, chartStore, xAxis, yAxis, styles
+    id, point = {}, chartStore, xAxis, yAxis, styles
   }) {
-    super({ id, chartStore, xAxis, yAxis })
-    this._point = point
+    super({ id, chartStore, points: point, xAxis, yAxis })
     this._symbolCoordinate = {}
     this.setStyles(styles, chartStore.styleOptions().annotation)
   }
@@ -85,7 +84,7 @@ export default class Annotation extends Overlay {
         ctx.save()
         this.drawCustomSymbol({
           ctx,
-          point: this._point,
+          point: this._points,
           coordinate: this._symbolCoordinate,
           viewport: {
             width: this._xAxis.width(),
@@ -110,7 +109,7 @@ export default class Annotation extends Overlay {
     let y = 0
     switch (styles.position) {
       case OverlayPosition.POINT: {
-        y = this._yAxis.convertToPixel(this._point.value)
+        y = this._yAxis.convertToPixel(this._points.value)
         break
       }
       case OverlayPosition.TOP: {
@@ -129,7 +128,7 @@ export default class Annotation extends Overlay {
       ctx.save()
       this.drawExtend({
         ctx,
-        point: this._point,
+        point: this._points,
         coordinate: this._symbolCoordinate,
         viewport: {
           width: this._xAxis.width(),
@@ -204,14 +203,6 @@ export default class Annotation extends Overlay {
     this._symbolCoordinate = { x: x + offset[1] }
   }
 
-  /**
-   * 获取点
-   * @return {*}
-   */
-  points () {
-    return this._point
-  }
-
   /**
    * 检查鼠标点是否在自定义标识内
    * @param eventCoordinate

src/component/overlay/Overlay.js

@@ -32,10 +32,11 @@ export function perfectOverlayFunc (overlay, funcs) {
  */
 export default class Overlay {
   constructor ({
-    id, chartStore, xAxis, yAxis
+    id, chartStore, points, xAxis, yAxis
   }) {
     this._id = id
     this._chartStore = chartStore
+    this._points = points
     this._xAxis = xAxis
     this._yAxis = yAxis
     this._styles = null
@@ -79,6 +80,13 @@ export default class Overlay {
     return this._styles
   }
 
+  /**
+   * 获取点信息
+   */
+  points () {
+    return this._points
+  }
+
   /**
    * 设置y轴
    * @param yAxis

src/component/overlay/Shape.js

@@ -93,17 +93,16 @@ export default class Shape extends Overlay {
   constructor ({
     id, name, totalStep,
     chartStore, xAxis, yAxis,
-    points, styles, lock, mode, data
+    points = [], styles, lock, mode, data
   }) {
-    super({ id, chartStore, xAxis, yAxis })
+    super({ id, chartStore, points, xAxis, yAxis })
     this._name = name
     this._totalStep = totalStep
     this._lock = lock
     this._mode = ShapeMode.NORMAL
     this.setMode(mode)
     this._data = data
     this._drawStep = SHAPE_DRAW_STEP_START
-    this._points = []
     this.setPoints(points)
     this.setStyles(styles, chartStore.styleOptions().shape)
     this._prevPressPoint = null
@@ -495,14 +494,6 @@ export default class Shape extends Overlay {
     return this._data
   }
 
-  /**
-   * 获取点
-   * @return {[]}
-   */
-  points () {
-    return this._points
-  }
-
   /**
    * 是否在绘制中
    * @return {boolean}

src/component/overlay/Tag.js

@@ -22,10 +22,9 @@ import { renderText } from '../../renderer/text'
 
 export default class Tag extends Overlay {
   constructor ({
-    id, point, text, mark, chartStore, xAxis, yAxis, styles
+    id, point = {}, text, mark, chartStore, xAxis, yAxis, styles
   }) {
-    super({ id, chartStore, xAxis, yAxis })
-    this._point = point || {}
+    super({ id, chartStore, points: point, xAxis, yAxis })
     this._text = text
     this._mark = mark
     this.setStyles(styles, chartStore.styleOptions().tag)
@@ -42,7 +41,7 @@ export default class Tag extends Overlay {
   update ({ point, text, mark, styles }) {
     let success = false
     if (isObject(point)) {
-      this._point = point
+      this._points = point
       success = true
     }
     if (isValid(text)) {
@@ -300,7 +299,7 @@ export default class Tag extends Overlay {
         return this._yAxis.height() + offset
       }
       default: {
-        return this._yAxis.convertToNicePixel(this._point.value) + offset
+        return this._yAxis.convertToNicePixel(this._points.value) + offset
       }
     }
   }

src/pane/ChartPane.js

@@ -18,7 +18,10 @@ import CandlePane from './CandlePane'
 import XAxisPane from './XAxisPane'
 
 import { YAxisPosition } from '../options/styleOptions'
+
 import { isArray, isBoolean, isFunction, isValid, isNumber } from '../utils/typeChecks'
+import { createId } from '../utils/id'
+
 import TechnicalIndicatorPane from './TechnicalIndicatorPane'
 import SeparatorPane from './SeparatorPane'
 
@@ -34,14 +37,17 @@ import ActionType from '../enum/ActionType'
 import InvalidateLevel from '../enum/InvalidateLevel'
 
 // 默认技术指标窗口高度
-const DEFAULT_TECHNICAL_INDICATOR_PANE_HEIGHT = 100
+const DEFAULT_TECH_PANE_HEIGHT = 100
 
 // 技术指标窗口id前缀
-const TECHNICAL_INDICATOR_PANE_ID_PREFIX = 'technical_indicator_pane_'
+const TECH_PANE_ID_PREFIX = 'tech_pane_'
 
 // 图形id前缀
 const SHAPE_ID_PREFIX = 'shape_'
 
+// 注解id前缀
+const ANNOTATION_ID_PREFIX = 'an_'
+
 // 蜡烛图窗口id
 export const CANDLE_PANE_ID = 'candle_pane'
 
@@ -51,8 +57,6 @@ const XAXIS_PANE_ID = 'x_axis_pane'
 export default class ChartPane {
   constructor (container, styleOptions) {
     this._initChartContainer(container)
-    this._shapeBaseId = 0
-    this._paneBaseId = 0
     this._separatorDragStartTopPaneHeight = 0
     this._separatorDragStartBottomPaneHeight = 0
     this._chartStore = new ChartStore(styleOptions, {
@@ -436,7 +440,7 @@ export default class ChartPane {
       }
       return options.id
     }
-    const id = options.id || `${TECHNICAL_INDICATOR_PANE_ID_PREFIX}${++this._paneBaseId}`
+    const id = options.id || createId(TECH_PANE_ID_PREFIX)
     const dragEnabled = isBoolean(options.dragEnabled) ? options.dragEnabled : true
     this._separators.set(id, new SeparatorPane(
       this._chartContainer,
@@ -454,7 +458,7 @@ export default class ChartPane {
       chartStore: this._chartStore,
       xAxis: this._xAxisPane.xAxis(),
       id,
-      height: options.height || DEFAULT_TECHNICAL_INDICATOR_PANE_HEIGHT,
+      height: options.height || DEFAULT_TECH_PANE_HEIGHT,
       minHeight: options.minHeight
     })
     this._panes.set(id, pane)
@@ -482,7 +486,7 @@ export default class ChartPane {
       onMouseEnter, onMouseLeave,
       onRemove
     } = shapeOptions
-    const shapeId = id || `${SHAPE_ID_PREFIX}${++this._shapeBaseId}`
+    const shapeId = id || createId(SHAPE_ID_PREFIX)
     if (!this._chartStore.shapeStore().hasInstance(shapeId)) {
       let yAxis = null
       if (this.hasPane(paneId)) {
@@ -543,7 +547,7 @@ export default class ChartPane {
     }) => {
       if (point && point.timestamp) {
         const annotationInstance = new Annotation({
-          id: point.timestamp,
+          id: createId(ANNOTATION_ID_PREFIX),
           chartStore: this._chartStore,
           point,
           xAxis: this._xAxisPane.xAxis(),

src/store/AnnotationStore.js

@@ -82,11 +82,12 @@ export default class AnnotationStore {
       this._annotations.set(paneId, new Map())
     }
     annotations.forEach(annotation => {
-      const idAnnotations = this._annotations.get(paneId)
-      if (idAnnotations.has(annotation.id())) {
-        idAnnotations.get(annotation.id()).push(annotation)
+      const timestampAnnotations = this._annotations.get(paneId)
+      const timestamp = annotation.points().timestamp
+      if (timestampAnnotations.has(timestamp)) {
+        timestampAnnotations.get(timestamp).push(annotation)
       } else {
-        idAnnotations.set(annotation.id(), [annotation])
+        timestampAnnotations.set(timestamp, [annotation])
       }
     })
     this.createVisibleAnnotations()

src/utils/id.js

@@ -0,0 +1,24 @@
+class ID {
+  constructor () {
+    this._baseId = 1
+  }
+
+  next (prefix = '') {
+    const timestamp = new Date().getTime()
+    if (timestamp === this._prevIdTimestamp) {
+      ++this._baseId
+    } else {
+      this._baseId = 1
+    }
+    this._prevIdTimestamp = timestamp
+    return `${prefix}${timestamp}_${this._baseId}`
+  }
+}
+
+const id = new ID()
+
+function createId (prefix) {
+  return id.next(prefix)
+}
+
+export { createId }