mali-applet-ui 1.0.12 → 1.0.13

package/lib/components/ml-echart2/ec-canvas.vue

@@ -0,0 +1,140 @@
+<template>
+  <view class="ml-echarts" :class="className" :style="{height: height || '400rpx', width: width || '100%'}">
+    <canvas class="ec-canvas ec-canvas ec-canvas-aaa" ref="saveChildRef0" :id="canvasId" :width="width" :height="height" @touchStart="touchStart" @touchMove="touchMove" @touchEnd="touchEnd" @init="init"></canvas>
+  </view>
+</template>
+
+<script>
+/* eslint-disable */
+import WxCanvas from './wx-canvas'
+import echarts from './echarts'
+import { getAppDpr } from '../../../utils'
+
+let ctx
+
+function wrapTouch (event) {
+  for (let i = 0; i < event.touches.length; ++i) {
+    const touch = event.touches[i]
+    touch.offsetX = touch.x
+    touch.offsetY = touch.y
+  }
+
+  return event
+}
+
+export default {
+  props: {
+    options: Object,
+    height: String,
+    width: String,
+    lazyLoad: Boolean,
+    formatLegend: Function,
+    className: String
+  },
+  data () {
+    return {
+      canvasId: 'aaa',
+      width: '',
+      height: ''
+    }
+  },
+  mounted  () {
+    this.init()
+  },
+  methods: {
+    init: function () {
+      ctx = uni.createCanvasContext(this.canvasId, this)
+      const canvas = new WxCanvas(ctx, this.canvasId)
+      echarts.setCanvasCreator(() => {
+        return canvas
+      })
+
+      const query = uni.createSelectorQuery().in(this)
+
+      const selector = '.ec-canvas-' + this.canvasId
+      const ratio = getAppDpr()
+      query
+        .select(selector)
+        .boundingClientRect(res => {
+          const _w = ratio * res.width
+
+          const _h = ratio * res.height
+
+          const w = res.width
+          const h = res.height
+          this.width= _w
+            this.height= _h
+
+            const chart = echarts.init(canvas, null, {
+                width: w,
+                height: h
+              })
+              canvas.setChart(chart)
+            chart.setOption(this.options)
+        })
+        .exec()
+    },
+
+    canvasToTempFilePath (opt) {
+      if (!opt.canvasId) {
+        opt.canvasId = this.canvasId
+      }
+
+      ctx.draw(true, () => {
+        uni.canvasToTempFilePath(opt, this)
+      })
+    },
+
+    touchStart (e) {
+      if (this.chart && e.touches.length > 0) {
+        const touch = e.touches[0]
+        const handler = this.chart.getZr().handler
+        handler.dispatch('mousedown', {
+          zrX: touch.x,
+          zrY: touch.y
+        })
+        handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        })
+        handler.processGesture(wrapTouch(e), 'start')
+      }
+    },
+
+    touchMove (e) {
+      if (this.chart && e.touches.length > 0) {
+        const touch = e.touches[0]
+        const handler = this.chart.getZr().handler
+        handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        })
+        handler.processGesture(wrapTouch(e), 'change')
+      }
+    },
+
+    touchEnd (e) {
+      if (this.chart) {
+        const touch = e.changedTouches ? e.changedTouches[0] : {}
+        const handler = this.chart.getZr().handler
+        handler.dispatch('mouseup', {
+          zrX: touch.x,
+          zrY: touch.y
+        })
+        handler.dispatch('click', {
+          zrX: touch.x,
+          zrY: touch.y
+        })
+        handler.processGesture(wrapTouch(e), 'end')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-canvas {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/lib/components/ml-echart2/echarts.js

@@ -0,0 +1,11 @@
+import * as echarts from './echarts.simple.min.js'
+import { getAppDpr } from '../../../utils'
+
+/* eslint-disable */
+const eInit = echarts.init
+echarts.init = function (p1, p2, opts = {}) {
+  opts.devicePixelRatio = opts.devicePixelRatio || getAppDpr()
+  return eInit.call(this, p1, p2, opts)
+}
+
+export default echarts