运维咖啡吧

享受技术带来的乐趣,体验生活给予的感动

Echarts常见问题处理

tooltip排序

tooltip: {
  trigger: 'axis',
  formatter: function(params){
    let newParams = [];
    let tooltipString = [params[0].name + '<br/>'];
    newParams = [...params];
    newParams.sort((a,b) => {return b.value - a.value});
    newParams.forEach((p) => {
        const cont = p.marker + ' ' + p.seriesName + ': ' + p.value + '<br/>';
        tooltipString.push(cont);
    });

    return tooltipString.join('');

    // 仅显示Top 10
    // return tooltipString.slice(0,10).join('');
  }
},

tooltip内容过多显示不全

tooltip: {
  trigger: 'axis',
  position: function (pos, params, dom, rect, size) {
    var obj = {top: 60};

    if (pos[0] < size.viewSize[0] / 2) {
        obj['left'] = pos[0] + 10
    } else {
        obj['right'] = size.viewSize[0] - pos[0] + 10
    }

    return obj;
  }
},