echarts

<script setup lang="ts">
  import type { CustomEChartsOption } from './types'

  import { WxCanvas, createBooleanProp, echarts, mergeDeep } from '@cloud/shared'
  import { onReady } from '@dcloudio/uni-app'
  import { getCurrentInstance, nextTick, ref, watch } from 'vue'

  const props = defineProps({
    canvasId: {
      type: String,
      default: () => 'ec-canvas',
    },
    option: {
      type: Object as PropType<CustomEChartsOption>,
      default: () => ({}),
    },
    disabled: createBooleanProp(),
  })

  type TouchCanvasEvent = UniHelper.CanvasOnTouchcancelEvent

  const currentInstance = getCurrentInstance()
  let canvasNode: HTMLCanvasElement | null = null
  let chart: echarts.EChartsType | null = null
  const isReady = ref(false)

  function getOption() {
    const option: CustomEChartsOption = {}

    const optionMerge = props.option

    return mergeDeep(option, optionMerge)
  }

  function init() {
    echarts.registerPreprocessor((option) => {
      if (option && option.series) {
        if (option.series instanceof Array && option.series.length > 0) {
          option.series.forEach((series) => {
            series.progressive = 0
          })
        } else if (typeof option.series === 'object') {
          ;(option.series as { progressive: number }).progressive = 0
        }
      }
    })
    initEcharts()
  }

  async function initEcharts() {
    // version >= 2.9.0：使用新的方式初始化
    await nextTick()
    isReady.value = true
    const query = uni.createSelectorQuery().in(currentInstance)
    query
      .select(`#${props.canvasId}`)
      .fields({ node: true, size: true } as any, () => {})
      .exec((res) => {
        if (chart) chart.dispose()
        canvasNode = res[0].node as unknown as HTMLCanvasElement
        const dpr = uni.getSystemInfoSync().pixelRatio
        const canvasWidth = res[0].width
        const canvasHeight = res[0].height
        const ctx = canvasNode!.getContext('2d') as any as UniNamespace.CanvasContext
        const canvas = new WxCanvas(ctx, props.canvasId, true, canvasNode)
        echarts.setPlatformAPI({
          createCanvas: () => canvas as unknown as HTMLCanvasElement,
          loadImage: (src, onload, onerror) => {
            if ((canvasNode as any)?.createImage) {
              const image = (canvasNode as any).createImage()
              image.onload = onload
              image.onerror = onerror
              image.src = src
              return image
            }
            console.error('加载图片依赖 `Canvas.createImage()` API，要求小程序基础库版本在 2.7.0 及以上。')
            // PENDING fallback?
          },
        })
        chart = echarts.init(canvas as unknown as HTMLCanvasElement, null, {
          width: canvasWidth,
          height: canvasHeight,
          devicePixelRatio: dpr, // new
        })
        nextTick(() => {
          chart?.setOption(getOption())
        })
        canvas.setChart(chart as any)
      })
  }

  function wrapTouch(event: TouchCanvasEvent): any {
    return {
      ...event,
      touches: event.touches.map((touch) => {
        return {
          ...touch,
          offsetX: touch.x,
          offsetY: touch.y,
        }
      }),
    }
  }

  function touchStart(e: TouchCanvasEvent) {
    if (props.disabled) return
    if (chart && e.touches.length > 0) {
      const touch = e.touches[0]
      const handler = chart.getZr().handler
      handler.dispatch('mousedown', {
        zrX: touch.x,
        zrY: touch.y,
        preventDefault: () => {},
        stopImmediatePropagation: () => {},
        stopPropagation: () => {},
      })
      handler.dispatch('mousemove', {
        zrX: touch.x,
        zrY: touch.y,
        preventDefault: () => {},
        stopImmediatePropagation: () => {},
        stopPropagation: () => {},
      })
      handler.processGesture(wrapTouch(e), 'start')
    }
  }

  function touchMove(e: TouchCanvasEvent) {
    if (props.disabled) return
    if (chart && e.touches.length > 0) {
      const touch = e.touches[0]
      const handler = chart.getZr().handler
      handler.dispatch('mousemove', {
        zrX: touch.x,
        zrY: touch.y,
        preventDefault: () => {},
        stopImmediatePropagation: () => {},
        stopPropagation: () => {},
      })
      handler.processGesture(wrapTouch(e), 'change')
    }
  }

  function touchEnd(e: TouchCanvasEvent) {
    if (props.disabled) return
    if (chart) {
      const touch = e.changedTouches ? e.changedTouches[0] : {}
      const handler = chart.getZr().handler
      handler.dispatch('mouseup', {
        zrX: touch.x,
        zrY: touch.y,
        preventDefault: () => {},
        stopImmediatePropagation: () => {},
        stopPropagation: () => {},
      })
      handler.dispatch('click', {
        zrX: touch.x,
        zrY: touch.y,
        preventDefault: () => {},
        stopImmediatePropagation: () => {},
        stopPropagation: () => {},
      })
      handler.processGesture(wrapTouch(e), 'end')
    }
  }
  watch(
    [() => props.option, () => isReady.value],
    () => {
      if (isReady.value && chart) {
        chart.setOption(getOption())
      }
    },
    {
      deep: true,
    },
  )

  defineExpose({
    getDataURL: () => {
      return new Promise<string>((resolve, reject) => {
        uni
          .canvasToTempFilePath({
            canvasId: 'ec-canvas',
            canvas: canvasNode as any,
            width: canvasNode?.width,
            height: canvasNode?.height,
          })
          .then((res) => {
            return uni.getImageInfo({
              src: res.tempFilePath,
            })
          })
          .then((res) => {
            resolve(res.path)
          })
          .catch((e) => {
            reject(e)
            throw e
          })
      })
    },
    getEchartsInstance() {
      return chart
    },
  })
  onReady(init)
</script>

<template>
  <canvas
    :id="canvasId"
    type="2d"
    class="ec-canvas"
    :canvas-id="canvasId"
    @touchstart="e => !disabled ? touchStart(e) : undefined"
    @touchmove="e => !disabled ? touchMove(e) : undefined"
    @touchend="e => !disabled ? touchEnd(e) : undefined"
  ></canvas>
</template>

<style>
  .ec-canvas {
    width: 100%;
    height: 100%;
  }
</style>