wepy echarts组件页面多次使用

在wepy中使用echarts发现了一个问题，使用组件echarts，这个canvas-id不能动态绑定，可能是wepy的原因，
这样就导致了如果同一页面多次使用echarts的情况下，需要很多charts的组件，这样就不符合我们代码规范，而且很low。
在这里，我把组件改良了一下。使用原生标签来写。看图

<template>
  <view class="container">
    <canvas class="ec-canvas" canvas-id="ec-canvas"></canvas>
    <canvas class="ec-canvas-other" canvas-id="ec-canvas-other"></canvas>
  </view>
</template>

<script>
  import wepy from 'wepy'
  import gauge from '@/utils/ec-canvas/gauge'
  import WxCanvas from '@/utils/ec-canvas/wx-canvas'
  import * as echarts from '@/utils/ec-canvas/echarts'
  let chart
  let chartt
  export default class Index extends wepy.page {
    config = {
      navigationBarTitleText: 'wepy-echarts'
    }
    watch = {
      ec (nv, ov) {
        chart.setOption(this.ec.option)
      },
      ecc (nv, ov) {
        chartt.setOption(this.ecc.option)
      }
    }

    data = {
      ec:gauge({
        dataSpo:[{
          value: 0,
          name: '血氧(%)'
        }]
      }),
      ecc:gauge({
        dataSpo:[{
          value: 0,
          name: '血氧(%)'
        }]
      }),
      canvasId: 'ec-canvas',
      canvasClass:'.ec-canvas',
      canvasIdOther: 'ec-canvas-other',
      canvasClassOther:'.ec-canvas-other'
    }

    computed = {
    }

    methods = {
    }
    onLoad() {
      this.init(null,this.canvasId,this.canvasClass,this.ec.option,(canvas, width, height,option)=>{
        chart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        canvas.setChart(chart)
        chart.setOption(option)
      })
      this.init(null,this.canvasIdOther,this.canvasClassOther,this.ecc.option,(canvas, width, height,option)=>{
        chartt = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        canvas.setChart(chartt)
        chartt.setOption(option)
      })
      setInterval(()=>{
        this.ec=gauge({
          dataSpo:[{
            value:  Math.floor(Math.random()*(50 - 100) + 100),
            name: '血氧(%)'
          }]
        })
        this.ecc=gauge({
          dataSpo:[{
            value:  Math.floor(Math.random()*(50 - 100) + 100),
            name: '血氧(%)'
          }]
        })
        this.$apply()
      },1000)
    }
  init (callback,canvasId,canvasClass,option,initChart) {
    const version = wepy.getSystemInfoSync().SDKVersion.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('微信基础库版本过低，需大于等于 1.9.91。' +
            '参见：https://github.com/ecomfe/echarts-for-weixin' +
            '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82')
      return
    }
    let ctx = wepy.createCanvasContext(canvasId, this)

    const canvas = new WxCanvas(ctx, canvasId)

    echarts.setCanvasCreator(() => {
      return canvas
    })

    var query = wepy.createSelectorQuery()
    query.select(canvasClass).boundingClientRect(res => {
      if (typeof callback === 'function') {
        this.chart = callback(canvas, res.width, res.height)
      } else if (true) {
        this.chart = initChart(canvas, res.width, res.height,option)
      }
    }).exec()
  }
  }
</script>
<style>
page{
  width: 100%;
  height: 100%;
}
.container{
  width: 100%;
  height: 100%;
}
.ec-canvas {
  width: 100%;
  height: 100%;
}
.ec-canvas-other {
  width: 100%;
  height: 100%;
}
</style>

ok，把方法封装了一下，每次传入动态的数据，这样就可做到多次使用了。
gauge代码

export default function (params) {
  return {
    option: {
      backgroundColor: '#ffffff',
      series: [
        {
          name: '血氧',
          type: 'gauge',
          radius: '70%',
          startAngle: 180,
          endAngle: 0,
          center: ['50%', '50%'],
          min: 50,
          max: 100,
          splitLine: {           // 分隔线
            length: 8,         // 属性length控制线长
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              width: 1,
              color: '#fff',
              shadowColor: '#fff', // 默认透明
              shadowBlur: 10
            }
          },
          axisTick: {
            splitNumber: 1
          },
          axisLabel: {
            distance: 5,
            fontSize: 8
          },
          pointer: {
            width: 2
          },
          title: {
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontSize: 10,
              color: '#333'
            },
            offsetCenter: [0, '-20%']
          },
          detail: {
            formatter: '{value}',
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontSize: 14
            },
            offsetCenter: [0, '-50%']
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 10,
              shadowBlur: 0,
              color: [
              [0.8, '#FF4F79'],
              [0.9, '#FFD400'],
              [1, '#37D279']
              ]
            }
          },
          data: params.dataSpo
        }
      ]
    }

  }
}

wx-canvas和echarts就是官方的，引入即可，不用写成组件了。
ok，以上既是内容了。
下面附上github代码地址https://github.com/zhangyuexin/repeat-for-wepy-echarts
over