uniapp在微信小程序中使用ECharts的方法

更新時(shí)間：2021年06月24日 10:59:49 作者：wxh958548129

本文主要介紹了uniapp集成Echarts，實(shí)現(xiàn)地圖圖表的展示，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

今天使用uniapp集成Echarts，實(shí)現(xiàn)地圖圖表的展示

可以參照mpvue-echarts

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

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

進(jìn)行改進(jìn)

網(wǎng)上有很多教程，但都說(shuō)的不是很明白，下面直接上步驟

1、npm install echarts mpvue-echarts

執(zhí)行該命令后，會(huì)在node_modules下生成mpvue-echarts、echarts，然后把mpvue-echarts下的src放到components下，然后在https://echarts.apache.org/zh/builder.html定制echarts的js文件，如下圖：

在這里插入圖片描述

地圖實(shí)現(xiàn)：

<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: '洛陽(yáng)市', value: 10 },
				{ name: '開(kāi)封市', value: 20 },
				{ name: '信陽(yáng)市', value: 30 },
				{ name: '駐馬店市', value: 40 },
				{ name: '南陽(yáng)市', value: 41 },
				{ name: '周口市', value: 15 },
				{ name: '許昌市', value: 25 },
				{ name: '平頂山市', value: 35 },
				{ name: '新鄉(xiāng)市', value: 35 },
				{ name: '漯河市', value: 35 },
				{ name: '商丘市', value: 35 },
				{ name: '三門(mén)峽市', value: 35 },
				{ name: '濟(jì)源市', value: 35 },
				{ name: '焦作市', value: 35 },
				{ name: '安陽(yáng)市', value: 35 },
				{ name: '鶴壁市', value: 35 },
				{ name: '濮陽(yáng)市', value: 35 },
				{ name: '開(kāi)封市', 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: ': {c}mg/m³'
				},
				//左側(cè)小導(dǎo)航圖標(biāo)
				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 //數(shù)據(jù)
					}
				]
			};
			//初始化echarts實(shí)例
			chart.setOption(optionMap);
			this.$refs.mapChart.setChart(chart);
		}
	}
};
</script>

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

效果：

在這里插入圖片描述