微信小程序使用echarts

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

这是一个很典型的饼图，首先想到了使用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: {
        onInit: function initChart(canvas, width, height, dpr) {
            chart = echarts.init(canvas, null, {
              width: width,
              height: height,
              devicePixelRatio: dpr  // 解决字体模糊问题
            });
            canvas.setChart(chart);
            // 赋值完成后调用这两步更新图表
            /* 2020-12-03 踩坑总结：onInit是在onReady生命周期之后的，
            所以如果在onReady及之前生命周期的请求回调里赋值后立马调用下面这两步setOption
            会报can not read property 'setOption' of undefined 的错误
            解决办法：按现在这种写法，在onReady及之前赋值后不手动setOption，让它初始化时直接
            调用下面这两步setOption，之后要更新图表在对应方法赋值后手动调用下面两步即可。
            */
            let option = getOption(work,rest);
            chart.setOption(option);
        }
      }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     work=525;rest=195;  //这里根据自己的请求获取对应数据赋值给work,rest
  },
  ...
})

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的页面都必须在那个分包目录下，否则会出现不能跨包引用的错误。