问题原因：柱状图需要有点击事件，点击单个柱，右侧有个列表可以查看详情， 难点：数据差异大时怎么数据少的柱呢？ 如图
，不可能让用户蓝色部分，因为如果数据差距再大一点的时候，红框的蓝色部分可能可点击区域更加小，
思考：是否可以实现点击红框上方区域选中该柱，这样使用起来就更方便，并加上选择效果，让用户知道自己选择的柱，
实现：通过chartRef.current?.getEchartsInstance()?.getZr().on('click', (event) => {}) 监听到柱状图内容区域点击事件，根据containPixel({ gridIndex: 0 }, [offsetX, offsetY]);判断是否点击在网格区域
如果点击到网格上有两种情况：
1，点击到了单根柱上，
convertFromPixel({ seriesIndex: 0 }, [offsetX, offsetY]);检查是否点击柱状体，
const dataIndex = Math.floor(clickedIndex[0]);
如果 dataIndex >= 0 && dataIndex < option.series[0].data.length为真则点击到了单根柱上，
2.点击了图表外部空白区域（不处理）。
具体代码如下：
深入思考：如果是如下图中的柱状图怎么实现点击单个柱查询详情呢，
目前想到的方法是通过大致的坐标去判断点击的那根柱，（待优化）
