uniapp 中使用echarts，app端特别注意_uniapp echarts 移动端

废话不多说；干就完了。

首先是，uniapp中使用echarts本身没啥问题；安装引用，安装官方步骤来就完了。

可是，如果到时候要打包成app，那就对不起了。因为我也不清楚的某种原因，

uniapp把图表地图之类的东西，在app的时候的写法发生了改变。主要是多了一个视图层的概念。

下面开干。

1.模板部分,不多说废话。

 
<!-- 注意 echarts根标签上面的自定义属性 :list & :change：lists="echartsModule.updateOpts" -->
<!-- 这两个东西是做视图层和逻辑层通信用的，下面会说。 -->
<template>
	<view>
        <!-- 注意标签上的属性；为了逻辑层与视图层进行通信的；没有就通信不了 -->
		<view class="myEcharts" id="myEcharts" :lists="lists" :change:lists="echartsModule.updateOpts">
		</view>
	</view>
</template>

2.逻辑层，啥意思呢，就是平时写vue的时候script标签里面的内容，在这里称之为逻辑层

<script>
	export default {
		props: {
			reportData: {
				type: Object,
				required: () => {}
			},
		},
		computed:{
            // 小技巧；想监听一个对象的部分属性的实现，利用计算属性结构出要监听的部分
			lists(){
				const {upList,downList} = this.reportData && this.reportData.extend2
				return {upList,downList}
			}
		},
		methods:{
            // 逻辑层声明的方法，下面会被视图层进行调用的；也可以理解为一个回调函数
            // 需要视图层传参数到逻辑层的时候用的
			updateUrl(val){
				this.reportData.extend2.imgUrl = val
			}
		}
		
	}
</script>

3.视图层；这玩意很特别，是uniapp为了加速视图渲染搞出来的。个人觉得难用，不成熟。

script标签里面关键字 renderjs  代表渲染层 也叫视图层，跟逻辑层完全隔离

 
<script module="echartsModule" lang="renderjs">
	import * as echarts from 'echarts'
	
	export default {
		data() {
			return {
				myChart: '',
			}
		},
		mounted(options) {
			if (typeof window.echarts === 'object') {
				this.drawLines()
			} else {
				// 动态引入类库
				const script = document.createElement('script')
				script.onload = this.drawLines()
				document.head.appendChild(script)
			}
		},
		methods: {
			drawLines() {
				// 这里是初始化的方式，通过id查询找到你的canvas标签
				this.myChart = echarts.init(document.getElementById('myEcharts'))
				this.setOption()
				this.myChart.resize()
			},
            // 这个方法是标签上面传递的属性lists发生变化的时候触发的方法
            // 实现逻辑层跟视图层通信的
			updateOpts(newVal, oldVal, ownerVm, vm){
				this.setOption(newVal.upList,newVal.downList)
			},
			setOption(upList = [], downList = []) {
				const option = {
					grid: {
						left: '8%',
						right: '20%',
						bottom: '3%',
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						name: '载荷(kg)',
						data: ['30%', '40%', '50%', '60%'],
					},
					yAxis: {
						type: 'value',
						name: '电流(A)',
					},
					series: [{
							type: 'line',
							data: upList,
						},
						{
							type: 'line',
							data: downList,
						},
					],
				}
				if (this.myChart) {
					this.myChart.setOption(option)
//下面这行代码就是视图层调用逻辑层的方法，并且传参数到逻辑层
					            
               this.$ownerInstance.callMethod('updateUrl',this.myChart.getDataURL("jpg"))
				}
 
			}
		},
	}
</script>

总结

1.比较麻烦的就是逻辑层和视图层之间的通信，其他的稍微理解一下就行

2.模板中调用视图层的方法需要加上script标签上的module属性值；要不然调不通

3.特别注意；这东西如果要做app需要在真机或者模拟器上面调试；如果用H5根本发现不了问题

4.关于逻辑层和视图层之间的通信，我试过很多方法（订阅发布、父组件转发、vuex），都没有用。只能用这种比较烂的方法；头皮发麻。

5.视图层中 props接受不到数据，写也没有用