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-2_allsobaiduweb~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 - -1500returnPosition = (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.axisValuevar itemValue = item.marker + item.seriesName + ": " + item.data.name + "</br>"result += itemValue})var allResult = result + "</br>" + axisNamereturn 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轴的自定义刻度值，对应上图//最大值最小值都大于0if (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;}//最大值最小值都小于0if (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，最小值小于0if (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 = -500var higherScale = 500var 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.dataif (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

echarts折线图改变y轴刻度相关推荐

echarts 折线图设置y轴最小刻度_手把手教你玩转echarts(二)折线图
茫茫人海中与你相遇相信未来的你不会很差作者:婷酱Yaaa 来源:https://juejin.im/post/5f0292d35188252e5a5dbed0 前言哈喽,everybody,我又 ...
echarts 折线图设置y轴最小刻度_Vue 项目如何使用Echarts ，手摸手带你入门
前言最近可视化浪潮越发凶猛但是有些小伙伴们就慌了,觉得自己不是很懂,或者说对里面的参数不是很清楚,所以也就印象也就很模糊那么今天严老湿就带大家好好梳理梳理思路,顺便也带大家写几个Demo 首先得 ...
echarts 折线图设置y轴最小刻度_用plotly和plt画图的基本设置（标题、坐标轴、图例、注释、图像）...
参考链接:用plotly和plt画图的基本设置(标题.坐标轴.图例.注释.图像) - weixin_41670527的博客 - CSDN博客非常好的文章,值得推荐. 一用matplotlib.py ...
echarts 折线图设置y轴最小刻度_数据可视化—Echarts图表应用
<错误>郑愁予我打江南走过, 那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞.你的心如小小寂寞的城,恰若青石的街道向晚.蛩音不响,三月的春帷不揭,你的心是小小的窗扉紧掩.我达达 ...
js折线图设置y轴刻度_手绘风格的 JS 图表库：Chart.xkcd
本文作者:HelloGitHub-kalifun 图表库千万个今天 HelloGitHub 给大家推荐个很有"特色"的图表库:一个手绘风格的 JS 图表库 -- Chart.xkc ...
js折线图设置y轴刻度_d3.js实现自定义多y轴折线图
前言需求是实现一个生命体征的体温单,x轴是时间线,y轴有多个体征项.效果不是特别复杂,但是行业特殊性,所以也没有现成可用的,所以用 d3.js 实现了一个多y轴的折线图. 基础这张图只用了d3.j ...
vue echarts 折线图多Y轴显示，加动态配置Y轴颜色
1.效果图 2.引入依赖 npm install echarts --save 3.在mian.js中引入 import * as echarts from 'echarts'; Vue.protot ...
echarts 折线图多Y轴，每一条Y轴独属于一个区域，折线之间不交集。
1.前景:在echarts中设置多个Y轴的时候,如果不想Y轴的折线有交叉,则需要考虑一下这个方案: 每一条Y轴分为一个区域,使得每一个Y轴都是一个独立的区域,举个例子:四条Y轴,那就是每条Y轴占四分一 ...
echarts 折线图设置y轴最小刻度_【硬货】vue全家桶+Echarts+百度地图，搭建数据可视化系统...
作者丨夙言来源丨前端大牛爱好者(Web-2017) https://segmentfault.com/a/1190000018993981 本文章篇幅略长,内容有点多,大佬可根据目录选择性查阅,新人 ...

echarts折线图改变y轴刻度

echarts折线图改变y轴刻度相关推荐

最新文章

热门文章