对菜鸟来说,这真的是一个深坑……
先说结局:
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
};