uniapp使用echarts，避免踩坑

在uniapp中使用echarts画图移动端却不显示，在此记录一下解决方案

在uniapp中使用renderjs 并引入echarts图表画地图时，只有web显示，真机模拟一直白屏，也不报错，害我找了好久最后发现，是因为echarts.js，和china.js加载顺序导致的，china.js不是在echarts.js加载完成之后才加载的，这也就导致有些方法找不到，无法正常渲染

---

解决方案

引入echarts相关的js时，最好串联着引入，即在上一个js的onload方法内引入下一个js，在最后一个onload方法内进行图表的初始化，防止因js未完全加载导致的图表显示异常

详情参考uniapp插件：echarts-renderjs

以下是修改后的代码

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script') //新建script标签
				script.src = 'static/echarts.js' //设置文件地址
				
				script.onload = this.init.bind(this) //页面载入完之后执行
				document.head.appendChild(script) //添加到head中
			}
		},
		methods: {
		    //串联引入，保证文件加载顺序,在onload 方法内引入下一个js ,在最后一个onload方法内进行图表初始化
			init(){
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				script.src = 'static/china.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			},
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				//  观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			}
		}
	}
</script>