ssj_book/parents/pages/good_books/good_books.js

// parents/pages/good_books/good_books.js
import F2 from '../../../utils/f2-canvas/lib/f2';
let chart;
import { routers, viewImage, sharePage, isFn, getGlobalVal } from '../../../utils/util.js'
import { GetBookRecommend } from '../../../utils/api.js'
const { navigateTo, redirectTo, navigateBack } = routers()
const { globalData, hasLibraryService, hasVipService } = getApp()
const { baseImgUrl, qrcodeInvalidToastText } = globalData

Page({

  /**
   * 页面的初始数据
   */
  data: {
    baseImgUrl,
    isLoaded: false,
    opts: {
      lazyLoad: true // 延迟加载组件
    },
    borrowInfoList: [
      // {
      //   "child_theme": "child5",
      //   "book_num": 5,
      //   "aliases": "地域江湖",
      //   "theme_name": "地域江湖",
      //   "bookList": [
      //     {
      //       "summary": "好",
      //       "local_image": "/2017/11/20/ccf1b904a7d730734600c707111aa5484a2b070936566f6bdbfae788d90b75ee.jpeg",
      //       "isbn13": "9787111520450",
      //       "title": "用户力测试"
      //     },
      //     {
      //       "summary": "好",
      //       "local_image": "/2017/11/20/ccf1b904a7d730734600c707111aa5484a2b070936566f6bdbfae788d90b75ee.jpeg",
      //       "isbn13": "9787111520450",
      //       "title": "用户力测试"
      //     }
      //   ]
      // },
      // {
      //   "child_theme": "child6",
      //   "book_num":15,
      //   "aliases": "江湖",
      //   "theme_name": "江湖",
      //   "bookList": [
      //     {
      //       "summary": "好",
      //       "local_image": "/2017/11/20/ccf1b904a7d730734600c707111aa5484a2b070936566f6bdbfae788d90b75ee.jpeg",
      //       "isbn13": "9787111520450",
      //       "title": "用户力测试"
      //     }
      //   ]
      // },
    ],
    headInfoList: [
      // {
      //   "name": "共享地球",
      //   "percent": 1,
      //   "book_count": 190,
      //   "proportion": "100%",
      //   "child_count": 5,
      //   "bnum": 0
      // },
      // {
      //   "name": "自我成长",
      //   "percent": 1,
      //   "book_count": 22,
      //   "proportion": "0%",
      //   "child_count": 6,
      //   "bnum": 0
      // },
      // {
      //   "name": "学科素养",
      //   "percent": 1,
      //   "book_count": 19,
      //   "proportion": "0%",
      //   "child_count": 8,
      //   "bnum": 0
      // },
      // {
      //   "name": "多彩世界",
      //   "percent": 1,
      //   "book_count": 90,
      //   "proportion": "0%",
      //   "child_count": 6,
      //   "bnum": 0
      // }
    ],
    footerData: {
      actIndex: 1,
      list: [
        {
          text: '找好书',
          icon: '../../../assets/book_gray.png',
          actIcon: '../../../assets/book_blue.png',
          url: 'parents/pages/home/home',
          zindex: 3,
        },
        {
          text: '好书推荐',
          icon: '../../../assets/wish_gray.png',
          actIcon: '../../../assets/wish_blue.png',
          url: 'parents/pages/good_books/good_books',
          zindex: 3,
        },
        {
          text: '我的',
          icon: '../../../assets/me_gray.png',
          actIcon: '../../../assets/me_blue.png',
          url: 'parents/pages/me/me',
          zindex: 3,
        }
      ]
    },
    nodataArray: {
      text: "暂无阅读计划",
      margin: '140rpx auto'
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    options.vipId = getGlobalVal('vipId', `vipId_${getGlobalVal('userId')}`)
    options.libId = getGlobalVal('library').id || ''
    this.setData({ options })
    this.getData()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    const obj = { navigateTo, redirectTo, navigateBack, viewImage }
    for (const i in obj) {
      this[i] = obj[i]
    }
  },

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

  },

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

  },

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

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData(() => {
      wx.stopPullDownRefresh()
    })
  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    if (isFn(sharePage)) return sharePage()
  },

  /**
   * 获取好书推荐
   */
  getData: function (cb) {
    const continuousFn = { fn: this.getData, param: { ...arguments } }
    const { libId = '', vipId = '' } = this.data.options
    GetBookRecommend({ data: { libId, vipId }, continuousFn }).then(res => {
      const { borrowInfoList} = res.data
      const headInfoList = (res => {
        for (let i in res) {
          res[i]['name'] = res[i]['parent_name']
          res[i]['percent'] = ~~res[i]['book_count']
        }
        return res
      })(res.data.headInfoList)
      this.setData({ borrowInfoList, headInfoList, isLoaded: true })
      if (isFn(cb)) cb()
      this.goodBooksPicture()
    }).catch(res => {
      this.setData({ isLoaded: true })
      if (isFn(cb)) cb()
    })
  },

  /**
   * 好书推荐图表
   */
  goodBooksPicture: function () {
    const { headInfoList = [] } = this.data
    const chartComponent = this.selectComponent('#pieSelect')
    const fn = (canvas, width, height) => {
      const chart = new F2.Chart({
        el: canvas,
        width,
        height
      });

      chart.source(headInfoList, {
        percent: {
          formatter: function formatter(data) {
            return data.child_count + '个主题' + '\n' + data.book_count + '本书' + '\n' + '已借阅:' + data.bnum + '本'
          }
        }
      });

      chart.legend(false);

      chart.tooltip(false);

      chart.coord('polar', {
        transposed: true,
        radius: 0.75,
        innerRadius: 0.48
      });

      chart.axis(false);

      chart
        .interval()
        .position('a*percent')
        .color('name', ['#FF6464', '#FFCE4A', '#00B7FF', '#FF80A8'])
        .adjust('stack')
        .style({
          lineWidth: 0,
          stroke: '#fff',
          lineJoin: 'round',
          lineCap: 'round'
        });

      chart.interaction('pie-select', {
        cancelable: false,
        animate: {
          duration: 300,
          easing: 'backOut'
        },
        onStart:res=>{
          // console.log(res)
        },
        onEnd: res => {
          // console.log(res)
          // const { shape, data, shapeInfo, selected } = res
          // const { child_count, book_count, bnum } = data
          // if (shape && selected) {
          //   this.setData({
          //     message: child_count + '个主题' + '\n' + book_count + '本书' + '\n' + '已借阅:' + bnum + '本'
          //   })
          // }
        }
      });
      chart.render();
      return chart;
    }
    chartComponent.init(fn)
  }
})