解决在移动端echarts tab切换时，axpointer线不消失的bug

最新推荐文章于 2024-05-29 16:26:38 发布
zeroyulong
最新推荐文章于 2024-05-29 16:26:38 发布
阅读量1.5k
点赞数
分类专栏： js效果文章标签： echarts 移动端标线 echarts axpointer
本文链接：https://blog.csdn.net/zeroyulong/article/details/84977248
版权
js效果专栏收录该内容
8 篇文章 0 订阅
订阅专栏
需求：
在pc端hover时axpointer的标线才会出现，鼠标离开自动消失，但在移动端标线无法自动消失，在tab切换更多数据的时候，标线还留在页面视图内造成bug
插件版本：echarts4.0
解决：
<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title>仿支付宝七日年化折线图</title>
		<meta name="viewport" content="width=device-width,user-scalable=no" />
		<script src="../lib/flexible_new.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<style type="text/css">		
			#main {
				width: 89.4%;
				margin: 0 5.3%;
				height: 6rem;
				background: #fff;
				border: 1px solid #9999FF;
			}
			
			ul {
				width: 89.4%;
				margin: 0 5.3%;
				display: flex;
			}
			
			li {
				flex: 1;
				text-align: center;
				border: 1px solid blue;
				height: 30px;
				line-height: 30px;
				font-size: 24px;
			}
			
			.active {
				background: greenyellow;
			}
		</style>
	</head>
 
	<body>
		<div id="main"></div>
		<ul id="tabList">
			<li class="active">一月</li>
			<li>三月</li>
			<li>六月</li>
			<li>一年</li>
			<li>三年</li>
		</ul>
		<script src="../lib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../lib/echarts1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function randomData() {
				now = new Date(+now + oneDay);
				value = value + Math.random() * 21 - 10;
				return {
					dates: [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'),
					value: Math.random() * 4
				}
			}
 
			var testData = [];
			var now = +new Date(1997, 9, 3);
			var oneDay = 24 * 3600 * 1000;
			var value = Math.random() * 1000;
			for(var i = 0; i < 30; i++) {
				testData.push(randomData());
			}
			console.log(testData)
 
			//tab切换
			var beginIndex = 3;
			var allLength = 30;
			$('#tabList').on('click', 'li', function() {
				console.log($(this).index());
				myChart.dispatchAction({
					type:'hideTip',
				});//surprise
				$(this).addClass('active').siblings().removeClass('active');
				switch($(this).index()) {
					case 0:
						beginIndex = 2;
						state = 0;
						allLength = 30;
						break;
					case 1:
						beginIndex = 6; //1
						state = 1;
						allLength = 90;
						break;
					case 2:
						beginIndex = 14; //1
						state = 2;
						allLength = 180;
						break;
						/*3 4 的时候基本是6倍比例*/
					case 3:
						beginIndex = 58; //1
						state = 3;
						allLength = 360;
						break;
					case 4:
						beginIndex = 180; //
						state = 4;
						allLength = 1080;
						break;
					default:
						beginIndex = 2;
						state = 0;
						allLength = 30;
						break;
				}
 
				//tab触发新数据获取
				testData = [];
				now = +new Date(1997, 9, 3);
			    oneDay = 24 * 3600 * 1000;
			    value = Math.random() * 1000;
				for(var i = 0; i < allLength; i++) {
					testData.push(randomData());
				}
				xInterval = Math.floor(testData.length / 2);
 
				dateList = testData.map(function(item) {
					return item.dates;
				});
				valueList = testData.map(function(item) {
					return item.value;
				});
				myChart.setOption({
					xAxis: {
						data: dateList,
						axisLabel: {
							interval: 0,
							formatter: function(value, index) {
 
								
								/*当时年记录的时候，使第3个和倒数第三个标为第一个和最后一个即可 其他为空*/
								if(index == beginIndex || index == xInterval || index == dateList.length-1) {
									if(index == beginIndex) {
										value = dateList[0]
									}
 
									/*<3 只显示月日 */
									if(state < 3) {
										value = value.slice(value.indexOf('-') + 1)
									}
								} else {
									value = ' ';//空格与我有仇，空格解决tab切换时视图抖动问题
								}
 
								return value;
 
							},
						},
						axisPointer:{
							value:null,
							seriesDataIndices:[],
							status:"hide"
						}//surprise 天选之人哈哈哈
					},
 
					series: [{
						data: valueList
					}]
				});
			})
 
			/*-------正式的分割线--------*/
			var state = 4; //x轴刻度是否不需要年
 
			var dateList = testData.map(function(item) {
				return item.dates;
			});
			var valueList = testData.map(function(item) {
				return item.value;
			});
 
			var myChart = echarts.init(document.getElementById('main'))
 
			myChart.showLoading({
				text: '正在努力的读取数据中。。。',
			})
			// ajax getting data...............
 
			// ajax callback
			myChart.hideLoading();
 
			var xInterval = Math.floor(testData.length / 2);
			var option = {
 
				tooltip: {
					trigger: 'axis',
					position: [0, 0], //位置
					backgroundColor: '#F3F6FB',
					transitionDuration:0,//解决光标移动到某个坐标的时候tooltip像从底部飞出来一样动画效果
					//formatter:'<div style="display:flex;justify-content: space-between;"><span >{b0}</span><span >万份收益：{c0}</span></div>',
					formatter: '<div ><span style="float:left;margin-left:8px;">{b0}</span><span style="float:right;margin-right:8px;">万份收益：<span style="color:#FF1F46;">+{c0}%</span></span></div>',
					hideDelay:100,
					textStyle: {
						color: '#333',
						fontSize: 12,
						height: '18px',
						fontWeight: 500,
						fontFamily: 'PingFangSC,Noto Sans CJK SC ,Source Han Sans CN'
					},
					padding: 0,
					extraCssText: 'width: 100%;line-height:36px;'
				},
 
				grid: {
					left: '1%',
					right: '1%',
					bottom: '3%',
					top: 54,
					containLabel: true
				},
 
				xAxis: {
					type: 'category',
					boundaryGap: false,//两边的数据是否到达边界
					data: dateList,
					axisLine: {
						lineStyle: {
							opacity: 0
						}
					},
					splitLine: {
						show: false,
					},
 
					axisTick: {
						show: false, //去小头头
						length: 3 //坐标轴刻度的长度
					},
					axisLabel: {
						align: 'right',
						color: '#666',
						fontSize: 10,
						fontFamily: 'PingFangSC,Noto Sans CJK SC ,Source Han Sans CN',
						interval: 0, //隔几个显示一个分界标
						showMinLabel: true, //
						showMaxLabel: true, //是否显示最大tick的label(如果标签重叠，不会显示最大tick的label)
						formatter: function(value, index) {
							var beginIndex = 3;
							if(state < 3) {
								beginIndex = 1;
							}
							/*当时年记录的时候，使第3个和倒数第三个标为第一个和最后一个即可 其他为空*/
							if(index == beginIndex || index == xInterval|| index == dateList.length-1) {
								if(index == beginIndex) {
									value = dateList[0]
								}
								/*<3 只显示月日 */
								if(state < 3) {
									value = value.slice(value.indexOf('-') + 1)
								}
							} else {
								value = ' ';//空格与我有仇，空格解决tab切换时视图抖动问题
							}
							return value;
						},
					}
				},
				yAxis: {
					type: 'value',
					min: 0,
					max: 6,
					splitNumber: 3,
					axisLabel: {
						color: '#666',
						fontSize: 10,
						fontFamily: 'PingFangSC,Noto Sans CJK SC ,Source Han Sans CN',
						formatter: function(val) {
							return val + ".00%";
						}
					},
					axisLine: {
						lineStyle: {
							opacity: 0
						}
					},
					axisTick: {
						show: false, //去小头头
					},
					splitLine: {
						lineStyle: {
							color: '#f1f1f1',
							type: 'dotted'
						}
					},
 
				},
				axisPointer: {
					lineStyle: {
						color: "#3367D6"
					}
				},
				series: [{
						type: 'line',
						symbol: 'circle',
						symbolSize: 1,
						lineStyle: {
							color: '#3367D6',
							width: 2,
						},
						itemStyle: {
							color: '#000',
							borderColor: '#fff'
						},
 
						showSymbol: false, //取消小点的显示
						data: valueList
					}
 
				]
			};
 
			myChart.setOption(option);
		</script>
	</body>
 
</html>
suprise是核心，生整出来的~~~苦命~~~