uniapp APP和H5正确使用echarts总结和填坑说明

---

前言

对于一些频繁的dom操作，uniapp提供了一个renderjs方案，是一个运行在视图层的js，大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力，只支持h5和app端。app端使用echarts自然采用renderjs方案。h5端使用区别不大，因为h5逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式。小程序依然采用wxs方案，可以使用u-chart等第三方插件。

---

一、renderjs语法简单回顾

1.引入

script标签添加lang="renderjs", module=“随意命名”

<script module="echarts" lang="renderjs">
</script>

2.逻辑层向renderjs传值

在元素标签上添加 :change:name="renderScript.方法名" ,其中name为元素属性,renderScript为module定义名称，.方法用于监听传入值

<view :name="realName" :change:name="echarts.updateName"></view>

<script>
export default{
   data(){
   return {
      realName:'小李'
     }
   }
}
</script>

<script module="echarts" lang="renderjs">
export default{
   methods:{
      //逻辑层realName值变化将触发该方法
      updateName(newValue, oldValue, ownerInstance, instance){
         console.log(newValue)//小李
      }
   }
}
</script>

3. renderjs向逻辑层传值

ownerInstance.callMethod(逻辑层方法名，值)

<view   @click="echarts.send"></view>

<script>
export default{
   methods:{
   //接收值
      receive(data){
        console.log(data.name)//小李
      }
   }
}
</script>

<script module="echarts" lang="renderjs">
export default{
   methods:{
   //传值
      send(event,ownerInstance){
         ownerInstance.callMethod('receive',{
            name:'小李'
         })
         
      }
   }
}
</script>

二、项目中使用echarts

其中echarts.js放置static目录下，需手动下载放入

代码示例

<template>
	<view id="echarts" class="echarts" @click="echarts.onClick" :prop="optionData" :change:prop="echarts.updateEcharts">
	</view>
</template>

<script>
	export default {

		data() {
			return {
				//配置
				optionData: {
					title: {
						text: '温度'
					},
					tooltip: {
					 trigger: 'axis',
					},
					legend: {
						data: ['温度']
					},
					// dataZoom: [{
					// 	type: "inside", // 支持双指缩放
					// 	start: 0,
					// 	end: 100,
					// 	zoomOnMouseWheel: true, // 开启滚轮缩放
					// }, ],
					xAxis: {
						
						data: ["北京", "天津", "武汉", "上海", "成都", "南京"]
					},
					yAxis: {
						// axisLabel: {
						// 	formatter: value => {
						// 		return  `${value}°C`
						// 	},
						// }
					},
					series: [
					{
						name: '温度',
						type: 'line',
						data: [6, 8, 11, 18, 20, 17]
					}]
				}
			}
		},
		onLoad() {

		},
		methods: {}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart;
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// #ifdef APP-PLUS
				//APP 端视图层的页面引用资源的路径相对于根目录计算
				script.src = './static/echarts.js'
				// #endif
				// #ifdef H5
				script.src = '/static/echarts.js'
				// #endif
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			//初始化
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				myChart && myChart.setOption && myChart.setOption(this.optionData)
			},
			// 监听逻辑层配置变化
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				//修复app端yAxis或者xAxis ,axisLabel.formatter无效问题
				// if ( newValue?.yAxis?.axisLabel) {
				// 	newValue.yAxis.axisLabel.formatter = function formatter(value) {
				// 		return `${value}°C`
				// 	}
				// }
				myChart && myChart.setOption && myChart.setOption(newValue)

			},
			onClick(event, ownerInstance) {
				//修复H5端tooltip不显示,app端tooltip不好点击显示问题
				const touche = event.changedTouches[0];
				const x = touche.pageX;
				const y = touche.pageY - event.target.offsetTop;
				var xIndex = myChart.convertFromPixel({
					seriesIndex: 0
				}, [x, y])[0];
				myChart.dispatchAction({
					type: 'showTip',
					seriesIndex: 0,
					dataIndex: xIndex
				});
			}
		}
	}
</script>

<style>
	.echarts {
		width: 100%;
		height: 600rpx;
	}
</style>

三、填坑说明

提示：经过上面的引入方式，就能像在pc端一样方式使用配置echarts，但还是有一些兼容性bug，下面记录下遇到几个坑和解决方式

1.tooltip不显示问题

增加点击事件计算点击位置算出点击点对应图表内容值，使用dispatchAction手动触发显示tooltip，详见上面示例onClick方法

2.yAxis或者xAxis ,axisLabel.formatter无效问题

此问题H5端正常，只会出现在App端，解决方法在配置改变监听函数内在重新赋值formatter函数，详见上面示例updateEcharts方法内注释内容

3.dataZoom,type: "inside"无效

出现在APP端，此问题跟引入echarts.js版本有关系，不同版本兼容性不一样，推荐：https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js

4.echarts.js导入路径问题

app端视图层的页面引用资源的路径相对于根目录计算引入’./static/echarts.js，h5可以相对路径或者绝对路径引入‘/static/echarts.js’

四、charts.js文件地址

echarts.js