echarts 设置手机端点击出现十字线‘toolTip’，并禁止曲线滑动，当十字线消失时允许曲线滚动

最近做vue开发的时候发现echart，在展示toolTip时，手机端滚动crossLine时，曲线会跟着滚动，为了解决这个问题，写了这篇文章。

直接上代码，具体代码如下

<template>
	<view class="content">
		<!-- #ifdef APP-PLUS || H5 -->
		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
		<button @click="changeOption">更新数据</button>
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>非 APP、H5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShowTools:false,
				option: {
					title: {
						text: 'ECharts 入门示例'
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "cross",
							crossStyle: {
								color: "#00f",
								type: "solid"
							},
						},
						show:true
						// triggerOn:!this.isShowTools?'click':'none'
					},
					dataZoom:{
						type:'inside',
						moveOnMouseMove: true
					},
					legend: {
						data: ['销量']
					},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'line',
						data: [5, 20, 36, 10, 10, 20]
					}]
				}
			}
		},
		onLoad() {

		},
		methods: {
			changeOption() {
				const data = this.option.series[0].data
				// 随机更新示例数据
				data.forEach((item, index) => {
					data.splice(index, 1, Math.random() * 40)
				})
			},
			onViewClick(options) {
				console.log(options)
				this.isShowTools = !this.isShowTools
				this.option = {
					title: {
						text: 'ECharts 入门示例'
					},
					tooltip: {
						trigger: "axis",
						axisPointer: {
							type: "cross",
							crossStyle: {
								color: "#00f",
								type: "solid"
							},
						},
						show:this.isShowTools
						// triggerOn:!this.isShowTools?'click':'none'
					},
					dataZoom:{
						type:'inside',
						moveOnMouseMove: !this.isShowTools
					},
					legend: {
						data: ['销量']
					},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'line',
						data: [5, 20, 36, 10, 10, 20]
					}]
				}
				console.log("-----" + this.isShowTools)
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				console.log("------------222------------")
				this.initEcharts()
			} else {
				console.log("------------111------------")
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				// script.src = 'static/echarts.js'
				script.src = 'static/echarts.min.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
				console.log("------------init111------------")
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
				console.log("------------update111------------")
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		margin-top: 100px;
		width: 100%;
		height: 300px;
	}
</style>

实现功能的关键代码：

设置是否可以滑动曲线

		dataZoom:{
				type:'inside',
				moveOnMouseMove: !this.isShowTools
		},

设置是否显示toolTip

	tooltip: {
			trigger: "axis",
			axisPointer: {
				type: "cross",
				crossStyle: {
					color: "#00f",
					type: "solid"
				},
			},
			show:this.isShowTools
			// triggerOn:!this.isShowTools?'click':'none'
		},

给曲线设置点击监听，通过click控制toolTip的显示与隐藏

onViewClick(options) {
			console.log(options)
			this.isShowTools = !this.isShowTools
			this.option = {
				title: {
					text: 'ECharts 入门示例'
				},
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross",
						crossStyle: {
							color: "#00f",
							type: "solid"
						},
					},
					show:this.isShowTools
					// triggerOn:!this.isShowTools?'click':'none'
				},
				dataZoom:{
					type:'inside',
					moveOnMouseMove: !this.isShowTools
				},
				legend: {
					data: ['销量']
				},
				xAxis: {
					data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
				},
				yAxis: {},
				series: [{
					name: '销量',
					type: 'line',
					data: [5, 20, 36, 10, 10, 20]
				}]
			}
			console.log("-----" + this.isShowTools)
		}