本文主要是介绍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
};
这篇关于echarts bar内tooltip的formatter回调参数params.seriesId中的’\0’问题以及stack的获取的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
