我是靠谱客的博主 危机雪糕,这篇文章主要介绍ECharts双y轴设置0刻度对齐,左右刻度根据数据变化?一、ECharts双y轴设置0刻度对齐,左右刻度值根据数据变化?总结,现在分享给大家,希望可以做个参考。

一、ECharts双y轴设置0刻度对齐,左右刻度值根据数据变化?

复制代码
1
2
双y轴因为左右的数值有正数有负数的原因,出现0刻度不在一条线上的情况,解决办法如下。

代码如下:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//获取数据中的最大值 function calCuMax(arr){ var max=0; arr.forEach((el)=>{ el.forEach((el1)=>{ if(el1!=undefined&&el1!=""{ if(Number(max)<Number(el1)){ max=el1; } } }) }) var maxint=Math.ceil(Number(max)/10); var maxval=maxint*10; return maxval; } //获取数据中的最小值方法 function calCuMin(arr){ var min=0; arr.forEach((el)=>{ el.forEach((el1)=>{ if(el1!=undefined&&el1!=""{ if(Number(min)>Number(el1)){ min=el1; } } }) }) var minint=Math.floor(Number(min)/10); var minval=minint*10; return minval; } //获取y轴相关的左右两侧各两条折线的最大值和最小值 var Min1=calCuMin([achiincm,typedata]), Min2=calCuMin([achiincmr,typedatar]), Max1=calCuMax([achiincm,typedata]), Max2=calCuMax([achiincmr,typedatar]); var rowNum=6;//刻度线 //定义需要传入echarts中的变量 var max1; var min1; var max2; var min2; var spl1; var spl2; }

会出现y轴左侧有2条负数刻度线,但y轴右侧没有负数,或只有1条负数刻度线的情况,以负数刻度线条数多的一方为准细分另一侧的刻度。会出现多种情况代码如下:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
ifNumber(Min1)<0{//左边有负数 if(Number(Min2)<0){//右边有负数 //两边都有负数(分3种情况) spl1=Math.ceil((Number(Max1)-Number(Min1))/(rowNum-1));//获取间隔刻度 //当最小值小于间隔刻度时说明不止一条负数刻度线,获取负数刻度线条数 var downcount1=Math.ceil(Math.abs(Number(Min1))/spl1); spl2=Math.ceil((Number(Max2)-Number(Min2))/(rowNum-1)); var downcount2=Math.ceil(Math.abs(Number(Min2))/spl2); if(downcount1>downcount2){//左边的负数条数多于右边的 //以左边为准,修改右边的分割刻度 var upcount=rowNumber-downcount1; max1=upcount*spl1; min1=-douncount1*spl1; //右边需要根据左边重新获取刻度 spl2=Math.ceil(Number(Max2)/upcount); max2=upcount*spl2; min2=-downcount1*spl2; }else if(downcount1=downcount2){//左右两边的负数刻度条数一样 var upcount1=rowNum-downcount1; min1=-downcount1*spl1; max1=upcount*spl1; min2=-downcount2*spl2; max2=upcount*spl2; }else if(downcount1<downcount2){//右边的负数条数多于左边,以右边为准 var upcount=rowNum-downcount2; max2=upcount*spl2; min2=-downcount2*spl2; //左边需要根据右边获取刻度 spl1=Math.ceil(Number(Max1)/upcount); max1=upcount*spl1; min1=-douncount2*spl1; } }else{//只有左边有负数,右边都是正数 spl1=Math.ceil((Number(Max1)-Number(Min1))/(rowNum-1)); var downcount=Math.ceil(Math.abs(Min1)/spl1); var upcount=rowNum-downcount; max1=upcount*spl1; min1=-downcount*spl1 spl2=Math.ceil(Number(Max2)/upcount); max2=upcount*spl2; min2=-downcount*spl2; } }else{//左边都是正数 if(Number(Min2)<0){//左边都是正数,右边有负数 spl2=Math.ceil((Number(Max2)-Number(Min2))/(rowNum-1)); var downcouont=Math.ceil(Math.abs(Number(Min2))/spl2); var upcount=Number-downcount; max2=upcount*spl2; min2=-downcount*spl2; spl1=Math.ceil(Number(Max1)/upcount); max1=upcount*spl1; min1=-downcount*spl1; }else{//左右都是正数,没有负数 min1=0; max1=Max1; min2=0; max2=Max2; spl1=Math.ceil((Number(Max1)-Number(Min1))/(rowNum-1)); spl2=Math.ceil((Number(Max2)-Number(Min2))/(rowNum-1)); } }

将变量放到echarts中

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
yAxis:[ { type:'value', name:'左侧y轴名称', min:min1, max:max1, interval:spl1 }, { type:'value', name:'右侧y轴名称', min:min2, max:max2, interval:spl2 } ]

总结

这是我的第一篇文章,希望能在喜欢的事情上走的再远一点。

最后

以上就是危机雪糕最近收集整理的关于ECharts双y轴设置0刻度对齐,左右刻度根据数据变化?一、ECharts双y轴设置0刻度对齐,左右刻度值根据数据变化?总结的全部内容,更多相关ECharts双y轴设置0刻度对齐内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(51)

评论列表共有 0 条评论

立即
投稿
返回
顶部