f2-canvas简单应用

// pages/total/total.js

//引入 F2 用于绘制图表
import F2 from ‘…/…/f2-canvas/lib/f2’;

let chart = null
var chartdata = null

function initChart(canvas, width, height) {

// const map = {
// ‘餐饮’: ‘40%’,
// ‘交通’: ‘20%’,
// ‘教育’: ‘18%’,
// ‘住房’: ‘15%’,
// ‘日用’: ‘5%’,
// ‘其他’: ‘2%’,
// };

// const data = chartdata

chart = new F2.Chart({
el: canvas,
width,
height
});
chart.source(chartdata, {
percent: {
formatter(val) {
return val * 100 + ‘%’;
}
}
});
// chart.legend({
// position: ‘bottom’,
// itemFormatter(val) {
// return val + ’ ’ + map[val];
// }
// });
chart.tooltip(false);
chart.coord(‘polar’, {
transposed: true,
innerRadius: 0.7,
radius: 0.8
});
chart.axis(false);
chart.interval()
.position(‘a*percent’)
.color(‘name’, [’#1890FF’, ‘#13C2C2’, ‘#2FC25B’, ‘#FACC14’, ‘#F04864’, ‘#8543E0’, ‘#F04864’, ‘#8543E0’])
.adjust(‘stack’)
.style({
lineWidth: 1,
stroke: ‘#fff’,
lineJoin: ‘round’,
lineCap: ‘round’
})

console.log(“kdjkjkjk”)
chart.render();
return chart;
}

Page({

/**

• 页面的初始数据
  */
  data: {
  opts: {
  onInit: initChart
  },
  isClick: true,
  isClickTwo: true,

select: "收入",
selectTwo: "月",
tab: ['收入', '支出'],
tabtwo: ['月', '年'],
chartsdata: [],
haveMonth: false,
notHaveMonth: true,

queryResult: []

},

bindChange: function (e) {
const val = e.detail.value
this.setData({
select: this.data.tab[val[0]],
})
},

bindChangeTwo: function (e) {
const val = e.detail.value
this.setData({
selectTwo: this.data.tabtwo[val[0]],
})
},

confirm: function (e) {
this.setData({
isClick: true
})
},

confirmTwo: function (e) {
if (this.data.selectTwo == “月”) {
this.setData({
isClickTwo: true,
haveMonth: false,
notHaveMonth: true
})
} else {
this.setData({
isClickTwo: true,
haveMonth: true,
notHaveMonth: false
})
}
},

cancel: function (e) {
this.setData({
isClick: true
})
},

cancelTwo: function (e) {
if (this.data.selectTwo == “月”) {
this.setData({
isClickTwo: true,
haveMonth: false,
notHaveMonth: true
})
} else {
this.setData({
isClickTwo: true,
haveMonth: true,
notHaveMonth: false
})
}
},

show: function (e) {
this.setData({
isClick: false
})
},

showTwo: function (e) {
this.setData({
isClickTwo: false
})
},

/**

• 生命周期函数–监听页面加载
  */
  onLoad: function (options) {
  let time = new Date();
  let m = time.getMonth() + 1
  let y = time.getFullYear()

const db = wx.cloud.database()
// 查询当前用户所有的 counters
db.collection('atest').where({
  _openid: this.data.openid,
  time: db.RegExp({
    regexp: y + '-'+'0' + m + '-'
  })
}).get({
  success: res => {
    this.setData({
      queryResult: res.data,
    })
    let l = Object.keys(this.data.queryResult).length
    
    if(this.data.select=="收入"){

      var map = new Object()
      let sum = 0
      //遍历聚合原始数据
      for (var i = 0; i <4; i++) {
        
        if (this.data.queryResult[i].sort == "1") {
          
          var oldData = this.data.queryResult[i];
          sum += oldData.price;
          
          var newData =new Object();
          
          if (map[oldData.type] == null) {
            
            newData.type = this.data.queryResult[i].type;
            newData.price = this.data.queryResult[i].price;
            
            map[oldData.type] = newData;
          } else {
             newData = map[oldData.type];
             newData.price += oldData.price
            
          }
         
        }
        
      }
      
        //组装新数组
        var relDatas = []
        let a = parseInt(sum)
        for (var i in map) {
          let b = parseInt(map[i].price)
          let data = b/a

          //保留小数后两位
          let f = parseFloat(data);
          if (isNaN(f)) {
            return;
          }
          f = Math.round(data * 100) / 100;
          
          //组成想要的数据格式存入数组
          let temp = new Object
          temp.name = map[i].type
          temp.percent = f
          temp.a = '1'

          relDatas.push(temp);
        }
      
        this.setData({
          chartsdata: relDatas
        })
      
        chartdata = relDatas
        
    }
    
    this.ecComponent = this.selectComponent('#pieSelect'); 
    console.log(this.ecComponent);
    this.ecComponent.chart.changeData(chartdata); 
    
    // console.log('[数据库] [查询记录] 成功: ', res)
  },
  fail: err => {
    wx.showToast({
      icon: 'none',
      title: '查询记录失败'
    })
    console.error('[数据库] [查询记录] 失败：', err)
  }
})

},

/**

• 生命周期函数–监听页面初次渲染完成
  */
  onReady: function () {

},

/**

• 生命周期函数–监听页面显示
  */
  onShow: function () {

},

/**

• 生命周期函数–监听页面隐藏
  */
  onHide: function () {

},

/**

• 生命周期函数–监听页面卸载
  */
  onUnload: function () {

},

/**

• 页面相关事件处理函数–监听用户下拉动作
  */
  onPullDownRefresh: function () {

},

/**

• 页面上拉触底事件的处理函数
  */
  onReachBottom: function () {

},

/**

• 用户点击右上角分享
  */
  onShareAppMessage: function () {

},
})