How to use ECharts in WeChat Mini Programs using uniapp

<template>
	<view class="wrap" >
		<mpvue-echarts id="main" ref="mapChart" :echarts="echarts" @onInit="renderMap" />
	</view>
</template>

<script>
import * as echarts from '@/common/echarts.min'; /*chart.min.js is customized online*/
import * as henanJson from 'echarts/map/json/province/henan.json'; /*chart.min.js is customized online*/
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';


export default {
	data() {
		return {
			echarts,
		};
	},
	components:
		mpvueEcharts
	},
	onLoad() {
		
	},
	methods: {
		renderMap(e) {
			var mydata = [
				{ name: 'Zhengzhou City', value: 100 },
				{ name: 'Luoyang City', value: 10 },
				{ name: 'Kaifeng City', value: 20 },
				{ name: 'Xinyang City', value: 30 },
				{ name: 'Zhumadian City', value: 40 },
				{ name: 'Nanyang City', value: 41 },
				{ name: 'Zhoukou City', value: 15 },
				{ name: 'Xuchang City', value: 25 },
				{ name: 'Pingdingshan City', value: 35 },
				{ name: 'Xinxiang City', value: 35 },
				{ name: 'Luohe City', value: 35 },
				{ name: 'Shangqiu City', value: 35 },
				{ name: 'Sanmenxia City', value: 35 },
				{ name: 'Jiyuan City', value: 35 },
				{ name: 'Jiaozuo City', value: 35 },
				{ name: 'Anyang City', value: 35 },
				{ name: 'Hebi City', value: 35 },
				{ name: 'Puyang City', value: 35 },
				{ name: 'Kaifeng City', value: 45 }
			];
			let { canvas, width, height } = e;
			echarts.setCanvasCreator(() => canvas);
			const chart = echarts.init(canvas, null, {
				width: width,
				height: height
			});
			echarts.registerMap('henan', henanJson);
			canvas.setChart(chart);
			var optionMap = {
				tooltip: {
					trigger: 'item',
					formatter: '{b}: {c}mg/m³'
				},
				//Small navigation icon on the left visualMap: {
					show:true,
					min: 0,
					max: 100,
					left: 'right',
					orient:'horizontal',
				},
				//Configuration properties series: [
					{
						type: 'map',
						mapType: 'henan',
						label: {
							normal: {
								show: true
							},
							emphasis:
								textStyle: {
									color: '#fff'
								}
							}
						},
						itemStyle: {
							normal: {
								borderColor: '#389BB7',
								areaColor: '#fff'
							},
							emphasis:
								areaColor: '#389BB7',
								borderWidth: 0
							}
						},
						animation: false,
						data: mydata //data }
				]
			};
			//Initialize echarts instance chart.setOption(optionMap);
			this.$refs.mapChart.setChart(chart);
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
  width: 100%;
  height: 400px;
}
</style>