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>