charts.uts 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. import { TuiDrawCharts } from './xcharts'
  2. export class TuiCharts {
  3. chartsMap = new Map<number, TuiDrawCharts>()
  4. option : UTSJSONObject = {}
  5. canvasContext : CanvasContext | null = null
  6. context : CanvasRenderingContext2D | null = null
  7. dpr : number = uni.getWindowInfo().pixelRatio
  8. offsetWidth : number = 0
  9. offsetHeight : number = 0
  10. ins : ComponentPublicInstance | null = null
  11. setSize : boolean = false
  12. baseX : number = 0
  13. baseY : number = 0
  14. oldTipsName : number = -1
  15. canvasRect : DOMRect | null = null
  16. constructor() { }
  17. getTouchCurrent(e : UniEvent) : number {
  18. let curArea : number = -1
  19. let x : number
  20. let y : number
  21. const top = this.canvasRect!.y
  22. const left = this.canvasRect!.x
  23. if (e.type == 'click') {
  24. x = (e as UniPointerEvent).clientX - this.baseX + (this.baseX - left)
  25. y = (e as UniPointerEvent).clientY - this.baseY + (this.baseY - top)
  26. } else {
  27. x = (e as UniTouchEvent).changedTouches[0].clientX - this.baseX + (this.baseX - left)
  28. y = (e as UniTouchEvent).changedTouches[0].clientY - this.baseY + (this.baseY - top)
  29. }
  30. this.chartsMap.forEach((item : TuiDrawCharts, key : number) => {
  31. if (x > item.opts.xOffset && y > item.opts.yOffset && x < item.opts.xOffset + item.opts.width && y < item.opts.yOffset + item.opts.height) {
  32. curArea = key
  33. }
  34. })
  35. return curArea
  36. }
  37. tap(e : UniPointerEvent) {
  38. if (this.oldTipsName != -1) {
  39. const curDraw = this.getDrawCharts(this.oldTipsName)!
  40. curDraw.opts.DOMRect = this.canvasRect
  41. const tipsIndex = curDraw.showToolTip(e)
  42. let legendIndex = -1
  43. if (curDraw.opts.tapLegend) legendIndex = curDraw.touchLegend(e)
  44. this.ins?.$emit('select', { tipsIndex, legendIndex, index: this.oldTipsName })
  45. }
  46. }
  47. touchStart(e : UniTouchEvent) {
  48. e.target!.getBoundingClientRectAsync()!.then((res : DOMRect) => {
  49. this.canvasRect = res
  50. const curBar = this.getTouchCurrent(e)
  51. if (curBar != -1) {
  52. if (curBar != this.oldTipsName && this.oldTipsName != -1) {
  53. const oldDraw = this.getDrawCharts(this.oldTipsName)!
  54. oldDraw.opts.DOMRect = null
  55. oldDraw.clearTooltip()
  56. }
  57. this.oldTipsName = curBar
  58. const curDraw = this.getDrawCharts(this.oldTipsName)!
  59. if (curDraw.opts.enableScroll) {
  60. curDraw.opts.DOMRect = res
  61. curDraw.scrollStart(e)
  62. }
  63. }
  64. })
  65. }
  66. touchMove(e : UniTouchEvent) {
  67. if (this.oldTipsName != -1) {
  68. const curDraw = this.getDrawCharts(this.oldTipsName)!
  69. if (curDraw.opts.enableScroll) {
  70. curDraw.scroll(e)
  71. }
  72. }
  73. }
  74. touchEnd(e : UniTouchEvent) {
  75. if (this.oldTipsName != -1) {
  76. const curDraw = this.getDrawCharts(this.oldTipsName)!
  77. if (curDraw.opts.enableScroll) {
  78. curDraw.scrollEnd(e)
  79. }
  80. }
  81. }
  82. setInsMethod(e : ComponentPublicInstance, rect : DOMRect) {
  83. this.ins = e
  84. this.baseX = rect.x
  85. this.baseY = rect.y
  86. }
  87. setContext(context : CanvasContext) {
  88. this.canvasContext = context
  89. const ctx = context.getContext('2d')!;
  90. this.context = ctx
  91. const canvas = ctx.canvas
  92. this.offsetWidth = canvas.offsetWidth
  93. this.offsetHeight = canvas.offsetHeight
  94. }
  95. getDrawCharts(name : number) : TuiDrawCharts | null {
  96. return this.chartsMap.get(name)
  97. }
  98. add(name : number, option : UTSJSONObject) : TuiDrawCharts {
  99. const ctx = this.context!
  100. option.set('context', ctx)
  101. if (option.getNumber('width') == null) option.set('width', ctx.canvas.offsetWidth)
  102. if (option.getNumber('height') == null) option.set('height', ctx.canvas.offsetHeight)
  103. option.set('pixelRatio', 1)
  104. option.set('canvas2d', true)
  105. option.set('canvasContext', this.canvasContext)
  106. if (option.getArray('padding') == null) option.set('padding', [0, 0, 0, 0])
  107. if (option.getArray('series') == null) option.set('series', [] as UTSJSONObject[])
  108. const charts = new TuiDrawCharts(option)
  109. this.chartsMap.set(name, charts)
  110. this.option = option
  111. return charts
  112. }
  113. }