miaoguo_master/pages/index/test.js

var wxCharts = require('../../pages/template/wxcharts-min.js');

var ringChart = null;

Page({
  data: {
    navbarInitTop: 0, //导航栏初始化距顶部的距离
    isFixedTop: false, //是否固定顶部
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    var that = this;

    if (that.data.navbarInitTop == 0) {

      //获取节点距离顶部的距离
      wx.createSelectorQuery().select('#navbar').boundingClientRect(function (rect) {
        if (rect && rect.top > 0) {
          var navbarInitTop = parseInt(rect.top);
          that.setData({
            navbarInitTop: navbarInitTop
          });
        }
      }).exec();

    }
  },

  /**
   * 监听页面滑动事件
   */
  onPageScroll: function (e) {
    var that = this;
    var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度

    //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
    var isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;
    //为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
    if (that.data.isFixedTop === isSatisfy) {
      return false;
    }

    that.setData({
      isFixedTop: isSatisfy
    });
  },

  touchHandler: function (e) {
    console.log(ringChart.getCurrentDataIndex(e));
  },
  updateData: function () {
    ringChart.updateData({
      title: {
        name: '80%'
      },
      subtitle: {
        color: '#ff0000'
      }
    });
  },
  onReady: function (e) {
    

    ringChart = new wxCharts({
      animation: false,
      canvasId: 'ringCanvas',
      type: 'ring',
      extra: {
        ringWidth: 8,
        pie: {
          offsetAngle: -90
        }
      },
      title: {
        name: '70',
        color: '#000',
        fontSize: 16
      },
      subtitle: {
      },
      series: [{
        name: '',
        data: 15,
        stroke: false
      }, {
        name: '',
        data: 35,
        stroke: false
      }],
      disablePieStroke: true,
      width: 100,
      height: 100,
      dataLabel: false,
      legend: false,
      background: '#f5f5f5',
      padding: 0,
      yAxisWidth: 0,
      yAxisSplit: 0,
      xAxisHeight: 0,
      xAxisLineHeight: 0,
      legendHeight: 0,
      yAxisTitleWidth: 0,
    });
    
  }
})