在 uniapp 项目中集成 echarts 图表

1. 项目结构

2. 获取 ECharts 库文件

ECharts在线构建
下载后重命名为：echarts.full.js / echarts.full.min.js

3. 获取 ECharts 地图数据

点此下载
下载后移动到项目结构目录的 geo 位置

4. 编写 ECharts 组件

<template>
	<view class="echarts-components-wrap">
		<!-- #ifdef APP-PLUS || H5 -->
		<view class="echarts-instance-wrap"
			:id="chartUid"
			:option="option"
			:change:id="ModuleInstance.reciveID"
			:change:option="ModuleInstance.setOption"></view>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持renderjs模式"</view>
		<!-- #endif -->
	</view>
</template>
 
<script>
export default {
	data() {
		return {
			chartUid: `ChartUid-${Date.now()}-${parseInt(Math.random() * 1e8)}`
		}
	},
	props: {
		option: {
			type: Object,
			default: () => {},
			required: false
		},
		before: {
			type: Function,
			default: () => {}
		},
		after: {
			type: Function,
			default: () => {}
		}
	}
}
</script>
<script module="ModuleInstance" lang="renderjs">
export default {
	data() {
		return {
			chartUid: ''
		}
	},
	mounted() {
		if (typeof window.echarts === 'function') {
			this.initEchart();
		} else {
			const script = document.createElement('script');
			script.src = 'static/echarts/echarts.full.min.js';
			script.onload = () => {
				this.$ownerInstance.callMethod('before');
				this.initEchart();
			}
			document.head.appendChild(script);
		}
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.resize)
		window[this.chartUid].dispose()
	},
	methods: {
		reciveID(id) {
			this.chartUid = id;
		},
		initEchart() {
			window[this.chartUid] = echarts.init(document.getElementById(this.chartUid));
			window[this.chartUid].setOption(this.option || {});
			window.addEventListener('resize', this.resize);
			this.checkEmptyData();
			this.$ownerInstance.callMethod('after', { id: this.chartUid });
		},
		setOption(newValue = '', oldValue, ownerInstance, instance) {
			if (!newValue) return;
			if (!window[this.chartUid]) return;
			if (window[this.chartUid]) {
				window[this.chartUid].clear(); //清空画布
				window[this.chartUid].setOption(newValue || {});
				this.checkEmptyData();
			}
		},
		resize() {
			if (!window[this.chartUid]) return;
			window[this.chartUid].resize();
		},
		//对空数据提示
		checkEmptyData() {
			if (!this.option) return;
			if (!window[this.chartUid]) return;
			let { series = [] } = this.option;
			if (series.length === 0) {
				window[this.chartUid].showLoading({
					showSpinner: false, // 隐藏加载中的转圈动图
					text: '暂无数据',
					textColor: '#DDD',
					maskColor: 'rgba(0, 0, 0, 0.3)',
					fontSize: '16px'
				});
			} else {
				window[this.chartUid].hideLoading();
			}
		}
	},
};
</script>
<style lang="scss">
.echarts-components-wrap {
	width: 100%;
	height: 100%;
	.echarts-instance-wrap {
		width: 100%;
		height: 100%;
		min-height: 50px;
	}
}
</style>

5. 引用组件

<template>
	<view>
		<view class="content">
			<ext-echarts :option="chartOpt" :before="regMap"></ext-echarts>
		</view>
	</view>
</template>
 
<script>
import world from '@/static/echarts/geo/world.json';
export default {
	data() {
		return {
			chartOpt: {
				geo: {
					map: 'world',
					roam: false,
					itemStyle: { areaColor: '#0080eb', borderColor: '#FFF' },
					label: { show: false }
				},
				series: []
			}
		}
	},
	onLoad(){
	},
	methods: {
		regMap() {
			echarts.registerMap('world', world); //注册地图数据
		}
	}
}
</script>
 
<style>
.content {
	width: 100%;
	height: 40rem;
	padding: 3rem;
}
</style>