Echarts: the problem of overlapping sequence tags caused by creating multiple graphs in the same grid

problem description

as shown in the figure: the requirement is to display both a bar chart and a linear chart on the same chart. Both charts need to show their respective data labels, but in some places the labels overlap

.

clipboard.png

the environmental background of the problems and what methods you have tried

because of consulting the official documents of echarts, there is no configuration item for tags to avoid each other automatically, so it can only be implemented manually.
my solution is to calculate the proportion of each series to the maximum value in the series, compare the two calculations of the bar chart and the linear chart, and adjust the position of the bar chart label if the difference is in a certain range (using echarts"s built-in configuration items position and distance).
burning geese is still a problem, because the drawing method of ehcarts is very intelligent, and the maximum value of ordinate yAxis is determined according to the size distribution of the data. In other words, the maximum value of the series may not be the maximum value of ordinate, so the calculated scale value may not be accurate. In the end, it is possible to overlap, as shown above.
has also queried that if the maximum value of yAxis has not been set, the maximum value of the ordinate of the generated graph cannot be obtained with getOption (); while if the maximum value is set according to the data, the resulting graph is not evenly distributed and does not look good.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
this is the part of the code in which I calculate the percentage

let maxVal = Math.max.apply(null, sumList);
sumList.forEach((e, ind) => {
      let gridH = 350 - 66 - 25, labelH = 20;
      // 20%
      if (e < maxVal * 0.2) {
        lab.data[ind] = { value: 0, label: { position: "top", distance: distMin } }
      }
      if (i !== length - 1 && ser[i + 1].type === "line") {
        let lineArr = ser[i + 1].data.map((e) => e === "-" ? 0 : e);
        let lineMax = Math.max.apply(null, lineArr.notempty());
        let abx = Math.abs((e / maxVal - distComm / gridH) - (ser[i + 1].data[ind] / lineMax + labelH / 2 / gridH));
        // 
        if (abx < 0.1) {
          lab.data[ind] = { value: 0, label: { position: "bottom", distance: 10 } };
        }
        abx = Math.abs((e / maxVal - (-distMin) / gridH) - (ser[i + 1].data[ind] / lineMax + labelH / 2 / gridH));
        // 20% 
        if (e < maxVal * 0.2 && abx < 0.1) {
          lab.data[ind] = { value: 0, label: { position: "top", distance: 40 } };
        }
      }
    });

what result do you expect? What is the error message actually seen?

if I still use the percentage method, is there anything I can optimize in my code?
or are there any other ways to solve this problem?
Thank you all!

Aug.29,2021

well, I'm going to answer my own question again. I feel so sad.

finally, I still use the same way of thinking
but can not get the maximum value of yAxis from the echarts instance getOption (), which is solved by me (powerful)
is to observe the maximum value of yAxis under the maximum values of different series, summarize the setting law of echarts, and finally better achieve the effect of automatic evasion of tags
however, there is still a small problem, that is, there is a negative number in the data, and this still needs to be studied again.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b36ea9-405dc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b36ea9-405dc.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?