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