EChart问题汇总

tooltip的formatter自定义

在移动到柱状图时， 提示信息自定义。

var extOptions = {
    tooltip : {
        trigger: 'axis',
        formatter: function (params,ticket,callback) {
          var res = '' + params[0].name;
          for (var i = 0, l = params.length; i < l; i++) {
                if(params[i].value*1 > 0) {
                      res += '
' + params[i].seriesName + ' : ' + params[i].value;
                }
          }
          return res;
        }
    }

};

自定义tooltip的formatter，将它放入echart的options中。

legend、grid的布局设置

图表，如果 项目很多，不会重叠坐标。
根据 legend显示内容确定 放置画布的div大小、legend与grid之间的距离
参考代码如下：

function wirteResult(data) {
    var _optionOfProOrder = data.proOrder;
    var rounds = _optionOfProOrder.legend.data.length / 10;

    $('#chartMap').css("height", 400 + 30*rounds);
    var _chartMap = echarts.init(document.getElementById('chartMap'));
    $.extend(_optionOfProOrder, setTooltip4Project(_optionOfProOrder, "chartMap"));
    _chartMap.setOption(_optionOfProOrder);

}

/**
 * setTooltip4Project
 */
function setTooltip4Project(options, divID) {
    // 根据 legend显示内容确定 放置画布的div大小、legend与grid之间的距离
    var rounds = options.legend.data.length / 10;
    var _y = 0;
    if (rounds < 6) {
        _y = 34*rounds;
    } else if (rounds >=6 && rounds < 10) {
        _y = 32*rounds;
    } else {
        _y = 30*rounds;
    }
    var extOptions = {
        grid:{
            y:_y
        },
    tooltip : {
        trigger: 'axis',
        formatter: function (params,ticket,callback) {
                var res = '' + params[0].name;
          for (var i = 0, l = params.length; i < l; i++) {
                if(params[i].value*1 > 0) {
                      res += '' + params[i].seriesName + ' : ' + params[i].value;
                }
          }
          return res;
     }
        }
    };
    return extOptions;
}