在微信小程式中使用Echarts，主要分為以下幾步：

1.首先要下載ecomfe/echarts-for-weixin專案，下載後將ec-canvas資料夾複製到小程式專案中，假設放在根目錄下utils資料夾中。

2.在要實現echarts圖的頁面引入echarts.js檔案，例如要在index頁面中展現echarts圖的話，就在index.js檔案中引入。

import * as echarts from '../../utils/ec-canvas/echarts';

3.在index.json中設定使用元件元件。

{
	"usingComponents": {
		"ec-canvas": "../../utils/ec-canvas/ec-canvas"
	}
}
 

4.在index.wxml中使用元件<ec-canvas>，ec1在js中設定，注意，echarts圖的容器 .radar 必須有寬高，而且必須display不能為none。如果需要隱藏此圖表的話，請先生成圖表後再隱藏。ec=“{{ec}}”是在頁面載入進來就已經執行了。

<view class='radar' style="width: 500rpx; height: 500rpx;">
	<ec-canvas id="mychart-dom-radar" canvas-id='mychart-line' ec="{{ec}}"></ec-canvas>
</view>
 

5.在index.js中實現echarts具體設定，具體設定可參考echarts配置項手冊和官方例項。

// pages/result/result.js
import * as echarts from '../../utils/ec-canvas/echarts';
import API from '../../utils/api.js';
var initChart = null;
var initChart1 = null;
var initChart2 = null;
var initChart3 = null;
Page({

  /**
   * 頁面的初始資料
   */
  data: {
		recordId: '',
		ec: {
			onInit: function(canvas, width, height) {
				initChart = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				canvas.setChart(initChart);
				return initChart;
			}
		},
		firstData: {

		}
  },

  /**
   * 生命週期函式--監聽頁面載入完成
   */
	onReady: function (options) {
		var recordId = wx.getStorageSync('recordId');
		this.setData({
			recordId: recordId
		});
		var _this = this;
		setTimeout(_this.getData, 500);
  },
	getData() {
		var _this = this;
		/**請求資料 */
		API.firstPageResultReport({ recordId: _this.data.recordId }, function (res) {
			// console.log('res', res);
			if (res.head.code == 0) {
				_this.setData({
					firstData: res.body
				});
				/**設定第一個echart圖 */
				_this.initChartOption();
			}
		});
	},
	initChartOption: function() {
		var twoLevelIndex = this.data.firstData.radarData;
		initChart.setOption({
			tooltip: {
				show: false
			},
			radar: {
				name: {
					color: '#263C4E',
					backgroundColor: '#FFFFFF',
					fontWeight: 'bold',
					fontSize: 12
				},
				indicator: [
					{ name: '債務償還能力', max: 100 },
					{ name: '保障應\n急能力', max: 100 },
					{ name: '財富積累能力', max: 100 },
					{ name: '財富增長能力', max: 100 },
					{ name: '財務自\n由能力', max: 100 }
				],
				splitArea: {
					show: true,
					areaStyle: {
						color: ['rgba(74,144,226,1)', 'rgba(129,181,242,1)', 'rgba(180,215,255,1)', 'rgba(205,228,254,1)']
					}
				},
				splitLine: {
					show: false
				},
				axisLine: {
					show: false
				},
				splitNumber: 4,
				radius: '60%',
				center: ['50%', '50%']
			},
			series: [{
				type: 'radar',
				data: [
					{
						value: twoLevelIndex,
						name: '二級指標',
						areaStyle: {
							color: '#4A90E2'
						},
						lineStyle: {
							color: '#FFFFFF',
							width: 3
						},
						itemStyle: {
							borderColor: '#FFFFFF',
							borderWidth: 2
						}
					}
				]
			}],
			animation: true,
			animationDuration: 2000
		});
	}
})
 

最後結果為

注： 這樣寫的話可與微信小程式整合，官方給的寫法和微信小程式頁面的載入是非同步進行的，像上述例子中請求資料需要呼叫wx.getStorageSync方法取出快取中的內容，如果要是將方法寫在page的外面的話，有的時候會請求不到資料。這樣寫的好處在於介面的有效利用。減少介面呼叫次數。可實現非同步請求echarts資料。