微信小程序云开发 Echarts 下拉刷新

html部分

<view class="container">

<ec-canvas id="mychart-dom-gauge" canvas-id="mychart-gauge" ec="{{ ec }}"></ec-canvas>

</view>

 

index.json 配置
{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"  //导入组件
  },
  "enablePullDownRefresh": true    //开启下拉刷新
}

js部分

import * as echarts from '../../ec-canvas/echarts';

let charts = null

data: {
    ec: {
      onInit: function (canvas, width, height) {
        charts = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        canvas.setChart(charts);
        return charts;
      }
    }
  },
getData() {
    let that = this
    wx.cloud.callFunction({
      name: 'quickstartFunctions',
      data: {
        type: 'queryAll'
      },
      success: function (res) {
        let alldata = that.handledata(res.result.data) //这个函数负责处理数据
        charts.setOption({
          backgroundColor: "#ffffff",
          series: [{
            label: {
              formatter: '{name|{b}}\n{value|{c}}',
              minMargin: 0,
              edgeDistance: 0,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 15,
                  color: '#999'
                }
              }
            },
            toolbox: {
              show: true,
            },
            labelLine: {
              length: 20,
              length2: 20,
              maxSurfaceAngle: 80
            },
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['30%', '60%'],
            data:alldata
          }]
        })
      }
    })
  },

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

 最后效果

 参考 微信小程序中使用ECharts 异步加载数据 实现图表-布布扣-bubuko.com