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轴坐标;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值