1.首先要下载好ec-canvas插件

2.将插件引入js文件中

3.在 wxml文件中编写

<view style='position:relative;width:100%;height:600rpx;'>
      <ec-canvas id="mychartOne" canvas-id="mychart-bar" ec="{{ecOne}}"></ec-canvas>
</view>

4.实现圆饼图进行延时加载的.

5.实现数据加载形成的圆饼图在onload方法内开始进行数据查询加载

再对数据进行初始化.


6.后续将数据放置在圆饼图中
//自动配置自己要的数据 参照ECharts 微信小程序例子 复制后 修改
//饼图

getOption: function () {
  var that=this;
  console.log("进入了getOption方法中!")
  console.log("dataList", that.data.dataList);
  var option = {
    backgroundColor: "#ffffff",
    color: ["#da8982", "#ec9683","#45B580","#b6e4c7","#B9C753","#dbce8e"],
    series: [{
      label: {
        normal: {
          show: true,
          formatter: ' {b} \n {c} ',//({ d } %)  b=名称 c=数值 d=百分比 \n换行 
          fontSize: 12,
          fontWeight:700,
        }
      },
      labelLine: { show: true },
      type: 'pie',//饼图实例
      center: ['50%', '55%'], //圆饼图的位置
      radius: [0, '60%'], //圆饼图大小的比例
      data: [{
        value: that.data.dataList.wayNum,
        name: '在途量',
        Id:that.data.dataList.matId,
      }, {
          value: that.data.dataList.leadNum,
          name: '未发量',
          Id: that.data.dataList.matId,
        }, {
          value: that.data.dataList.saleNum,
          name: '受订量',
          Id: that.data.dataList.matId,
        }, {
          value: that.data.dataList.dictNum,
          name: '在制量',
          Id: that.data.dataList.matId,
        }, {
          value: that.data.dataList.aiNum,
          name: '可用库存',
          Id: that.data.dataList.matId,
        },{
          value: that.data.dataList.eiNum,
          name: '现有库存',
          Id: that.data.dataList.matId,
        }],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 2, 2, 0.3)'
        }
      }
    }]
  };
  return option;
},

最后可以得到的结果