toktok-front/toktok-wx-applet/pages/test/test.js

// pages/test/test.js
import uCharts from '../../utils/u-charts.js';
var uChartsInstance = {};
Page({

  /**
   * 页面的初始数据
   */
  data: {
    cWidth: 750,
    cHeight: 500
  },

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

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    //这里的第一个 750 对应 css .charts 的 width
    const cWidth = 750 / 750 * wx.getSystemInfoSync().windowWidth;
    //这里的 500 对应 css .charts 的 height
    const cHeight = 500 / 750 * wx.getSystemInfoSync().windowWidth;
    this.setData({ cWidth, cHeight });
    this.getServerData();
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },
  getServerData() {
    //模拟从服务器获取数据时的延时
    setTimeout(() => {
      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
      let res = {
        categories: ["原麦汁浓度","酒精度","级别","喜爱度","苦度值"],
        series: [
          {
            name: "当前",
            data: [90,110,165,195,187]
          },
          {
            name: "平均",
            data: [190,210,105,35,27]
          }
        ]
      };
      this.drawCharts('uxXiJSVkwzQtHtxxJadNKGaTRVZrgait', res);
    }, 500);
  },
  drawCharts(id,data){
    const ctx = wx.createCanvasContext(id, this);
    uChartsInstance[id] = new uCharts({
        type: "radar",
        context: ctx,
        width: this.data.cWidth,
        height: this.data.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: "#FFFFFF",
        color: ["#FFA100","#258AFB"],
        padding: [5,5,5,5],
        dataLabel: false,
        enableScroll: false,
        border: false,
        legend: {
          show: false,
          position: "right",
          lineHeight: 25
        },
        extra: {
          radar: {
            gridType: "radar",
            gridColor: "#EEEEEE",
            gridCount: 5,
            opacity: 0.2,
            max: 200,
            gridEval: 5,
            labelShow: true,
            border: true
          }
        }
      });
  },
  tap(e){
    uChartsInstance[e.target.id].touchLegend(e);
    uChartsInstance[e.target.id].showToolTip(e);
  }
})