echarts实现两个y轴0刻度保持一致（多条数据时）

echarts实现两个y轴0刻度保持一致（多条数据时）

原因

当一个图表有两个y轴的时候，而且其中一个出现负数时，会出现下面这种情况，可能两个y轴的0刻度线不保持一致

而为了美观，则需要放到同一刻度线，这里就需要自己写方法了

image-20240327093758999

实现效果

image-20240327093829777

解决过程

网上方法较多，但是相比于实际情况还是有些差别，这里是参考了这位大佬的方法

1.求出左右y轴的最大值最小值，这里是对多条数据遍历，yAxisIndex代表不同y轴

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let result = {};
     allData.forEach(item => {
       const yAxisIndex = item.yAxisIndex;
       const values = item.data.map(value => parseInt(value));
       if (!result[yAxisIndex]) {
         result[yAxisIndex] = {
           max: Math.max(...values),
           min: Math.min(...values)
         };
       } else {
         result[yAxisIndex].max = Math.max(result[yAxisIndex].max, ...values);
         result[yAxisIndex].min = Math.min(result[yAxisIndex].min, ...values);
       }
     });

2.如果最小值不小于零 直接不做处理

1
2
3
4
5
6
7
8
       const max1 = result[0].max || 1;
        const min1 = result[0].min || 0;
        const max2 = result[1].max || 1;
        const min2 = result[1].min || 0;
//不小于零直接不需要处理
        if (min1 >= 0 || min2 >= 0) {
          return false
        }

3.算出刻度比例

1
const ratio = (max1 - min1) / (max2 - min2);

4.判断哪使用哪个y轴 并将对应的比例相乘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let minMax = {}
if (max1 < max2 * ratio) {
  minMax.y1Max = max2 * ratio;
  minMax.y2Max = max2;
} else {
  minMax.y1Max = max1;
  minMax.y2Max = max1 / ratio;
}
if (min1 < min2 * ratio) {
  minMax.y1Min = min1;
  minMax.y2Min = min1 / ratio;
} else {
  minMax.y1Min = min2 * ratio;
  minMax.y2Min = min2;
}

5.扩大最大值最小值

1
2
3
4
minMax.y1Min = (minMax.y1Min * 1.5).toFixed(0)
        minMax.y2Min = (minMax.y2Min * 1.5).toFixed(0)
        minMax.y1Max = (minMax.y1Max * 1.5).toFixed(0)
        minMax.y2Max = (minMax.y2Max * 1.5).toFixed(0)

6.赋值，这里需要做下判断如果不没有小于零的负数直接依然使用默认最大值最小值

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
yAxis：{
           max: value => {
             const { max, min } = value;
             if (minMax) {
               return minMax.y1Max
             } else {
               return max
             }
           },
           min: value => {
             const { max, min } = value;
             if (minMax) {
               return minMax.y1Min
             } else {
               return min
             }
           }
         }, {
           max: value => {
             const { max, min } = value;
             if (minMax) {
               return minMax.y2Max
             } else {
               return max
             }
           },
           min: value => {
             const { max, min } = value;
             if (minMax) {
               return minMax.y2Min
             } else {
               return min
             }
           }
         }

完整代码

方法

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
maintainScale(allData) {
     //       const allData = [
     //     {
     //         "data": [
     //             "6083",
     //             "310",
     //             "355",
     //             "2721",
     //             "14",
     //             "1835",
     //             "64",
     //             "-1"
     //         ],
     //         "yAxisIndex": 0,
     //     },
     //     {
     //         "data": [
     //             "5298",
     //             "241",
     //             "347",
     //             "1899",
     //             "7",
     //             "1611",
     //             "43",
     //             "4"
     //         ],
     //         "yAxisIndex": 0,
     //     },
     //     {
     //         "data": [
     //             "396",
     //             "2644",
     //             "2152",
     //             "131",
     //             "5",
     //             "3357",
     //             "61",
     //             "200"
     //         ],
     //         "yAxisIndex": 1,
     //     },
     //     {
     //         "data": [
     //             "344",
     //             "1890",
     //             "1890",
     //             "101",
     //             "4",
     //             "2524",
     //             "96",
     //             "203"
     //         ],
     //         "yAxisIndex": 1,
     //     }
     // ];
     let result = {};
     allData.forEach(item => {
       const yAxisIndex = item.yAxisIndex;
       const values = item.data.map(value => parseInt(value));
       if (!result[yAxisIndex]) {
         result[yAxisIndex] = {
           max: Math.max(...values),
           min: Math.min(...values)
         };
       } else {
         result[yAxisIndex].max = Math.max(result[yAxisIndex].max, ...values);
         result[yAxisIndex].min = Math.min(result[yAxisIndex].min, ...values);
       }
     });
     console.log(result);
     if (Object.keys(result).length == 2) {
       const max1 = result[0].max || 1;
       const min1 = result[0].min || 0;
       const max2 = result[1].max || 1;
       const min2 = result[1].min || 0;
       //不小于零直接不需要处理
       if (min1 >= 0 || min2 >= 0) {
         return false
       }
       const ratio = (max1 - min1) / (max2 - min2);
       let minMax = {}
       if (max1 < max2 * ratio) {
         minMax.y1Max = max2 * ratio;
         minMax.y2Max = max2;
       } else {
         minMax.y1Max = max1;
         minMax.y2Max = max1 / ratio;
       }
       if (min1 < min2 * ratio) {
         minMax.y1Min = min1;
         minMax.y2Min = min1 / ratio;
       } else {
         minMax.y1Min = min2 * ratio;
         minMax.y2Min = min2;
       }
       minMax.y1Min = (minMax.y1Min * 1.5).toFixed(0)
       minMax.y2Min = (minMax.y2Min * 1.5).toFixed(0)
       minMax.y1Max = (minMax.y1Max * 1.5).toFixed(0)
       minMax.y2Max = (minMax.y2Max * 1.5).toFixed(0)
       return minMax
     } else {
       return false
     }
   }

调用方法再将minMax赋值即可

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
let minMax = this.maintainScale(newSeriesData)
...
  yAxis：{
            ...
            
            max: value => {
              const { max, min } = value;
              if (minMax) {
                return minMax.y1Max
              } else {
                return max
              }
            },
            min: value => {
              const { max, min } = value;
              if (minMax) {
                return minMax.y1Min
              } else {
                return min
              }
            },
            ...
          }, 
          {
            ...
            max: value => {
              const { max, min } = value;
              if (minMax) {
                return minMax.y2Max
              } else {
                return max
              }
            },
            min: value => {
              const { max, min } = value;
              if (minMax) {
                return minMax.y2Min
              } else {
                return min
              }
            },
            ...
          }
...
Echarts
#Echarts
echarts实现两个y轴0刻度保持一致（多条数据时）
https://tian-1-2.github.io/typblog/2024/03/27/2024327-echarts实现两个y轴0刻度保持一致（多条数据时）/
作者
田云鹏
发布于
2024年3月27日
许可协议