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

在微信小程序中使用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
		});
	}
})

最后结果为

微信小程序中的echarts图

注：这样写的话可与微信小程序整合，官方给的写法和微信小程序页面的加载是异步进行的，像上述例子中请求数据需要调用wx.getStorageSync方法取出缓存中的内容，如果要是将方法写在page的外面的话，有的时候会请求不到数据。这样写的好处在于接口的有效利用。减少接口调用次数。可实现异步请求echarts数据。

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

猜你喜欢