echarts柱状图数据过多

echarts柱状图之数据过多时，实现横向拖动展示数据

dataZoom: [
    {
        type: 'slider',
        realtime: true,
        start: 0,
        // end: 20,  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        height: 5, //组件高度
        left: '25%', //左边的距离
        right: '25%', //右边的距离
        bottom: '5%', //下边的距离
        show: true,  // 是否展示
        fillerColor: "rgba(2,110,252,1)", // 滚动条颜色
        borderColor: "rgba(17, 100, 210, 0.12)",
        backgroundColor: 'rgba(232,244,255,0.51)',//两边未选中的滑动条区域的颜色
        handleSize: 0,      //两边手柄尺寸
        showDetail: false, //拖拽时是否展示滚动条两侧的文字
        zoomLock: true,         //是否只平移不缩放
        moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
        //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放

        //下面是自己发现的一个问题，当点击滚动条横向拖拽拉长滚动条时，会出现文字重叠，导致效果很不好，以此用下面四个属性进行设置，当拖拽时，始终保持显示六个柱状图，可结合自己情况进行设置。
        startValue: 0, // 从头开始。
        endValue: 5,  // 最多5个
        // minValueSpan: 5,  // 放大到最少几个
        // maxValueSpan: 5,  //  缩小到最多几个
    },
    {
        type: "inside",  // 支持内部鼠标滚动平移
        start: 0,
        // end: 20,
        startValue: 0, // 从头开始。
        endValue: 5,  // 最多5个
        zoomOnMouseWheel: false,  // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
    }
],

window.onload = function () {
    var task = {
		XXXXXXXXXXX: function (data) {
            let xData = [];
            let seriesBar = [];
            let mianji = [];
            var option = {}
            if (!data || data.length == 0) {
                option = {
                    title: {
                        text: "暂无数据",
                        x: "center",
                        y: "center",
                        textStyle: {
                            color: "#fff",
                            fontWeight: "normal",
                            fontSize: 16,
                        },
                    },
                }
            } else {
                data.forEach(function (item, index, self) {
                    xData.push(data[index].data)
                    seriesBar.push(data[index].zengzhang)
                    mianji.push(data[index].mianji)
                })
                option = {
                    dataZoom: [
                        {
                            type: 'slider',
                            realtime: true,
                            start: 0,
                            // end: 20,  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
                            height: 5, //组件高度
                            left: '25%', //左边的距离
                            right: '25%', //右边的距离
                            bottom: '12%', //下边的距离
                            show: true,  // 是否展示
                            fillerColor: "rgba(2,110,252,1)", // 滚动条颜色
                            borderColor: "rgba(17, 100, 210, 0.12)",
                            backgroundColor: 'rgba(232,244,255,0.51)',//两边未选中的滑动条区域的颜色
                            handleSize: 0,      //两边手柄尺寸
                            showDetail: false, //拖拽时是否展示滚动条两侧的文字
                            zoomLock: true,         //是否只平移不缩放
                            moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
                            //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放

                            //下面是自己发现的一个问题，当点击滚动条横向拖拽拉长滚动条时，会出现文字重叠，导致效果很不好，以此用下面四个属性进行设置，当拖拽时，始终保持显示六个柱状图，可结合自己情况进行设置。添加这个属性前后的对比见**图二**
                            startValue: 0, // 从头开始。
                            endValue: 3,  // 最多5个
                            // minValueSpan: 5,  // 放大到最少几个
                            // maxValueSpan: 5,  //  缩小到最多几个
                        },
                        {
                            type: "inside",  // 支持内部鼠标滚动平移
                            start: 0,
                            // end: 20,
                            startValue: 0, // 从头开始。
                            endValue: 5,  // 最多5个
                            zoomOnMouseWheel: false,  // 关闭滚轮缩放
                            moveOnMouseWheel: true, // 开启滚轮平移
                            moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
                        }
                    ],
                    tooltip: {
                        trigger: 'axis'
                        /*trigger: 'axis',
                        transitionDuration:0,
                        formatter: '{b} </br>项目个数 {c} 个'*/
                    },
                    xAxis: {
                        type: 'category',
                        data: xData,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#faf6f6',  //更改坐标轴文字颜色
                                fontSize: 12      //更改坐标轴文字大小
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(243,238,238,0.65)' //更改坐标轴颜色
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        min: 0, // 坐标轴刻度最小值。
                        max: 600, // 坐标轴刻度最大值。
                        splitNumber: 3,
                        //name: "单位（个）",
                        nameTextStyle: {
                            color: "rgba(252,248,248,0.69)",
                            fontSize: 12,
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(243,238,238,0.65)' //更改坐标轴颜色
                            }
                        },
                        splitLine: {//分割线配置
                            show: true,
                            lineStyle: {
                                color: "rgba(253,253,253,0.16)",
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fdf9f9',  //更改坐标轴文字颜色
                                fontSize: 12      //更改坐标轴文字大小
                            }
                        },
                    },
                    series: [
                        {
                            data: seriesBar,
                            type: 'bar',
                            barWidth: 20,//柱图宽度
                            itemStyle: {
                                normal: {
                                    //柱形图圆角，初始化效果
                                    barBorderRadius: [30, 30, 0, 0],
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#ef8815',
                                    },
                                        {
                                            offset: 1,
                                            color: '#eaa607',
                                        },
                                    ]),
                                }
                            },
                        }, {
                            data: mianji,
                            type: 'bar',
                            barWidth: 20,//柱图宽度
                            itemStyle: {
                                normal: {
                                    //柱形图圆角，初始化效果
                                    barBorderRadius: [30, 30, 0, 0],
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#00ff4b',
                                    },
                                        {
                                            offset: 1,
                                            color: '#02f188',
                                        },
                                    ]),
                                }
                            },
                        }
                    ]
                };
            }

            initChart('.class', option)
        }
	}
 new Vue({
	el: "#app",
	methods: {
		onemain(row,index) {
			axios.post("/XXX/XXX").then(res => {
                if (res.status === 200) {
                	task.XXXXXXXXXXX(res.data)
                }
            }).catch(err => {
            	task.XXXXXXXXXXX(null)
            })
		}
	}



 })