微信原生小程序使用echarts

 html：

view class="echats" >
	<ec-canvas id="mychart-dom-bar"  id="mychart-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
</view>

 js:

const app = getApp();
//首先引入wxcharts.js插件
var wxCharts = require("../../../../dist/wxcharts.js");
var dateTimePicker = require('../../../../utils/dateTimePicker.js');
import * as echarts from '../../../../components/ec-canvas/echarts';
//定义记录初始屏幕宽度比例，便于初始化
var windowW = 0;

function setOption(chart, data) {
	console.log(data)
	var option = {
		title: {
			text: '收益统计',
			left: 'center'
		},
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: 'horizontal',
			left: 'center',
			bottom: '10'
		},
		series: [{
			name: '回收类型',
			type: 'pie',
			radius: '48%',
			center: ['50%', '42%'],
			data: data,
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}]
	};
	chart.setOption(option)
}
Page({
	data: {
		start_date:'',
		end_date:'',
		tongji_data: {},
		ec: {
			lazyLoad: true,
		},
		timer: '',
	},

	onLoad(options) {
		var that = this
		that.getTody();
		this.setData({ //每隔一分钟刷新一次
			timer: setInterval(function() {
				that.getList();
			}, 60000)
		})
	},
	onReady: function() {
		this.oneComponent = this.selectComponent('#mychart-pie');
	},
	onUnload: function() {
		clearInterval(this.data.timer)
	},
	getTody() {
		var date = new Date();
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var strDate = date.getDate();
		var tempstr = year+'-'+month+'-'+strDate;
		console.log(tempstr)
		this.setData({
			start_date: tempstr,
			end_date:""
		})
		this.getList();
	},
	getList() {
		var that = this
		app.util.request({
			'url': 'entry/wxapp/Api',
			'data': {
				m: 'ox_reclaim',
				r: 'store.count',
				uid: wx.getStorageSync('uid'),
				time: this.data.start_date,
				time2:this.data.end_date,
			},
			success(res) {
				console.log(res)
				that.setData({
					tongji_data: res.data.data
				})
				var arr = [];
				res.data.data.piedata.forEach(item => {
					var obj = {
						name: item.name,
						value: item.data,
					}
					arr.push(obj);
				})
				that.init_Echarts(arr)
			}
		})
	},
	init_Echarts(data) {
		this.oneComponent.init((canvas, width, height,dpr) => {
			const chart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixeRatio:dpr,
			});
			canvas.setChart(chart)
			setOption(chart, data)
			this.chart = chart;
			return chart;
		})
	},
	changeDate(e) {
		if(e.currentTarget.dataset.id==1){
			// 开始时间
			this.setData({
				start_date: e.detail.value
			});
		}else{
			//结束时间
			this.setData({
				end_date: e.detail.value
			});
		}
		console.log(e)
		this.getList()
	},

})

css:样式

/* echarts图表 */
.echats{
	width: 100%;
	height: 710rpx;
	margin-top: 30rpx;
}
ec-canvas{
	width:100%;
	height:100%;
}

效果图：