echarts纵坐标改为科学计数法
先贴代码
yAxis: {
type: 'value',
// 科学记数法
axisLabel: {
formatter: function (value) {
if (Math.abs(value) > 100000) {
if (value == 0) {
return "0";
// 检查是否已经转化为科学计数了
} else if ((value + '').indexOf('e') > 0) {
return (value + '').replace(/e/, "E");
} else {
var res = value.toString();
var numN1 = 0;
var numN2 = 1;
var num1 = 0;
var num2 = 0;
var t1 = 1;
// 计入小数点前后有多少位
for (var k = 0; k < res.length; k++) {
if (res[k] == ".")
t1 = 0;
if (t1)
num1++;
else
num2++;
}
// 均转换为科学计数法表示
if (Math.abs(value) < 1) {
// 小数点后一位开始计算
for (var i = 2; i < res.length; i++) {
if (res[i] == "0") {
numN2++; //记录10的负指数值(默认值从1开始)
} else if (res[i] == ".")
continue;
else
break;
}
var v = parseFloat(value);
// 10的numN2次方
v = v * Math.pow(10, numN2);
v = v.toFixed(1); //四舍五入 仅保留一位小数位数
return v.toString() + "e-" + numN2;
} else if (num1 > 1) {
numN1 = num1 - 1;
var v = parseFloat(value);
v = v / Math.pow(10, numN1);
if (num2 > 1) {
v = v.toFixed(1);
}
return v.toString() + "e" + numN1;
}
}
} else {
return value;
}
}
}
},
echarts中坐标配置具体分析
在 yAxis.axisLabel. formatter中,更多配置见echarts的配置文档
知识点提取
Math.abs(value)
方法是对value值取绝对值
indexOf()
方法可返回某个指定的字符串值在字符串中首次
出现的位置。(从0位开始数,空格也算一位)
栗子:
查找字符串 “welcome”:
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
//n 输出结果:
n=13
replace()
方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
使用 “W3School” 替换字符串中的 “Microsoft”:>
<script type="text/javascript">
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))
</script>
// 输出:
Visit W3School!
parseFloat()
函数解析参数,并返回一个浮点数。// 栗子:
parseFloat("12"); // 12
parseFloat("12.25"); // 12.25
parseFloat("34 45 66");// 34
parseFloat(" 20 ");// 20
parseFloat('314e-2'); // 3.14
parseFloat('0.0314E+2'); // 3.14
parseFloat('3.14 more non-digit characters');// 3.14
Math.pow(底数,几次方)
基础用法:用math.pow()实现数组的交错求和
int ant=0;i
a+=b[i]*math.pow(-1,i); //实现b数组的交错求和并放在a中
结果a=b[0]+b[1]-b[2]+b[3]-b[4]....
.toFixed()方法
此处转载自:原文链接
toFixed在不同的浏览器实现不同,在IE10及以上里面是正常的四舍五入,但是别的浏览器里面就不一样了,它不是正常的四舍五入(等下重点说),比如:
var a = 1.335;
console.log(a.toFixed(2))
// IE 1.34
//chorme 1.33
其他的浏览器我没去一一测试,所以如果大家用了其他浏览器的还是需要去实际测试一下,我这里就说说javascript的toFixed()方法的四舍五入原理:
toFixed它是一个四舍六入五成双的诡异的方法(也叫银行家算法),"四舍六入五成双"含义:对于位数很多的近似数,当有效位数确定后,其后面多余的数字应该舍去,只保留有效数字最末一位,这种修约(舍入)规则是“四舍六入五成双”,也即“4舍6入5凑偶”这里“四”是指≤4 时舍去,"六"是指≥6时进上,"五"指的是根据5后面的数字来定,当5后有数时,舍5入1;当5后无有效数字时,需要分两种情况来讲:①5前为奇数,舍5入1;②5前为偶数,舍5不进。(0是偶数)
但是,经过我的测试发现,在chorme下面(最新版),并没有完全遵守这个规则,尤其是5的后面没有数字的时候,不是这么判断的,如下:
**var b = 1.335
b.toFixed(2)
"1.33"
var b = 1.345
b.toFixed(2)
"1.34"
var b = 1.355
b.toFixed(2)
"1.35"
var b = 1.365
b.toFixed(2)
"1.36"
var b = 1.375
b.toFixed(2)
"1.38"
var b = 1.385
b.toFixed(2)
"1.39"**
可以发现在chorme下没有完全去遵循这个规律,或许它有自己的算法,但是毕竟它没有遵循通用的银行家算法,所以tofixed这个方法在涉及到金钱计算的业务中还是少用,
最好别用,否则可能会出大问题!
下面再再说说我自己的做法,就是根据精确位数来取小数点后的数,然后判断精确位是大于4还是小于等于4
我们的业务是最多精确到分,也就是两位小数,最少就是取整,不留小数
function moneySwitch(money, precision){//precision是需要精确的位数,如百分位就是2
var result = 0;
//先进行一个千分位的四舍五入,保证3.0999这种情况在保留一位小数的时候能是对的,这一位可以这么做没什么问题
var money = parseFloat(money).toFixed(3);
try{
var int_part = money.split(".")[0], //小数点前的整数
point_num = money.split(".")[1],//取小数点后面的小数
precision_num = point_num[3-precision];
if(precision_num>4){//五入的情况
if(precision==1){
point_num = parseInt(point_num)+10+"";
if(point_num.length>3){//说明往整数位进1
int_part = parseInt(int_part)+1+"";
point_num = point_num[1]+point_num[2];
}else{
point_num = point_num[0]+point_num[1];
}
result = parseFloat(int_part+"."+point_num);
}else if(precision==2){
point_num = parseInt(point_num)+100+"";
if(point_num.length>3){//说明往整数位进1
int_part = parseInt(int_part)+1+"";
point_num = point_num[1];
}else{
point_num = point_num[0];
}
result = parseFloat(int_part+"."+point_num);
}else if(precision==3){
int_part = parseInt(int_part)+1+"";
point_num = 0;
}
result = parseFloat(int_part+"."+point_num);
}else{//四舍的情况
if(precision==1){
point_num = point_num[0]+point_num[1];
}else if(precision==2){
point_num = point_num[0];
}else if(precision==3){
point_num = 0;
}
result = parseFloat(int_part+"."+point_num);
}
}catch(e){
return parseFloat(money).toFixed(2);//如果过程中有出错就tofixed代替为解决
}
return result;
}
扩展— 一些数值转换函数
转自原文链接
Number()
Number()转换规则:
如果是Boolean,分别转化为0 , 1
如果是数字值,只是简单的传入和传出
如果是null值,返回0
如果是undefined, 返回NaN
如果是字符串,遵循以下规则:
- 如果字符串中只包含数字,(包括前面带正号或负号的情况),则将其转换为十进制数值,即"1"会变成 1,“123"会变成 123,而"011"会变成 11(注意:前导的零被忽略了);
- 如果字符串中包含有效的浮点格式,如"1.1”,则将其转换为对应的浮点(也会忽 略前导零)
- 如果字符串中包含有效的十六进制格式,例如"0xf",则将其转换为相同大小的十进制整 数值
- 如果字符串是空的(不包含任何字符),则将其转换为 0
- 如果字符串中包含除上述格式之外的字符,则将其转换为 NaN
如果是对象,则调用对象的 valueOf()方法,然后依照前面的
规则转换返回的值。如果转换 的结果是 NaN,则调用对象的 toString()方法,然后再次依照前面的规则转换返回的字符串值
parseInt()
parseInt()转换规则:
parseInt()函数在转换字符串时,更多的是看其是否符合数值模式。它会忽略字符前面的空格,直到找到第一个非空格字符。
如果第一个字符不是数字字符或者负号,parseInt会返回NaN;也就是说,用parseInt()转换空格字符会返回NaN(Number()对空字符返回0)
如果第一个字符是数字字符parseInt()会继续解析第二个字符,直到解析完所有后续字符或者遇到了非数字字符。'1233aa’会被转换为1233.'22.3’会被转换为22,因为 . 不是有效的数字字符。
如果字符串中的第一个字符是数字字符,parseInt()也能够识别出各种整数格式。也就是说,如果字符串以’0x’开头并且后面跟数字字符,就会将其当做一个十六进制整数,如果字符串以’0’开头,并且后面跟数字字符,则会将其当做一个八进制数来解析。
var num1 = parseInt("1234blue"); // 1234
var num2 = parseInt(""); // NaN
var num3 = parseInt("0xA"); // 10(十六进制数)
var num4 = parseInt(22.5); // 22
var num5 = parseInt("070"); // 56(八进制数)
var num6 = parseInt("70"); // 70(十进制数)
var num7 = parseInt("0xf"); // 15(十六进制数)
ECMAScript 3 JavaScript引擎会把’070’当做八进制,而在ECMAScript 5 JavaScript引擎中,前导的0被忽略,当做十进制解析。
为了消除在使用parseInt()函数时可能导致的问题,可以为这个函数提供第二个参数:转换时使用的基数。
parseInt('10', 16)
parseInt('0xAF', 16)
//指定了十六进制可以不用写'ox'
parseInt('AF', 1 6)
详解parseFloat()
parseFloat()转换规则
与parseInt()相同,parseFloat()也是从第一个字符开始解析每个字符。而且也是一直解析到字符串末尾,或者解析到遇见一个无效的浮点数字字符为止。也就是说,字符串的第一个小数点是有效的,第二个小数点就无效了。
parseFloat会忽略前导的0, 只解析十进制。
如果字符串包含的是一个可解析为整数的数(么有小数点或者小数点后面都是0),parseFloat()会返回整数。
var num1 = parseFloat("1234blue"); //1234 (整数)
var num2 = parseFloat("0xA"); //0
var num3 = parseFloat("22.5"); //22.5
var num4 = parseFloat("22.34.5"); //22.34
var num5 = parseFloat("0908.5"); //908.5
var num6 = parseFloat("3.125e7"); //31250000
.toString()
转自
JS中的所有对象都具有toString方法,它把一个变量隐式转换为字符串
Number类型的对象的toString()方法比较特殊,有默认模式和基模式两种
默认模式:
无论我们用什么表示法声明数字变量,都会按十进制返回
基模式:
转换为相应的进制
#######################################
6.9更新:
将横坐标改为斜体
yAxis: {
axisLabel: {
interval: 0,
rotate: 45,
}
},