echarts折线图改变y轴刻度

1 篇文章 0 订阅

1. 不要求y轴数据的规律，这时候可以用开立方缩小数据的间隙。

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 + "</br>"
result += itemValue
})
var allResult = result + "</br>" + 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,
},
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);
}


3.一定范围内显示正常，范围外数字压缩显示

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)) + '<br/>'; } 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

• 2
点赞
• 4
收藏
觉得还不错? 一键收藏
• 0
评论
03-20 2万+
05-15
10-15
02-20 300
02-18 384
02-20 1141

“相关推荐”对你有帮助么？

• 非常没帮助
• 没帮助
• 一般
• 有帮助
• 非常有帮助

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