元件:

canvas-id不能自定義貌似是wepy的原因

<style>
</style>
<template>
  <canvas class="ec-canvas" canvas-id="eChart" ></canvas>
</template>
<script>
  import wepy from 'wepy'
  import * as echarts from '../plugins/ec-canvas/echarts'
  import WxCanvas from '../plugins/ec-canvas/wx-canvas'
  export default class ecCanvas extends wepy.component {
    props = {
      ec: {
        type: Object
      },
      canvasId: {
        type: String,
        default: 'eChart'
      }
    }
    data = {
      ec: null,
      canvasId: null,
      chart: null
    }
    onLoad() {
      const version = wx.version.version.split('.').map(n => parseInt(n, 10))
      const isValid = version[0] > 1 || (version[0] === 1 && version[1] >= 9) || (version[0] === 1 && version [1] === 9 && version[2] >= 91)
      if (!isValid) {
        console.error('This version of Wexin is not supported by ECharts. Please update Wexin with versions after 1.9.91')
        return
      }
      const ctx = wx.createCanvasContext(this.canvasId, this.$wxpage)

      const canvas = new WxCanvas(ctx)
      echarts.setCanvasCreator(() => {
        return canvas
      })
      var query = wx.createSelectorQuery().in(this.$wxpage)
      query.select('.ec-canvas').boundingClientRect(res => {
        if (this.ec && this.ec.onInit) {
          this.chart = this.ec.onInit(canvas, res.width, res.height)
        }
      }).exec()
    }
    methods = {
      touchStart: function(e) {
        if (this.chart && e.touches.length > 0) {
          var touch = e.touches[0]
          this.chart._zr.handler.dispatch('mousedown', {
            zrX: touch.x,
            zrY: touch.y
          })
          this.chart._zr.handler.dispatch('mousemove', {
            zrX: touch.x,
            zrY: touch.y
          })
        }
      },
      touchMove: function(e) {
        if (this.chart && e.touches.length > 0) {
          var touch = e.touches[0];
          this.chart._zr.handler.dispatch('mousemove', {
            zrX: touch.x,
            zrY: touch.y
          })
        }
      },
      touchEnd: function (e) {
        if (this.chart) {
          var touch = e.changedTouches ? e.changedTouches[0] : {}
          this.chart._zr.handler.dispatch('mouseup', {
            zrX: touch.x,
            zrY: touch.y
          })
          this.chart._zr.handler.dispatch('click', {
            zrX: touch.x,
            zrY: touch.y
          })
        }
      }
    }
  }
</script>
 

page:

</template>
  <view class="container">
    <ecCanvas :ec.sync="ec"></ecCanvas>
  </view>
</template>
<script>
  import wepy from 'wepy'
  import echarts from '../plugins/ec-canvas/echarts'
  import ecCanvas from '../components/eCanvas'
  export default class page extends wepy.page {
和echarts一致
 

components = {
  ecCanvas: ecCanvas
}

未經允許請勿轉載