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
.
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!