本人前段时间做小程序时遇到了一个需要使用图表的需求如下面这样：

这是一个很典型的饼图，首先想到了使用echarts图表库，查阅echarts官方文档发现echarts和微信小程序官方合作推出了echarts小程序版，话不多说，直接进入正题。

1. 首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。
2. 把ec-canvas拷贝到项目相关目录中。
3. 在需要使用echarts的页面demo.json：

 "usingComponents": {
    "ec-canvas":"../../../ec-canvas/ec-canvas", //路径根据自己实际项目修改
  },

4. demo.js：

import * as echarts from '../../../ec-canvas/echarts'  //引入echarts
let chart, work,rest;  //定义全局变量
function getOption(work,rest){
    let option = {     //echarts配置项可查阅官方文档根据自己需求进行相应配置
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {d}%'
        },
        series: [
            {
                type: 'pie',
                radius: ['65%', '80%'],
                label: {
                    show: false,
                    position: 'center'
                },
                data: [
                    {value: work, name: '工作时间'},
                    {value: rest, name: '休息时间'},
                ]
            }
        ],
        color:['#1ddab8','#eaeaea']
    };
    return option;
}
Page({
  data: {
      ec: {
       >: function initChart(canvas, width, height) {
            chart = echarts.init(canvas, null, {
              width: width,
              height: height
            });
            canvas.setChart(chart);
            let option = getOption(work,rest);
            chart.setOption(option);
        }
      }
  },

  /**
 1. 生命周期函数--监听页面加载
   */
 >: function (options) {
     work=525;rest=195;  //这里根据自己的请求获取对应数据赋值给work,rest
     // 赋值完成后调用这两步更新图表
     let option = getOption(work,rest);
     chart.setOption(option);
  },
  ...
})

5. demo.wxml：

<view class="day">
    <ec-canvas  ec="{{ ec }}"></ec-canvas>
    <view>总时间长<text>8小时45分钟</text></view>
</view>

6. css就不贴了相信你们都能搞定。

注意：如果你的ec-canvas文件夹拷贝在某一个分包（subPackages）中，那所有使用echarts的页面都必须在那个分包目录下，否则会出现不能跨包引用的错误。