echarts折线图改变y轴刻度
目前项目有个要求，比如y轴数据大部分在几百，但是有个峰值达到了1W。。这样导致经常出现的几百的数据变化不明显，这时候就需要对y轴数据进行处理，将不经常出现的数据范围进行缩小，比如1-500和500-5000的间距变为一样，这样就可以方便看到数据的变化了。
针对两个问题有两种解决方法：
1. 不要求y轴数据的规律，这时候可以用开立方缩小数据的间隙。
https://blog.csdn.net/WanweI897/article/details/121271044?ops_request_misc=&request_id=&biz_id=102&utm_term=echarts%E8%AE%BE%E7%BD%AE%E4%B8%8D%E5%9D%87%E5%8C%80%E5%88%BB%E5%BA%A6&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduweb~default-0-121271044.nonecase&spm=1018.2226.3001.4187
2.要求y轴数据间隙有一定规律
参考
//折线图坐标点算法
//需求：100 200 500 1000 1500 2000...
function initPointData(pointData, max, min) {
//第一个分界点
var part1 = 200;
//第二个分界点
var part2 = 500;
//单个间隔
var inter = 100;
//前两段间隔
var twoInter = 300;
//最后一段间隔
var lastInter = 500;
//最大刻度
if (max > 0) {
var maxNum = (max / 500 + 1) * 500;
} else {
var maxNum = 0;
}
if (min < 0) {
var minNum = -(Math.abs(min / 500) + 1) * 500;
} else {
var minNum = 0;
}
var returnPosition = 0; //初始化返回的值*
//判断当前值范围,不同区间范围计算多余占比，加上之前实际的间隙
if (pointData <= part1 && pointData >= -part1) {
returnPosition = pointData;
} else if (pointData > part1 && pointData <= part2) {
returnPosition = (pointData - part1) / (part2 - part1) * inter + part1;
} else if (pointData > part2 && pointData <= maxNum) {
returnPosition = (pointData - part2) / (maxNum - part2) * ((maxNum - part2) / lastInter) * inter + twoInter;
console.log((pointData - part2) / (maxNum - part2) * (maxNum / lastInter) * inter)
} else if (pointData < -part1 && pointData >= -part2) {
//
returnPosition = Math.abs(parseFloat(pointData) + part1) / (part1 - part2) * inter - part1;
console.log(Math.abs(parseFloat(pointData) + part1) / (part1 - part2) * inter)
} else if (pointData < -part2 && pointData >= minNum) { //-500 - -1500
returnPosition = (parseFloat(pointData) + part2) / Math.abs(minNum + part2) * (Math.abs(minNum + part2) / lastInter) * inter - twoInter;
} else {
returnPosition = pointData;
}
return returnPosition
}
function getData(temp) {
var jsonString = [];
for (var i = 0; i < temp.length; i++) {
var json = {};
var seaMax = searchMax(temp);
var seaMin = searchMin(temp);
json.name = temp[i];
json.value = initPointData(temp[i], seaMax, seaMin);
jsonString.push(json);
}
return jsonString;
}
function searchMax(arr) {
var maxNumber = Math.max.apply(null, arr);
return maxNumber;
}
function searchMin(arr) {
var minNumber = Math.min.apply(null, arr);
return minNumber;
}
//极值绘制曲线
function echartsDemo(elementid, title) {
var datas = {
xAxis: [123, 456, 789, 576, 423, 425], yAxis1: [123, 456, 789, 576, 423, 425], yAxis2: [742, 842, 126, 586, 485, 523]
}
var dom = document.getElementById(elementid);
var myChart = echarts.init(dom);
//获取两个曲线的最大最小值
var seaMax1 = searchMax(datas.yAxis1);
var seaMin1 = searchMin(datas.yAxis1);
var seaMax2 = searchMax(datas.yAxis2);
var seaMin2 = searchMin(datas.yAxis2);
var totalMax = seaMax1 > seaMax2 ? seaMax1 : seaMax2;
var totalMin = seaMin1 > seaMin2 ? seaMin2 : seaMin1;
option = {
title: {
text: title,
show: true,
top: '0',
},
tooltip: {
type: 'line',
trigger: 'axis',
formatter: function (params) {
var result = ''
var axisName = ''
params.forEach(function (item) {
axisName = item.axisValue
var itemValue = item.marker + item.seriesName + ": " + item.data.name + ""
result += itemValue
})
var allResult = result + "" + axisName
return allResult
},
axisPointer: {
lineStyle: {
type: 'dotted',
color: 'red',
width: 2,
},
animation: false
},
textStyle: {
fontSize: 10,
color: 'white',
decoration: 'none'
}
},
legend: {
data: ['111', '222']
},
xAxis: {
name: 'Time',
nameLocation: 'center',
nameTextStyle: {
color: "gray",
fontSize: 10,
padding: 10
},
splitLine: {
show: false
},
type: 'category',
data: datas.xAxis,
},
yAxis: {
type: 'value',
interval: 100,
max: function (value) {//取最大值向上取整为最大刻度
if (totalMax > 0) {
return (parseInt(totalMax / 500)) * 100 + 300;
} else {
return 0;
}
},
min: function (value) {//取最小值向下取整为最小刻度
if (totalMin < 0) {
return (parseInt(totalMin / 500)) * 100 - 300;
} else {
return 0;
}
},
splitLine: {
show: true,
},
minInterval: 100, //这个可自己设置刻度间隔
axisLabel: {
formatter: function (value, index) { //Y轴的自定义刻度值，对应上图
//最大值最小值都大于0
if (totalMax >= 0 && totalMin >= 0) {
var interNum1 = parseInt(totalMax / 500);
var numAll = interNum1;
if (index == 0) {
value = 0
} else if (index == 1) {
value = 100
} else if (index == 2) {
value = 200
} else if (index == 3) {
value = 500
}
for (var i = numAll; i > 0; i--) {
if (index == i + 3) {
value = 500 + i * 500
}
}
return value;
}
//最大值最小值都小于0
if (totalMax < 0 && totalMin < 0) {
var interNum2 = parseInt(Math.abs(totalMin / 500));
var numAll = interNum2;
for (var i = 0; i < interNum2; i++) {
if (index == i) {
value = -500 * (interNum2 - (i - 1));
}
}
if (index == interNum2) {
value = -500
} else if (index == interNum2 + 1) {
value = -200
} else if (index == interNum2 + 2) {
value = -100
} else if (index == interNum2 + 3) {
value = 0
}
return value;
}
//最大值大于0，最小值小于0
if (totalMax > 0 && totalMin < 0) {
var interNum1 = parseInt(totalMax / 500);
var interNum2 = parseInt(Math.abs(totalMin / 500));
for (var i = 0; i < interNum2; i++) {
if (index == i) {
value = -500 * (interNum2 - (i - 1))
}
}
if (index == interNum2) {
value = -500
} else if (index == interNum2 + 1) {
value = -200
} else if (index == interNum2 + 2) {
value = -100
} else if (index == interNum2 + 3) {
value = 0
} else if (index == interNum2 + 4) {
value = 100
} else if (index == interNum2 + 5) {
value = 200
} else if (index == interNum2 + 6) {
value = 500
}
for (var i = 0; i < interNum1; i++) {
if (index == interNum2 + 7 + i) {
value = 500 * (i + 2)
console.log(value)
}
}
return value;
}
}
}
},
series: [
{
name: '111',
type: 'line',
animation: false,
lineStyle: {
normal: {
width: 1
}
},
data: getData(datas.yAxis1)
}, {
name: '222',
type: 'line',
animation: false,
lineStyle: {
normal: {
width: 1
}
},
data: getData(datas.yAxis2)
}
],
}
myChart.clear();
myChart.setOption(option);
}
效果图：100，200，500，1000
3.一定范围内显示正常，范围外数字压缩显示
比如在[-500,500]内范围显示，在其他内容时候压缩显示。
function testFun(elementid, title, datas) {
//定义范围
var lowerScale = -500
var higherScale = 500
var dom = document.getElementById(elementid);
var myChart = echarts.init(dom);
option = {
title: {
text: title,
show: true,
top: '0'
},
tooltip: {
type: 'line',
trigger: 'axis',
formatter: function (params) {
var str = "";
$.each(params, function (i, item) {
//将压缩后的数据还原显示
var value = item.data
if (value < lowerScale) {
value = -Math.pow((value - lowerScale), 2) + lowerScale
} else if (value > higherScale) {
value = Math.pow((value - higherScale), 2) + higherScale
}
if (item.data !== undefined) {
str += item.seriesName + '：' + thousandBitSeparator(parseFloat(value).toFixed(2)) + '
';
}
if (i == params.length - 1) {
str += 'Time: ' + item.axisValue;
}
})
return str;
},
axisPointer: {
lineStyle: {
type: 'dotted',
color: 'red',
width: 2,
},
animation: false
},
textStyle: {
fontSize: 10,
color: 'white',
decoration: 'none'
}
},
legend: {
data: ['data1','data2', 'data3'],
},
xAxis: {
name: 'Time',
nameLocation: 'center',
nameTextStyle: {
color: "gray",
fontSize: 10,
padding: 10
},
splitLine: {
show: false
},
type: 'category',
data: datas.xAxis,
axisLabel: {
formatter: (value, index) => {
return value.substr(11, 5);
},
interval:13,
align: 'center'
}
},
grid: {
top: '12%',
bottom: '5%',
left: '2%',
right: '16px',
containLabel: true
},
yAxis: {
type: 'value',
min: function (value) {
return value.min
},
max: function (value) {
return value.max
},
scale: true,
axisTick: {
inside: true
},
axisLabel: {
inside: true,
margin: 5,
textStyle: {
fontSize: 12,
},
formatter: function (value) {
//还原y轴刻度标签
if (value < lowerScale) {
return Math.floor(-Math.pow((value - lowerScale), 2) + lowerScale)
} else if (value > higherScale) {
return (Math.pow((value - higherScale), 2) + higherScale).toFixed(2)
} else {
return value
}
}
},
//min:0
},
series: [
{
name: 'data1',
type: 'line',
animation: false,
lineStyle: {
normal: {
width: 1
}
},
//数据压缩
data: datas.y1.map(function (i) {
if (i < lowerScale) {
return lowerScale - Math.sqrt(Math.abs(i - lowerScale))
} else if (i > higherScale) {
return higherScale + Math.sqrt(i - higherScale)
} else {
return i
}
})
},
{
name: 'data2',
type: 'line',
animation: false,
lineStyle: {
normal: {
width: 1
}
},
itemStyle: {
normal: {
color: '#0000FF', // 折线条的颜色
}
},
//数据压缩
data: datas.y2.map(function (i) {
if (i < lowerScale) {
return lowerScale - Math.sqrt(Math.abs(i - lowerScale))
} else if (i > higherScale) {
return higherScale + Math.sqrt(i - higherScale)
} else {
return i
}
})
}, {
name: 'data3',
type: 'line',
animation: false,
lineStyle: {
normal: {
width: 1
}
},
//数据压缩
data: datas.y3.map(function (i) {
if (i < lowerScale) {
return lowerScale - Math.sqrt(Math.abs(i - lowerScale))
} else if (i > higherScale) {
return higherScale + Math.sqrt(i - higherScale)
} else {
return i
}
})
}
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
$(window).resize(myChart.resize);
}
这样显示的刻度就为可以在范围外压缩数据，如
-500,-400…400,500,10000