有带佬写echart联动功能的嘛,

Question

有两张堆叠柱形图,上面的堆叠柱形图表示一周七天的数据,下面的图表示一天24小时的数据,需求是点上面其中的某一天,就切换下面的数据,显示当天每个小时的数据,这种要用什么事件写啊.

Answer 1

写了个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,
      }]
    })
  }
})