微信小程序使用Echarts（异步请求数据）

一、下载ec-canvas插件，官网地址：https://github.com/ecomfe/echarts-for-weixin，下载完成后将ec-canvas目录拷贝到自己项目下。

二、在page下新建一个echarts目录，并在echarts.json中引入。

{
	"usingComponents": {
            // 注意路径
	    "ec-canvas": "../../components/ec-canvas/ec-canvas"
	  }
}

三、echarts.wxml

<view class="container">
	<view class="chart">
		<ec-canvas id="chartPie" canvas-id="chartPie" ec="{{ ecChartPie }}"></ec-canvas>
	</view>
</view>

四、echarts.js

// pages/echarts/echarts.js
import * as echarts from '../../components/ec-canvas/echarts'
var chartPie = null
Page({
  /**
   * 页面的初始数据
   */
  data: {
    ecChartPie: {
      onInit: function (canvas, width, height, dpr) {
        chartPie = echarts.init(canvas, null, {
          width: width,
          height: height,
          devicePixelRatio: dpr // new
        });
        canvas.setChart(chartPie)
        return chartPie
      }
    },
  },
  onReady: function () {
    let that = this
    that.getData()
  },
  getData() {
    let that = this
    // 请求数据
    api.getOrderDetail(orderId).then(res => {
      if (res.code == 200) {
      	// 第一个图表
      	that.initChartPie(res.chartData)
      }
    })
  },
  initChartPie(chartData) {
  	// 根据项目需要配置
    chartPie.setOption({
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: chartData
        }
      ]
    })
  }
})