wepy 中使用 f2完成圖表

各種弄

//echarts.wpy
<style lang="scss">
  .f2-canvas {
    width: 100%;
    height: 100%;
  }
</style>
<template>
  <canvas
    class="f2-canvas"
    :canvas-id="canvasId"
    @init="init"
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd"
    @longtap="press">
  </canvas>
</template>
<script>
  import wepy from '@wepy/core'
  import {
    F2Mixin
  } from '../mixins/f2'

  wepy.component({
    mixins: [F2Mixin],
    props: {
      onInit: {
        type: Function,
        default: () => {}
      },
      canvasId: {
        type: String,
        default: 'canvasId'
      },
      lazyLoad: {
        type: Boolean,
        default: true
      },
      propData:{
        required:true
      },
      conf: {
        type: Object,
        default: {}
      }
    },
    data: {

    }
  })
</script>

//demo.wpy 引用插件
<style lang="scss">
.page-wrap{
  height: 100vh;
}
</style>
<template>
  <div class="page-wrap">
    <echarts ref="pie" :propData="propData" :onInit="chartInit"></echarts>
  </div>
</template>
<script>
  import wepy from '@wepy/core'
  import store from '../store'
  import pageMixin from '../mixins'
  import {
    createF2Chart
  } from '../mixins/f2'

  const initFunc = function(el, config,data) {

    if (!el) return
    const {width,height} = config
    let chart = createF2Chart({
      el,
      width,
      height
    })

    let map = {
      芳華: '40%',
      妖貓傳: '20%',
      機器之血: '18%',
      心理罪: '15%',
      尋夢環遊記: '5%',
      其他: '2%'
    }
    let _data =  data
    chart.source(_data, {
      percent: {
        formatter: function formatter(val) {
          return val * 100 + '%'
        }
      }
    })
    chart.legend({
      position: 'right',
      itemFormatter: function itemFormatter(val) {
        return val + '  ' + map[val]
      }
    })
    chart.tooltip(false)
    chart.coord('polar', {
      transposed: true,
      radius: 0.85
    })
    chart.axis(false)
    chart
      .interval()
      .position('a*percent')
      .color('name', [
        '#1890FF',
        '#13C2C2',
        '#2FC25B',
        '#FACC14',
        '#F04864',
        '#8543E0'
      ])
      .adjust('stack')
      .style({
        lineWidth: 1,
        stroke: '#fff',
        lineJoin: 'round',
        lineCap: 'round'
      })
      .animate({
        appear: {
          duration: 1200,
          easing: 'bounceOut'
        }
      })
    chart.render()

    return chart
  }

  wepy.page({

    store,
    mixins: [pageMixin],
    data: {
      chartInit: initFunc,
      propData:[
        {
          name: '芳華',
          percent: 0.4,
          a: '1'
        },
        {
          name: '妖貓傳',
          percent: 0.2,
          a: '1'
        },
        {
          name: '機器之血',
          percent: 0.18,
          a: '1'
        },
        {
          name: '心理罪',
          percent: 0.15,
          a: '1'
        },
        {
          name: '尋夢環遊記',
          percent: 0.05,
          a: '1'
        },
        {
          name: '其他',
          percent: 0.02,
          a: '1'
        }
      ]
    },
    computed() {

    },
    methods: {

    },
    onReady() {
      setTimeout(() => {
        this.$refs.pie.init()
      }, 100)
    },
    onLoad() {

    }
  })
</script>
<config>
  {
    "navigationBarTitleText": "demo",
    "navigationBarTextStyle": "black",
    "usingComponents": {
      "echarts": "~@/components/echarts",//npm組件
      "icon": "~@/components/icon",
      "popup-layer": "~@/components/popup-layer"
    }
  }
</config>

// f2.js mixin
import Renderer from '../lib/f2-canvas/lib/renderer'
import F2 from '../lib/f2-canvas/lib/f2'

F2.Util.addEventListener = function(source, type, listener) {
  source.addListener(type, listener)
}

F2.Util.removeEventListener = function(source, type, listener) {
  source.removeListener(type, listener)
}

F2.Util.createEvent = function(event, chart) {
  const type = event.type
  let x = 0
  let y = 0
  const touches = event.touches
  if (touches && touches.length > 0) {
    x = touches[0].x
    y = touches[0].y
  }

  return {
    type,
    chart,
    x,
    y
  }
}

// 暴露出去省的每個地方都引入了
export const createF2Chart = (opts) => new F2.Chart(opts)

export const F2Mixin = {

  data: {

  },
  methods: {
    init(callback) {
      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('微信基礎庫版本過低，需大於等於 1.9.91。')
        return
      }

      const ctx = wx.createCanvasContext(this.canvasId, this.$wx) // 獲取小程序上下文
      const el = new Renderer(ctx)
      this.canvas = el

      const query = wx.createSelectorQuery().in(this.$wx)
      query.select('.f2-canvas').boundingClientRect(res => {

        let {width,height} = res
        const config = {width,height,...this.conf}
        if (typeof callback === 'function') {
          this.chart = callback(el, config,this.propData)
        } else if (this.onInit) {
          this.chart = this.onInit(el, config,this.propData)
        }
      }).exec()
    },
    touchStart(e) {
      if (this.canvas) {
        this.canvas.emitEvent('touchstart', [e])
      }
    },
    touchMove(e) {
      if (this.canvas) {
        this.canvas.emitEvent('touchmove', [e])
      }
    },
    touchEnd(e) {
      if (this.canvas) {
        this.canvas.emitEvent('touchend', [e])
      }
    },
    press(e) {
      if (this.canvas) {
        this.canvas.emitEvent('press', [e])
      }
    }
  },
  ready() {
    if (!this.lazyLoad) {
      this.init()
    }
  },
}

使用的lib下載
下載

資源鏈接
小程序上渲染 F2
提示defaultView的bug
對我最重要的倉庫，稍微調節即可完成使用