Echart 添加x轴滚动条

<div class="block">
                <div class="BlockTitle">
                    <h3>分包商劳务</h3>
                    <a href="#" class="BlockMore" style="display: none;">更多>></a>
                </div>
                <div class="BlockBody">
                    <div class="BodyWrapper" id="head_pannel_FBS">
                        <div class="chart-height" id="main" style="width: 450px; height: 300px;"></div>
                    </div>
                </div>
            </div>

 

 /分包商Chart//
                    var legendData = ['普通工种', '特殊工种'];
                    var valueData = {
                        普通工种: [],
                        特殊工种: [],
                        //累计人数: [],
                    };
                    //初始化
                    nameData = [];
                    //valueData = [];
                    if (ret.FBSData.nameDatas) {
                        for (var i = 0; i < ret.FBSData.nameDatas.length; i++) {
                            nameData.push(ret.FBSData.nameDatas[i]);
                        }
                    }
                    if (ret.FBSData.TSGZDatas) {
                        for (var i = 0; i < ret.FBSData.TSGZDatas.length; i++) {
                            valueData["特殊工种"].push(ret.FBSData.TSGZDatas[i]);
                        }
                    }
                    if (ret.FBSData.PTGZDatas) {
                        for (var i = 0; i < ret.FBSData.PTGZDatas.length; i++) {
                            valueData["普通工种"].push(ret.FBSData.PTGZDatas[i]);
                        }
                    }

                    var seriesData = [
                               {
                                   name: '普通工种',
                                   type: 'bar',
                                   label: {
                                       show: false,
                                       //align: 'left',
                                       verticalAlign: 'middle',
                                       position: 'insideBottom',
                                       distance: 15,
                                       fontSize: 10,
                                       //rotate: 90,
                                       //formatter: '{c}  {name|{a}}',
                                       //rich: {
                                       //    name: {
                                       //        textBorderColor: '#fff'
                                       //    }
                                       //}
                                   },
                                   data: valueData['普通工种']
                               },
                               {
                                   name: '特殊工种',
                                   type: 'bar',
                                   label: {
                                       show: false,
                                       //align: 'left',
                                       verticalAlign: 'middle',
                                       position: 'insideBottom',
                                       distance: 15,
                                       fontSize: 10,
                                       //rotate: 90,
                                       //formatter: '{c}  {name|{a}}',
                                       //rich: {
                                       //    name: {
                                       //        textBorderColor: '#fff'
                                       //    }
                                       //}
                                   },
                                   data: valueData['特殊工种']
                               },
                    ];
                    InitComplexBarEchars2("head_pannel_FBS", nameData, legendData, seriesData, "人数(人)");

 

//初始化复杂的图表-单轴
function InitComplexBarEchars2(id, nameData, legendData, seriesData, yUnit) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init($('#' + id + ' #main').get(0));
    var option = {
        tooltip: {
            trigger: 'axis',
            //鼠标移动时显示刻度类型，常用包括：cross，shadow
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '10%',
            right: '10%',
            top: '18%',
            bottom: '23%'
        },
        toolbox: {
            show: false,
            feature: {
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: legendData
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                data: nameData,
                axisLabel: {
                    //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
                    interval: 0,
                    //倾斜度 -90 至 90 默认为0
                    rotate: 45
                }
            }
        ],
        
        //dataZoom: [
        //    {
        //        type: 'slider',
        //        show: true,
        //        xAxisIndex: [0],//添加x轴滚动条
        //        start: 1,
        //        end: 35
        //    },
        //],

        yAxis: [
            {
                type: 'value',
                name: yUnit,
                //min: 0,
                //max: 250,
                position: 'left',
                axisLine: {
                    //显示Y轴
                    lineStyle: {
                        //color: colors[0]
                    },
                    show: true
                },
                axisLabel: {
                    //显示Y轴刻度数值
                    formatter: '{value}',
                    show: true
                },
                show: true
            }
        ],
        series: seriesData,
        color: colorDatasLine
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}