유 니 앱 이 위 챗 애플 릿 에서 ECharts 를 사용 하 는 방법

오늘 유 니 앱 을 사용 하여 Echarts 를 통합 하여 지도 도표 의 전 시 를 실현 합 니 다.
mpvue-echarts 참조 가능
참조:https://github.com/F-loat/mpvue-echarts
https://ask.dcloud.net.cn/article/36288
개선 을 진행 하 다
인터넷 에는 많은 튜 토리 얼 이 있 지만 잘 모 르 겠 습 니 다.다음은 바로 올 라 가 겠 습 니 다.
1、npm install echarts mpvue-echarts
이 명령 을 실행 하면 nodemodules 에서 mpvue-echarts,echarts 를 생 성 한 다음 에 mpvue-echarts 의 src 를 components 아래 에 놓 은 다음 에https://echarts.apache.org/zh/builder.htmlecharts 의 js 파일 을 맞 춤 형 으로 만 듭 니 다.다음 그림 과 같 습 니 다.

맵 구현:

<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     */
import * as henanJson from 'echarts/map/json/province/henan.json'; /*chart.min.js     */
import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';


export default {
	data() {
		return {
			echarts,
		};
	},
	components: {
		mpvueEcharts
	},
	onLoad() {
		
	},
	methods: {
		renderMap(e) {
			var mydata = [
				{ name: '   ', value: 100 },
				{ name: '   ', value: 10 },
				{ name: '   ', value: 20 },
				{ name: '   ', value: 30 },
				{ name: '    ', value: 40 },
				{ name: '   ', value: 41 },
				{ name: '   ', value: 15 },
				{ name: '   ', value: 25 },
				{ name: '    ', value: 35 },
				{ name: '   ', value: 35 },
				{ name: '   ', value: 35 },
				{ name: '   ', value: 35 },
				{ name: '    ', value: 35 },
				{ name: '   ', value: 35 },
				{ name: '   ', value: 35 },
				{ name: '   ', value: 35 },
				{ name: '   ', value: 35 },
				{ name: '   ', value: 35 },
				{ name: '   ', 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³'
				},
				//       
				visualMap: {
					show:true,
					min: 0,
					max: 100,
					left: 'right',
					orient:'horizontal',
				},
				//    
				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 //  
					}
				]
			};
			//   echarts  
			chart.setOption(optionMap);
			this.$refs.mapChart.setChart(chart);
		}
	}
};
</script>

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

효과:

지도 에 관 한 json 파일 은 echarts 에서 echarts\\map
유 니 앱 이 위 챗 애플 릿 에서 ECharts 를 사용 하 는 방법 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 유 니 앱 이 ECharts 를 사용 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!