2021-02-03

echarts图表

echarts图表tooltip显示对应的时间

工作需要，要让echarts图表的tooltip显示上下X轴对应的时间，但是echarts是通过获取Y轴的value值来决定显示还是不显示的（根据项目得出来的，有可能不是），然后在官网上看配置项，百度等，都没有类似的案例（有可能是我没搜到），然后就自己写了一下；

这是1个X轴的

// 在echarts配置项中
tooltip:{
	formatter:(paramas)=>{
	const value0=paramas.find(item=>item==="aaa") // aaa：代表你要find的字段
	const value1=params.find(item=>item==="bbb") // 同上，但不是一个x轴
	const xAxios=value0===undefined?value1&&value1.name?value1.name:"--":value0.name;
}

这是2个X轴的

// 在echarts配置项中
tooltip:{
	formatter:(paramas)=>{
		const value0=paramas.find(item=>item==="aaa") // aaa：代表你要find的字段
		const value1=params.find(item=>item==="bbb") // 同上，但不是一个x轴
		// 防止value0或者value1为undefined;
		let value0Name=value0===undefined?"--":value0.name;
		let value1Name=value1===undefined?"--":value1.name;
		// 通过上面在data里获取下标;
		if(value0Name!=="--"){ // 这个判断有时候不生效; 暂时没找到解决的办法;
			const Index=data&&data.a.x.findIndex(item=>item===value0Name);
			value1Name=data.b.x[Index]===""?"--":data.b.x[Index];
		};
		if(value1Name!=="--"){ // 这个判断有时候不生效; 暂时没找到解决的办法;
			const Index=data&&data.b.x.findIndex(item=>item===value1Name);
			value0Name=data.a.x[Index]===""?"--":data.b.x[Index];
		}
	}
}

然后就可以使用value0Name跟value1Name了，其中value0Name代表下面的X轴坐标，value1Name代表上面的X轴坐标;