echarts-for-react点击事件

点击柱子

import ReactEcharts from 'echarts-for-react';

const Demo = () => {
  const getOption = {
    grid: {
      top: 80, right: 36, bottom: 70, left: 38,
    },
    title: [
      {
        text: '',
        left: 'lefter',
      },
    ],
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
      },
    ],
  };
  
  return <>
  <ReactEcharts
      style={{
        height: '430px',
        width: '1200',
        border: '1px solid #dadada',
      }}
      option={getOption}
      onEvents={{
            click: (info) => {
              console.log(
              info.dataIndex,   // 当前点击的第几个柱子
              info.seriesIndex,   // 当前点击的第几个数据源
              info.value,    // 当前柱子Y轴的数据
              info.name,   // 当前柱子X轴的名字
              info.seriesName, // 当前数据源的名字
              info.seriesType,   // 当前数据的类型
              info.color,      // 当前柱子的颜色
              );
            },
          }}
    />
  </>
 }