Echarts实现不均匀刻度的方法

最新推荐文章于 2025-05-26 11:08:53 发布

sflwolf

最新推荐文章于 2025-05-26 11:08:53 发布

阅读量1.3w

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sflwolf/article/details/104760891

本文解决了一个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的值也是准确的。还不错。

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