ECharts柱状图过多添加滚动条的步骤(亲测可用)

        var _DEPTNUMER = []; //存入所有科室
        var showEchart = false;
        var namenum = 0;
        if (_DEPTNUMER.length > 0) {
            namenum = Math.floor(100 / (_DEPTNUMER.length / 3));         //这个3可以顺便调整是用来判断当前视图要显示几个
            if (_DEPTNUMER.length > 3) {                                 //3也可以调整用来判断是否显示滚动条
                showEchart = true;
            } else {
                showEchart = false;
            }
        }

 dataZoom: [
                    {
                        type: 'slider',
                        realtime: true,
                        start: 0,
                        end: namenum,  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
                        height: 5, //组件高度
                        left: 5, //左边的距离
                        right: 5, //右边的距离
                        bottom: 10, //下边的距离
                        show: showEchart,  // 是否展示
                        fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
                        borderColor: "rgba(17, 100, 210, 0.12)",
                        handleSize: 0,      //两边手柄尺寸
                        showDetail: false, //拖拽时是否展示滚动条两侧的文字
                        zoomLock: true,         //是否只平移不缩放
                        moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
                        //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放
                         //下面是自己发现的一个问题，当点击滚动条横向拖拽拉长滚动条时，会出现文字重叠，导致效果很不好，以此用下面四个属性进行设置，当拖拽时，始终保持显示六个柱状图，可结合自己情况进行设置。添加这个属性前后的对比见**图二**
                         startValue: 0, // 从头开始。
                         endValue: 6,  // 最多六个
                         minValueSpan: 6,  // 放大到最少几个
                         maxValueSpan: 6,  //  缩小到最多几个
                    },
                    {
                        type: "inside",  // 支持内部鼠标滚动平移
                        start: 0,
                        end: namenum,
                        zoomOnMouseWheel: false,  // 关闭滚轮缩放
                        moveOnMouseWheel: true, // 开启滚轮平移
                        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
                    }
                ]

 var t = document.getElementById("cardChart");
    t.style.width = window.offsetWidth + "px";
    var cardChart = echarts.init(t),
                options = {
                    color: ['#3398DB'],
                    title: {
                        left: "right",
                        //text: new Date().getFullYear() + "年数据",
                        textStyle: {
                            color: "#2c2c2c",
                            fontSize: 14,
                            fontWeight: 500
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: "category",
                        data: dataYearCountName,
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            interval: 0,    //强制文字产生间隔
                            rotate: 45,     //文字逆时针旋转45°
                            textStyle: {    //文字样式
                                color: "black",
                                fontSize: 14,
                                fontFamily: 'Microsoft YaHei'
                            }
                        }
                    }],
                    yAxis: [
                            {
                                type: "value"
                            }
                        ],
                    series: [
                            {
                                name: "例数",
                                type: "bar",
                                barWidth: "60%",
                                data: dataYearCountNum
                            }
                    ]
        };
    //-----------------从这里开始 -----------------
    //cardChart 柱状图名称
    cardChart.setOption(options);
    cardChart.off('click'); //防止触发两次点击事件
    cardChart.getZr().on('click', (params) => {
        let pointInPixel = [params.offsetX, params.offsetY];
        if (cardChart.containPixel('grid', pointInPixel)) {
            let pointInGrid = cardChart.convertFromPixel({
                seriesIndex: 0
            }, pointInPixel);
            let xIndex = pointInGrid[0]; //索引
            let handleIndex = Number(xIndex);
            let seriesObj = cardChart.getOption(); //图表object对象
            var op = cardChart.getOption();
            //获得图表中点击的列
            var month = op.xAxis[0].data[handleIndex];  //获取点击的列名
            console.log(month);
            console.log(handleIndex, seriesObj);
        };
    });