关于微信小程序wepy框架下wx-charts的使用

wx-charts在微信小程序wepy框架下的使用

wx-charts

微信小程序主流的图表工具

基于 Canvas，体积小
支持图表类型

饼图 pie
圆环图 ring
线图 line，scrollline
柱状图 column
区域图 area
雷达图 radar

直接上代码跟效果图，在这里我只选择环状图进行举例。。。

// An highlighted block
<style lang='css'>
.canvas{
  height: 280px;
  width: 100%;
}
</style>
<template>
  <view class="container">
    <canvas canvas-id="ringCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
    <!--<button type="primary" bindtap="updateData" style="margin-top:100rpx">更新title</button>-->
  </view>
</template>
<script>
  import wepy from 'wepy'
  var WxChartsring = require('../../utils/wxcharts-min.js')
  var ringChart = null
  export default class field extends wepy.page {
    config = {
      navigationBarTitleText: '环状图'
    }
    components = {
    }
    data = {
    }
    methods = {
    }
    events = {
    }
    onShow() {
    }
    touchHandler(e) {
      console.log(ringChart.getCurrentDataIndex(e))
    }
    updateData() {
      ringChart.updateData({
        title: {
          name: '80%'
        },
        subtitle: {
          color: '#ff0000'
        }
      })
    }
    onLoad() {
      var windowWidth = 320
      try {
        var res = wx.getSystemInfoSync()
        windowWidth = res.windowWidth
      } catch (e) {
        console.error('getSystemInfoSync failed!')
      }
      ringChart = new WxChartsring({
        animation: true,
        canvasId: 'ringCanvas',
        type: 'ring',
        extra: {
          ringWidth: 25,
          pie: {
            offsetAngle: -45
          }
        },
        title: {
          name: '周六',
          color: '#7cb5ec',
          fontSize: 25
        },
        subtitle: {
          name: '04.03',
          color: '#666666',
          fontSize: 15
        },
        series: [{
          name: '正常 15人',
          data: 78,
          stroke: false
        }, {
          name: '休假 35人',
          data: 35,
          stroke: false
        }, {
          name: '漏卡 15人',
          data: 15,
          stroke: false
        }, {
          name: '早退 63人',
          data: 63,
          stroke: false
        }, {
          name: '迟到 23人',
          data: 23,
          stroke: false
        }],
        disablePieStroke: false,
        width: windowWidth,
        height: 270,
        dataLabel: true,
        legend: true,
        background: '#f5f5f5',
        padding: 0
      })
      ringChart.addEventListener('renderComplete', () => {
        console.log('renderComplete')
      })
      setTimeout(() => {
        ringChart.stopAnimation()
      }, 500)
    }
  }
</script>

本人只是学习使用所以代码中数据没有做成动态，请忽略这点。
每一个插件都不是完美的，wx-charts虽然体积小容易上手，但更复杂的图表无法满足，只能做一下简单的图表,关于更为复杂的图表本人推荐echarts，唯一缺点对于小程序来说体积有点大。

来源于wx-charts github示例

https://github.com/xiaolin3303/wx-charts
https://github.com/xiaolin3303/wx-charts-demo