今天使用uniapp整合Echarts，實現地圖圖表的展示

可以參照mpvue-echarts

參照：https://github.com/F-loat/mpvue-echarts

https://ask.dcloud.net.cn/article/36288

進行改進

網上有很多教程，但都說的不是很明白，下面直接上步驟

1、npm insta程式設計客棧ll echarts mpvue-echarts

執行該命令後，會在node_modules下生成mpvue-echarts、echarts，然後把mpvue-echarts下的src放到components下，然後在https://echarts.apache.org/zh/builder.html定製echarts的

地圖實現：

<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: '漯河市',{ name: '商丘市',{ name: '三門峽市',{ name: '濟源市',{ name: 'http://www.cppcns.com焦作市',{ name: '安陽市',{ name: '鶴壁市',{ 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 optionMapScBaLLg
 
 = {
				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
							}
						},www.cppcns.com
						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

到此這篇關於uniapp在微信小程式中使用ECharts的方法的文章就介紹到這了,更多相關uniapp使用ECharts內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！