echarts横向柱状图的滚动以及数据过小引出的扩大点击范围处理方法

横向的柱状图： 

dataZoom:

        [

          {

            id: 'dataZoomY',

            yAxisIndex: [0],

            left: '98%', // 滚动条位置

            show: false, // 是否显示滑动条，不影响使用

            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件

            startValue: 0, // 从头开始。

            endValue: 9, // 一次性展示10个            

            width: 10,           

            fillerColor: '#E8EAEF',

            zoomLock: true,

            showDataShadow: false, // 是否显示数据阴影 默认auto

            backgroundColor: '#fff',

            showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true

            realtime: true, // 是否实时更新

            filterMode: 'empty',

            handleIcon: 'circle',

            // handleSize: '80%',

            moveHandleSize: 0,

            // maxValueSpan: 2,

            // minValueSpan: 2,

            brushSelect: false, // 刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）

          },

          {

            type: 'inside',

            yAxisIndex: [0],

            zoomOnMouseWheel: false, // 滚轮是否触发缩放

            moveOnMouseMove: true, // 鼠标滚轮触发滚动

            moveOnMouseWheel: true,

          }

        ],

利用echarts提供的新API convertFromPixel解决柱状图数据差距大，小数据几乎没有显示条可以点击。

这种方法借助于convertFromPixel和zr来实现需要的效果，实现方法如下：

this.echart.getZr().on('click',params=>{
    const pointInPixel= [params.offsetX, params.offsetY];
    if (this.echart.containPixel('grid',pointInPixel)) {
        let xIndex=this.echart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0];
        /*事件处理代码书写位置*/}
});

实现的代码解释如下：

使用getZr添加图表的整个canvas区域的点击事件，并获取params携带的信息：

获取到鼠标点击位置：

const pointInPixel= [params.offsetX, params.offsetY];

使用containPixel API判断点击位置是否在显示图形区域，下面的例子过滤了绘制图形的网格外的点击事件，比如X、Y轴lable、空白位置等的点击事件。

使用API convertFromPixel获取点击位置对应的x轴数据的索引值，我的实现是借助于索引值的，当然可以获取到其它的信息，详细请查看文档。
                        
摘录自码友，原文链接：https://blog.csdn.net/smk108/article/details/78482154