echarts uniapp 没有dom renderjs 解决uniapp无法获取Dom

在uni-app的app和h5端，引入完整的echarts，并且提供高性能的动画。

注意事项

仅支持 app-vue、h5 端
要求 uni-app 2.5.5+以上版本
app端要求使用v3编译器

过去的问题

H5端流行的echart报表因为涉及大量dom操作，无法跨端使用
wx-chart在跨端和更新方面都不足
插件市场提供了比wx-chart更好的、全端可用的uChart。但受限于小程序架构逻辑层和视图层分离，导致的通信折损，图表的动画性能不佳。并且uchart只实现了echart的常用功能，还有一些功能没有实现。

新的解决方案

从uni-app 2.5.5+起，新提供了renderjs技术。它是wxs的升级版，一种可以运行在视图层的js。

通过renderjs编写的代码，直接运行在视图层（也就是webview中），可以完整的运行echart等库，并且没有了逻辑层和视图层频繁通行的折损，让动画不再卡顿。

renderjs支持app-vue和h5，不支持其他平台。如果你只考虑这2个平台，可以直接使用本示例，使用完整版的echart。如果还要兼容多端小程序，建议仍然使用uchart。

renderjs，不止能运行echart，其他如F2、threejs等web库都可以运行。

使用

<!-- 放置echarts的容器 -->
<!-- echarts模块名.事件名 -->
<view @click="echarts.onClick" :prop="option"  id="echarts" ></view>

//正常写法
<script>
//正常写法
export default {
	data() {
		return {
			option: {
				title: {
					text: 'ECharts 入门示例'
				},
				tooltip: {},
				legend: {
					data: ['销量']
				},
				xAxis: {
					data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
				},
					yAxis: {},
					series: [{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20]
				}]
			}
		}
	},
	onLoad() {},
	methods: {
		onViewClick(options) {
			console.log(options)
		}
	}
}
</script>
//将获取dom的操作写在下面这个里面
//类似vue 的 混入 mixin 
<script module="echarts" lang="renderjs">
export default {
	mounted() {
		// 动态引入较大类库避免影响页面展示
		const script = document.createElement('script')
		script.src = 'static/echarts.js'
		//更改作用域
		script.onload = this.initEcharts.bind(this)
		document.head.appendChild(script)
	},
	methods: {
		initEcharts() {
			myChart = echarts.init(document.getElementById('echarts'))
			// 可以直接拿到正常写法里的数据
			myChart.setOption(this.option)
		},
		updateEcharts(newValue, oldValue, ownerInstance, instance) {
			// 监听 service 层数据变更
			myChart.setOption(newValue)
		},
		onClick(event, ownerInstance) {
			// 调用 script里正常写法的methods
			// ownerInstance.callMethod（方法名，传值） 
			ownerInstance.callMethod('onViewClick', {
				test: 'test'
			})
		}
	}
}
</script>