有两张堆叠柱形图,上面的堆叠柱形图表示一周七天的数据,下面的图表示一天24小时的数据,需求是点上面其中的某一天,就切换下面的数据,显示当天每个小时的数据,这种要用什么事件写啊.
写了个demo,就是点击获取到数据,再渲染这个思路
var data = [
[120, 84, 201, 156, 178, 134, 65, 192, 210],
[84, 123, 231, 123, 244, 211, 56, 123, 212],
[45, 184, 101, 186, 78, 164, 265, 192, 312],
[110, 124, 301, 116, 278, 144, 165, 312, 121],
[321, 213, 101, 216, 128, 211, 23, 212, 398]
]
var d = data[0]
option = {
grid: [{
height: '40%',
},{
bottom: 20,
height: '40%',
}],
xAxis: [{
gridIndex: 0,
type: 'category',
data: ['一', '二', '三', '四', '五']
},{
gridIndex: 1,
type: 'category',
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00']
}],
yAxis:[{
gridIndex: 0,
type: 'value',
},{
gridIndex: 1,
type: 'value',
}],
series: [{
xAxisIndex: 0,
yAxisIndex: 0,
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
label: {
show: true
}
},{
xAxisIndex: 1,
yAxisIndex: 1,
data: d,
type: 'bar',
label: {
show: true
}
}]
};
myChart.on('click', function(params) {
var gridIndex = params.componentIndex
var dataIndex = params.dataIndex
if (gridIndex === 0) {
d = data[dataIndex]
myChart.setOption({
series: [{},{
data: d,
}]
})
}
})