echarts bar内tooltip的formatter回调参数params.seriesId中的’\0’问题以及stack的获取

对菜鸟来说，这真的是一个深坑……

 

先说结局：

    1、params对象的成员在echarts的“配置项”说明（http://echarts.baidu.com/option.html#series-bar.tooltip.formatter）里进行了介绍，但并没有出现seriesId成员；

    2、以3.5.0版本为例，seriesId最终是由3865行的keyInfo.id ='\0' + keyInfo.name + '\0' + idNum++; 生成的，因此，你总会发现seriesId明明是个字符串，长度seriesId.length却总是不对；

    3、本文意在bar series tooltip的formatter中获取bar的stack值（http://echarts.baidu.com/option.html#series-bar.stack），echarts3.5.0、3.6.1中均未在params对象中提供。本文最终对echarts-3.5.0.js文件的getDataParams方法进行了修改，以便获取到stack参数，以3.5.0版本为例，第3618行开始，整个方法最终如下（其实就增加了一行）：

getDataParams: function (dataIndex, dataType) {
    var data = this.getData(dataType);
    var rawValue = this.getRawValue(dataIndex, dataType);
    var rawDataIndex = data.getRawIndex(dataIndex);
    var name = data.getName(dataIndex, true);
    var itemOpt = data.getRawDataItem(dataIndex);

    return {
        componentType: this.mainType,
        componentSubType: this.subType,
        seriesType: this.mainType === 'series' ? this.subType : null,
        seriesIndex: this.seriesIndex,
        seriesId: this.id,
        seriesName: this.name,
        name: name,
        dataIndex: rawDataIndex,
        data: itemOpt,
        dataType: dataType,
        value: rawValue,
        color: data.getItemVisual(dataIndex, 'color'),
        stack: this.get(‘stack’),    //增加此行，修改之处
        // Param name list for mapping `a`, `b`, `c`, `d`, `e`
        $vars: ['seriesName', 'name', 'value']
    };
},

 

罗索的正文：

 

本文针对的echarts版本为：3.5.0；3.6.1；

使用echarts，作者期望初步得到下面的结果图：

 

        并且，在上图中，能实现这样的效果：举例来说，当鼠标hover到“产品1”的“口径1”最上面的棕色区域时，在弹出的tooltip中应该显示中关键字“口径1”、“产品1”、“8类买家”等。

        但是，从上图的tooltip中，能够看到，并没有“口径1”的字眼……

        如何获取？

        从echarts的文档http://echarts.baidu.com/option.html#series-bar.stack处，我们能够看到stack的介绍，它主要起数据堆叠的作用。但尴尬的是，我通过你堆叠之后，却不能知道我的堆叠的组是谁。

        所以，作者仔细观察tooltip的显示，发现seriesId的值“8类买家0”（如上图tooltip内），与seriesName的值“8类买家”就差一个0，而且，当移动到“口径2”时，这个“8类买家0”会变为“8类买家1”。想当然的，作者以为这个0、1至少能够代表stack的索引吧。

        然后就开始了如下的代码：

tooltip : {
        formatter: function(params) {
            var iStackIndex = parseInt(params.seriesId.replace(params.seriesName, ''));
            return aryStack[iStackIndex];
        }
    },

        然后发现，iStackIndex总是为NaN，百思不得其解，各种查看文档各种找资料，玩儿命怀疑智商……

        然而，茫然坚守的调试仍旧没有解决问题。

        然后使用console.log(params.seriesId.length)发现其长度总是不对，而同样的console.log(params.seriesName.length)却是对的。

        经过#%.^&^@的折腾，最后，终于跟同事一起构造出了seriesId里面莫名出现的’\0’。作为前端小白，真心觉得WTF……

        后面的事儿就简单了，搜索echarts的源码，发现真有’\0’出现，然后再一点点回溯，终于发现了本文开头结局中的第2点。

        并且发现了上面的0、1与stack的索引仅是巧合，根本不能用其代表自己构造的stack数组下标。

 

        最后，附上上文echarts图的源码，以便让你知道我在说什么：

        （注意，你需要在http://echarts.baidu.com/demo.html#bar-stack运行下面的代码）

app.title = '堆叠柱状图';

// 生成n个和为sum的随机整数
function randGenerator(n, sum) {
	  var aryRet = [];
  var fSumTmp = sum;
  var iAcc = 0;
  for (var i = 0; i < (n -1); i++) {
  	var iTmp = Math.ceil(Math.random() * (fSumTmp / 2));
    aryRet.push(iTmp);
    fSumTmp -= iTmp;
    iAcc += iTmp;
  }
  aryRet.push(sum-iAcc);
  return aryRet;
}


var aryDataXAxis = ['产品A','产品B','产品C','产品D','产品E'];
var aryDataLegend = ['1类买家','2类买家','3类买家','4类买家','5类买家','6类买家','8类买家'];

// map的格式
// mapData = ['口径1', '口径2']['产品A','产品B','产品C','产品D','产品E']['1类买家','2类买家','3类买家','4类买家','5类买家','6类买家','8类买家']
var mapData = [];
mapData['口径1'] = [];
mapData['口径2'] = [];
var aryStack = [];

// 最外层标明“口径1”、“口径2”
for (var itemMap in mapData) {
    aryStack.push(itemMap);
    // x轴
    for (var itemXAxis in aryDataXAxis) {
        mapData[itemMap][itemXAxis] = [];
        // y轴
        // for (var itemLegend in aryDataLegend) {
        //     mapData[itemMap][itemXAxis].push((Math.random() * 100).toFixed(1));
        // }
        mapData[itemMap][itemXAxis] = randGenerator(aryDataLegend.length, 100);
    }   
}

var arySeries = [];

// 最外层标明“口径1”、“口径2”
for (var itemMap in mapData) {
    
    // y轴
    for (var itemLegend in aryDataLegend) {
        //console.log(aryDataLegend[itemLegend]);
        var objTmp = new Object();
        objTmp.name = aryDataLegend[itemLegend];
        objTmp.type = 'bar';
        objTmp.stack = itemMap;
        objTmp.data = [];
        // x轴
        for (var itemXAxis in aryDataXAxis) {
            objTmp.data.push(mapData[itemMap][itemXAxis][itemLegend]);
        }
        objTmp.tooltip = {
            formatter: function (params) {

                return funcTooltip(params);
            }
        };
        if (itemLegend == aryDataLegend.length - 1) {
            objTmp.label = {
                normal: {
                    show: true,
                    position: 'top',
                    textStyle: {
                        color: '#666'  
                    },
                    formatter: itemMap
                } 
            };
        }
        arySeries.push(objTmp);
    }
}


function funcTooltip(params) {
    var aryHtml = [];
    aryHtml.push('<div style="text-align:left;">');
    for (var item in params) {
        aryHtml.push('<br />');
        aryHtml.push(item + '：' + params[item]);
    }
    aryHtml.push('</div>');
    return aryHtml.join('');
}

option = {
    tooltip : {
        formatter: function(params) {
            var iStackIndex = parseInt(params.seriesId.replace(params.seriesName, ''));
            return aryStack[iStackIndex];
        }
    },
    legend: {
        data: aryDataLegend
    },
    grid: {
        left: '3%',
        right: '4%',
        height: '280',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            data : aryDataXAxis
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : arySeries
};