echarts : 同一个grid内创建多图导致的序列标签重叠问题

Question

问题描述

如图：需求是在同一个图上同时展示柱状图与线性图，两张图都需要显示各自的数据标签，但是在某些地方标签就会重叠了

问题出现的环境背景及自己尝试过哪些方法

因为查阅了echarts 的官方文档，没有标签自动互相躲避的配置项，只能用手动的方法实现。
我的解决方法是：计算各系列占该系列中最大值的比例，将柱状图和线性图的两个计算结果进行比较，如果差值在某个范围内，就调整柱状图标签的位置（使用echarts内置的配置项position与distance来做）。
燃鹅这样还是又问题，因为ehcarts的画图方式很智能，是根据数据的大小分布来确定纵坐标yAxis的最大值的，换言之，系列的最大值未必会是纵坐标的最大值，所以计算出来的比例值来比较也不一定准确，最后还是会有重叠的可能，就像上图。
同时也查询过，如果没有设置过yAxis的最大值，用getOption()是获取不到生成的图的纵坐标最大值的；而如果根据数据去设置最大值的话，生成的图不是平均分布的，也不好看。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
这是我计算百分比的代码部分

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 } };
        }
      }
    });

你期待的结果是什么？实际看到的错误信息又是什么？

如果还是用计算百分比的方法，我的代码有可以优化的地方吗？
或者有没有其他解决这个问题的思路？
感谢各位！

Answer 1

好了，我又来回答自己的问题了，感觉好忧桑~~

最后，我还是用同一种思路
不过无法从echarts实例getOption()中获取yAxis最大值的问题，被我用劳力解决了(强大)
就是观察不同系列最大值下的yAxis最大值，总结出echarts的设置规律，终于比较好的能做到标签自动躲开的效果
然而还是有一点点小问题，就是数据中存在负数的情况，这个还需要再研究一下。