[Echart.js]解决多折线label标签重叠

官网到现在都没有给出解决方案

情况如图

[Echart.js]解决多折线label标签重叠_第1张图片

没有明确的配置可以直接避免这个情况,所以只能曲线救国了

Solution

就是 判断每个数据是不是在同一个圆上,圆心自己设置,半径也自己设置,然后设置进series的data里

形成类似于

series[
    data:[
    {
    value:xxx,
    label:{
    option:'left'
    }
},
{
    value:xxx,
    label:{
        option:'left'
    }
}
]]

圆心取中间数,半径按个人情况,我是取从左到右第二个数字起的倍数

            const centerPoint = []; // 圆心
          const circleR = []; // 半径
          for (let i = 0; i < series[0]['data'].length; i++) {
            let j = 0;
            const sortlist = [];
            while (j < series.length) {
              sortlist.push(series[j]['data'][i]);
              j++;
            }
            const mind = sortlist.sort()[mid]; // 排序
            const len = mind ? parseInt(mind, 10).toString().length : 2;
            centerPoint.push(mind);
            circleR.push((Math.pow(10, len - 2)) * 4); // 画半径
          }
          // console.log('yiki', centerPoint);
          // console.log('yiki', circleR);
          const mathes = (item, di) => {// 匹配是否在圆内
            if (!item || !centerPoint[di]) {
              return item;
            }
            if (item === centerPoint[di]) {
              return item;
            }
            const up = centerPoint[di] + circleR[di];
            const down = centerPoint[di] - circleR[di];
            if (item < up && item > down) {
              if (item < centerPoint[di]) {
                return {
                  value: item,
                  label: {
                    position: 'left'
                  }
                };
              } else {
                return {
                  value: item,
                  label: {
                    position: 'right'
                  }
                };
              }
            } else {
              return item;
            }
          };

          for (let p = 0; p < series[0]['data'].length; p++) {
            let j = 0;
            while (j < series.length) {
              series[j]['data'][p] = mathes(series[j]['data'][p], p);
              j++;
            }
          }
// 然后return 回你的option就行了

 

你可能感兴趣的:(前端)