本人前段時(shí)間做小程序時(shí)遇到了一個(gè)需要使用圖表的需求如下面這樣：

這是一個(gè)很典型的餅圖，首先想到了使用echarts圖表庫(kù)，查閱echarts官方文檔發(fā)現(xiàn)echarts和微信小程序官方合作推出了echarts小程序版，話不多說，直接進(jìn)入正題。

1. 首先，下載 GitHub 上的 ecomfe/echarts-for-weixin 項(xiàng)目。
2. 把ec-canvas拷貝到項(xiàng)目相關(guān)目錄中。
3. 在需要使用echarts的頁(yè)面demo.json：

 "usingComponents": {
    "ec-canvas":"../../../ec-canvas/ec-canvas", //路徑根據(jù)自己實(shí)際項(xiàng)目修改
  },

4. demo.js：

import * as echarts from '../../../ec-canvas/echarts'  //引入echarts
let chart, work,rest;  //定義全局變量
function getOption(work,rest){
    let option = {     //echarts配置項(xiàng)可查閱官方文檔根據(jù)自己需求進(jìn)行相應(yīng)配置
        tooltip: {
            trigger: 'item',
            formatter: ': hjfnt5h%'
        },
        series: [
            {
                type: 'pie',
                radius: ['65%', '80%'],
                label: {
                    show: false,
                    position: 'center'
                },
                data: [
                    {value: work, name: '工作時(shí)間'},
                    {value: rest, name: '休息時(shí)間'},
                ]
            }
        ],
        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. 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
 >: function (options) {
     work=525;rest=195;  //這里根據(jù)自己的請(qǐng)求獲取對(duì)應(yīng)數(shù)據(jù)賦值給work,rest
     // 賦值完成后調(diào)用這兩步更新圖表
     let option = getOption(work,rest);
     chart.setOption(option);
  },
  ...
})

5. demo.wxml：

<view class="day">
    <ec-canvas  ec="{{ ec }}"></ec-canvas>
    <view>總時(shí)間長(zhǎng)<text>8小時(shí)45分鐘</text></view>
</view>

6. css就不貼了相信你們都能搞定。

注意：如果你的ec-canvas文件夾拷貝在某一個(gè)分包（subPackages）中，那所有使用echarts的頁(yè)面都必須在那個(gè)分包目錄下，否則會(huì)出現(xiàn)不能跨包引用的錯(cuò)誤。