微信小程序 Echarts 异步加载

** author by 云千 博客地址：https://www.cnblogs.com/yunqian2017/ **

最近做小程序的时候，需要用到扇形图，记录一下代码的思路

准备

ECharts 和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本
官方文档：https://echarts.apache.org/zh/tutorial.html#在微信小程序中使用 ECharts
下载地址： https://github.com/ecomfe/echarts-for-weixin
示例看官方文档

代码思路

1. 图表数据单独放在pages外面
2. onload 初始化图表对象, ec设置为延时加载
3. pages里面写init(初始化)， getData(异步获取数据)，getOption(设置图表数据)

代码

wxml

<view class="chart">
  <view class="container">
        <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ec}}"></ec-canvas>
  </view>
</view>

wxss

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
     100%;
    height: 100%;
}

ec-canvas {
     100%;
    height: 100%;
}

js

//注意格式，这一行书写不正确可能报 init not define
import * as echarts from '../../ec-canvas/echarts';

var seriousData = {data:[
    {value: 0, name: '预算'},
    {value: 0, name: '支出'}
]}

Page({
    data: {
        ec: {
            // onInit: initChart
            // 允许延迟加载
            lazyLoad: true
        }
    },

    //设置图表的数据
    getOption: function () {
        var option = {
            color: ['#ffc758', '#dddddd'],
            tooltip: {
                trigger: 'item'
            },
            title: {
                x: 'center',
                y: 'center',
            },
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: seriousData.data
                }
            ]
        }
        return option;
    },
    //绘制环形图
    initChart:function() {
    this.barComponent.init((canvas, width, height) => {
        // 初始化图表
        const Chart = echarts.init(canvas, null, {
           width,
          height: height
        });
      //获取数据
        Chart.setOption(this.getOption());
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return Chart;
      });
    },

  
    // 获取表格的数据
   //自己写
    GetChartData: function (uid) {
        var that = this
        wx.request({
            url: ' ', 
            method: 'POST',
            data: {

            },

            dataType: 'json',
            success(res) {
                console.log("获取数据")
                console.log(res.statusCode)
               
                // 设置数据显示
                if(res.statusCode != 500){
                   const userData=res.data.data
                   seriousData.data[0].value=userData.LeftBudget
                   seriousData.data[1].value=userData.Out
                    that.initChart()
                }
                else{
                    console.log("后端返回异常！")
                }
            }
        })
    },

    
    /*生命周期函数--监听页面加载*/
    onLoad: function (options) {
//注意mychart-dom-bar是wxml中对应图表的id
        this.barComponent = this.selectComponent('#mychart-dom-bar');
        this.GetChartData()
    },


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

})