uni-app使用renderjs实现Ecahts和自定义地图

• renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。

• renderjs的主要作用有2个：

1. 大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
2. 在视图层操作dom，运行for web的js库

官方文档

• 基础演示

<!-- 注意，renderjs 的事件需要绑定在uniapp原生组件上才能触发，除非第三方的进行了适配，否则将可能不受支持 -->
<view :mapData="mapData" :change:mapData="amap.update" ></view>
<!-- 这段代码的意思是绑定一个名为mapData的数据，当mapData发生变化时，renderjs module="amap"的方法update会触发并传输数据-->
<!-- uni-app脚本 -->
<script>
export default {
		data() {
			return {

				mapData: {}
				}
			}
		},
		methods: {
			dataTransfer(data){
				console.log(data)
		}
	}
</script>

<!-- renderjs脚本 -->
<script module="amap" lang="renderjs">
	
	export default {
		data() {
			return {

				ownerInstance: null, //service 层对象
				}
			}
		},
		methods: {
				update(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更,当mapData发生改变，此方法会触发,同时可以得到instance对象，使用instance.callMethod('method',{data})可以调用uni-app层的方法并发送数据
				this.ownerInstance = ownerInstance
				this.ownerInstance.callMethod('dataTransfer',{'获取到数据'})

			}
			}
		}
	}
</script>

利用renderjs几乎可以实现任何前端功能