Echarts实现不均匀刻度的方法

本文解决了一个ECharts图表显示问题,数据范围从低于100到高达14000,通过调整纵坐标轴的显示方式和数据处理,实现了不均匀的Y轴划分,并确保了tooltip能准确显示原始数值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天突然有个我们的咨询公司找我问一个echarts问题,这个问题确实值得一解决,很有意思。

问题是这样的。数据中有很多低于100的数值,但是最高值却能达到14000。

data = [93.65, 101.08, 97.15, 171.58, 115.23, 127.55, 117, 115.46, 114.27, 106.68, 116.66, 110.77, 111.88, 114.08, 130.46, 129.04, 126.71, 116.46, 121.66, 119.56, 146.02, 741.23, 3436.16, 14700, 19,336, 8647.53, 4815.84, 4541.84, 4587.21, 5272.62]

他用常规的echarts实现效果如下:

他主要两个诉求:一是不均匀的划分Y轴,二是tooltip显示原值。

这个问题网上貌似没有一个成型的解决方案,所以我记录一下,方便他人。最终我实现的效果如下:

代码如下:

一、修改纵坐标的数值

	yAxis: {
			type: 'value',
			axisLine:{
				show:false
				},
			axisTick:{
				show:false
				},
			min:0,
			max:21000,
			splitNumber:8,
			axisLabel:{
			formatter:function(v){
				let item = ''
				if(v===0){
					item='0'
				}else if(v==3000){
					item = '1'
				}else if(v==6000){
					item = '100'
				}else if(v==9000){
					item = '300'
				}else if(v==12000){
					item = '500'
				}else if(v==15000){
					item = '1000'
				}else if(v==18000){
					item = '10000'
				}else if(v==21000){
					item = '20000'
				}else if(v==24000){
					item = '30000'
				}
				return item
				}
			}
	},

二、处理原数据,采用的方法是把以前100以内的数据模拟到6000以内,就是同比例放大。

let wxdata = [93.65, 101.08, 97.15, 171.58, 115.23, 127.55, 117, 115.46, 114.27, 106.68, 116.66, 110.77, 111.88, 114.08, 130.46, 129.04, 126.71, 116.46, 121.66, 119.56, 146.02, 741.23, 3436.16, 14700, 19,336, 8647.53, 4815.84, 4541.84, 4587.21, 5272.62]
      
function formatData(arr){
	let newHashArray = []
    for(var i=0;i<arr.length;i++){
		let obj={}
		let temp = arr[i]
        if(arr[i]>0&&arr[i]<1){
			arr[i]=arr[i]*3000	
        }else if(arr[i]>1&&arr[i]<100){
            arr[i]=3000+arr[i]*(3000/99)
        }else if(arr[i]>100&&arr[i]<300){
            arr[i]=6000+arr[i]*(3000/200)
        }else if(arr[i]>300&&arr[i]<500){
            arr[i]=9000+arr[i]*(3000/200)
        }else if(arr[i]>500&&arr[i]<1000){
            arr[i]=12000+arr[i]*(3000/500)
        }else if(arr[i]>1000&&arr[i]<10000){
            arr[i]=15000+arr[i]*(3000/9000)
	    }
		obj.value = arr[i]
		obj.formatV = temp
		newHashArray.push(obj)
          }
          return newHashArray;
      }
let wxArray = formatData(wxdata)

二、在series中直接设置data,data会直接取value值

{
    name: '微信小程序浏览量',
	type: 'line',
	areaStyle: {},
	lineStyle:{
		color:['rgb(7,193,96)'],
	},
	data:wxArray
},

三、修改tooltip的值

tooltip: {
			trigger: 'axis',
			formatter(param){
								
				return `微信访问:${param[7].data.formatV}`
				}
		},

这个折线就是模拟,精度肯定是不那么准确,但是看趋势还是不错的,而且tooltip的值也是准确的。还不错。

写完以后觉得这个问题好简单,哈哈哈。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值