单容器多grid与其他容器联动,只有第一个grid可以联动,想实现所有grid与其他容器一起联动
配置项如下
var count = 70;
var intervalCount = 67;
var baseTop = 70;
var gridHeight = 60;
var data = {
o1: [],
o2: [],
o3: [],
o4: [],
o5: [],
xMin: 0,
xMax: count
};
for (var i = 0; i < count; i++) {
var now = i;
data.o1.push([now, Math.floor(Math.random() * 2)]);
data.o2.push([now, Math.floor(Math.random() * 2)]);
data.o3.push([now, Math.floor(Math.random() * 2)]);
data.o4.push([now, Math.floor(Math.random() * 2)]);
data.o5.push([now, Math.floor(Math.random() * 2)])
}
function makeXAxis(gridIndex, opt) {
return echarts.util.merge({
type: 'value',
gridIndex: gridIndex,
axisLine: {
onZero: false,
lineStyle: {
color: '#ddd'
}
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false,
lineStyle: {
color: '#ddd'
}
},
min: data.xMin,
max: data.xMax,
axisPointer: {
lineStyle: {
color: '#f00'
}
}
}, opt || {}, true);
}
function makeYAxis(gridIndex, opt) {
return echarts.util.merge({
type: 'value',
gridIndex: gridIndex,
nameLocation: 'middle',
nameTextStyle: {
color: '#333'
},
boundaryGap: ['30%', '30%'],
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#ccc'
}
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
}, opt || {}, true);
}
function makeGrid(top, opt) {
return echarts.util.merge({
top: top,
height: gridHeight
}, opt || {}, true);
}
option = {
grid: [],
xAxis: [],
yAxis: [],
//参考其他例子加入下面的axisPointer、tooltip配置——20170505
axisPointer: {
link: [{xAxisIndex: 'all'}],
snap: true
},
tooltip:{trigger:'axis'},
series: []
};
ytiles = ['o1', 'o2', 'o3', 'o4', 'o5'];
echarts.util.each(ytiles, function(ytile, idx) {
option.grid.push(makeGrid(baseTop + gridHeight * idx));
option.xAxis.push(makeXAxis(idx));
option.yAxis.push(makeYAxis(idx, {
name: ytile
}));
option.series.push({
name: ytile,
type: 'line',
symbol: 'circle',
symbolSize: 2,
xAxisIndex: idx,
yAxisIndex: idx,
data: data[ytile]
});
});