刚刚学习echarts,想tooltip中显示非data中的数据。请参见代码
tooltip: {
formatter: function(params) {
var res = params.dataIndex + ":" + timeline.currentIndex + ":" + params.seriesIndex;
return res;
}
总是显示最大值3
配置项如下
var timeLineData = [2016, 2017, 2018]
var yData = ['变压器', '断路器', '电流互感器', '电压互感器', '避雷器', '隔离开关'];
var WLData = ['一级预警', '二级预警', '三级预警'];
TipData = [
['2016-5-6 → 2016-5-6', '2016-5-6 → 2016-4-6', 3, 1, 1, 2],
['2017-5-6 → 2017-5-6', '2017-5-6 → 2017-4-6', 3, 1, 1, 2]
];
WOData = {
2016: [6, 1, 1, 1, 2, 1],
2017: [1, 3, 5, 1, 2, 2],
2018: [1, 1, 0, 4, 1, 4]
}
WSData = {
2016: [2, 1, 1, 1, 2, 1],
2017: [1, 4, 1, 3, 1, 0.1],
2018: [1, 1, 0, 4, 1, 4]
}
WTData = {
2016: [1, 3, 3, 1, 1, 2],
2017: [1, 1, 0, 4, 1, 4],
2018: [1, 1, 0, 4, 1, 4]
}
tooltipOption = {
trigger: 'axis',
padding: 10,
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
};
option = {
baseOption: {
title: {},
timeline: {
show: true,
axisType: 'category',
autoPlay: true,
playInterval: 3000,
top: 20,
controlStyle: {
itemSize: 16,
},
data: [],
},
tooltip: {},
legend: {
data: []
},
grid: {
left: '2%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: {
boundaryGap: false,
type: 'value',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
interval: 1,
min: 0,
max: 12,
},
yAxis: [{
type: 'category',
data: yData
}],
dataZoom: [{
type: 'slider',
showDataShadow: false,
showDetail: false,
show: true,
yAxisIndex: 0,
left: '98%',
right: 0,
//bottom: 45,
start: 1,
end: 20
}],
series: [],
animationEasing: 'liner',
animationDelayUpdate: function(idx) {
return idx * 3
}
},
options: []
};
for (var n = 0; n < timeLineData.length; n++) {
ij = parseInt(n);
option.baseOption.legend.data = WLData;
option.baseOption.timeline.data.push(timeLineData[n]);
option.options.push({
title: {
show: true,
'text': timeLineData[n]
},
series: [{
name: WLData[0],
type: 'bar',
stack: '总量',
barWidth: 15,
data: WOData[timeLineData[n]],
tooltip: {
formatter: function(params) {
var res = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params.color + '"></span>';
res += params.dataIndex + ":" + timeline.currentIndex + ":" + params.seriesIndex;
return res;
}
}
}, {
name: WLData[1],
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: WSData[timeLineData[n]],
tooltip: {
formatter: function(params) {
var res = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + params.color + '"></span>';
res += params.dataIndex + ":" + timeline.data[0] + ":" + params.seriesIndex;
return res;
}
}
}, {
name: WLData[2],
type: 'bar',
stack: '总量',
label: {
normal: {
show: true
}
},
data: WTData[timeLineData[n]],
}]
});
}