我想要tooltip显示的内容是数据列固定的,即当我在主图时,tooltip上半部分显示的是k线数据,下半部分显示是vol。当我在附图时,tooltip上半部分仍然显示的是k线数据,下半部分显示vol数据。请问这个如何设置?
配置项如下
var upColor = '#ec0000'
var upBorderColor = '#8A0000'
var downColor = '#00da3c'
var downBorderColor = '#008F28'
var data0 = splitData([
['20150515', 129.873489, 126.26989, 124.631897, 133.055893],
['20150518', 125.567886, 127.252693, 119.015892, 130.669083],
['20150519', 127.90789, 128.703491, 125.099884, 129.499084],
['20150520', 130.715897, 128.656693, 128.282288, 136.144684],
['20150521', 128.75029, 136.6595, 125.942291, 137.735886],
['20150522', 150.559097, 136.565887, 128.656693, 150.605896],
['20150525', 134.225891, 132.541092, 128.282288, 134.366287],
['20150526', 132.494293, 135.536301, 130.247894, 139.888687],
['20150527', 135.583099, 133.757889, 132.119888, 137.689087],
['20150528', 133.336685, 120.513489, 120.139091, 133.336685],
]);
function splitData(rawData) {
var categoryData = [];
var values = []
for (var i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
values.push(rawData[i])
}
return {
categoryData: categoryData,
values: values
};
}
var datavol = [
[0, 30487.394531, 1],
[1, 21326.496094, -1],
[2, 19926.496094, -1],
[3, 21009.402344, 1],
[4, 26390.171875, -1],
[5, 53560.042969, 1],
[6, 35752.777344, 1],
[7, 37754.914063, -1],
[8, 27329.701172, 1],
[9, 39693.589844, 1],
];
option = {
title: {
text: 'SH600678',
left: '3%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
formatter: function(params, ticket, callback) {
// alert(JSON.stringify(params))
var str = ""
var showSeries=params.length
if(showSeries>0){
str= params[0].axisValueLabel +"<br>"
//生成K线
for(var i=0;i<showSeries;i++){
var s = params[i]
if (s.componentSubType=="candlestick"){
str += " - open:"+s.value[1]+"<br>"
str += " - close:"+s.value[2]+"<br>"
str += " - low:"+s.value[3]+"<br>"
str += " - high:"+s.value[4]+"<br>"
break;
}
}
//按顺序生成数据
axisNum = myChart.getOption().xAxis.length
for(var ai=0;ai<axisNum;ai++){
var added = false
for(var j=0;j<showSeries;j++){
var s = params[j]
if(s.axisIndex==ai &&s.axisDim=='x' ){
if (s.componentSubType=="candlestick"){
continue
}else if(s.componentSubType=="bar"){
str += s.marker+s.seriesName+":"+s.value[1]+"<br>"
added = true
}else{
str += s.marker+s.seriesName+":"+s.value+"<br>"
added = true
}
}
}
if(added&&ai<axisNum-1||!added&&ai==0){
str += "<br>"
}
}
}
return str
}
},
axisPointer: {
link: {
xAxisIndex: 'all'
},
label: {
backgroundColor: '#777'
}
},
grid: [{
left: '10%',
right: '10%',
top: 80,
height: 250
}, {
left: '10%',
right: '10%',
top: 360,
height: 100
}, ],
xAxis: [{
type: 'category',
gridIndex: 0,
data: data0.categoryData,
scale: true,
boundaryGap: false,
axisLine: {
onZero: false
},
splitLine: {
show: false
},
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
}, {
type: 'category',
gridIndex: 1,
data: data0.categoryData,
scale: true,
boundaryGap: false,
axisLine: {
onZero: true
},
splitLine: {
show: false
},
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
}, ],
yAxis: [{
scale: true,
gridIndex: 0,
splitNumber: 3,
splitArea: {
show: true
}
}, {
scale: true,
gridIndex: 1,
splitNumber: 3,
splitArea: {
show: true
}
}, ],
series: [{
name: 'K线',
type: 'candlestick',
dimensions: ['date', 'open', 'close', 'low', 'high'],
data: data0.values,
itemStyle: {
normal: {
color: upColor,
color0: downColor,
borderColor: upBorderColor,
borderColor0: downBorderColor
}
},
},{
name: 'vol',
type: 'bar',
xAxisIndex: '1',
yAxisIndex: '1',
data: datavol,
smooth: true,
lineStyle: {
normal: {
opacity: 0.5
}
}
},
],
};