echarts柱状图轮播

第一种：通过TimeLine实现

var areaList = [
                "北京市昌平区", "北京石景万达","北京海淀区苏宁",  " 北京朝阳区望京街", " 北京朝阳区太阳宫", " 北京东城王府井", " 北京丰台区蒲方路", " 上海市虹口区", " 上海市普陀区",
                "上海市静安区", " 上海市徐汇区", " 上海市黄浦区", " 上海市闵行区", " 上海市闸北区", " 南京市中山北路", " 南京秦淮长乐路", " 南京江宁东山",
                "杭州市下城区", " 杭州市萧山区", " 苏州市吴中区",
                "青岛市李沧区", " 青岛市市南区", " 无锡市北塘区", " 无锡市梁溪区", " 无锡市南长区", " 扬州市邗江区", " 武汉市汉阳区", " 厦门市思明区", " 常州市新北区",
                "广州市越秀区", " 成都市锦江区", " 深圳市南山区", " 深圳市福田区", " 苏州市姑苏区", " 四川省简阳市", " 西安雁塔区", " 西安莲湖区",
                "西安经开区", "郑州市金水区", " 沈阳市和平区",
                "天津市河西区", " 合肥市庐阳区", " 合肥市蜀山区", " 宁波市江东区", " 济南市历下区", " 重庆南坪", " 河北廊坊", " 河北石家庄", " 河南洛阳",
                "云南昆明", " 辽宁沈阳", " 沈阳奥体", " 辽宁抚顺", " 湖南湘潭", " 湖南长沙", " 安徽马鞍山", " 安徽芜湖",
                "安徽亳州", " 苏州工业园区", " 南京建邺区",
                "绍兴河桥", " 杭州拱墅", " 内蒙古包头", " 南昌红谷滩", " 湖北宜昌", " 甘肃兰州", " 福建莆田", " 福建龙岩", " 广州白云区",
                "宁夏银川", " 山东潍坊", " 山东泰安", " 山东烟台", " 山东德州", " 广西南宁", " 四川绵阳", " 广东佛山",
                "广东东莞", " 厦门集美", " 福州金融街",
                "长春红旗街", " 太原龙湖", " 武汉荆门", " 陕西渭南", " 内蒙古通辽", " 浙江金华", " 宁波余姚", " 常州武进", " 江苏镇江",
                "无锡滨湖区"
                ];
                        
var arr = [ 1, 1, 1, 2, 1, 1, 2, 0, 1, 2, 0, 1, 2, 1, 2,
            1, 1, 2, 1, 1, 2, 0, 1, 2, 0, 2, 0, 1, 2, 0,
            2, 1, 1, 2, 0, 1, 1, 1, 2, 1, 1, 2, 0, 1, 1,
            1, 2, 1, 1, 2, 0, 1, 2, 0, 2, 0, 2, 0, 1, 1,  
            1, 1, 2, 1, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 1,
            1, 1, 2, 1, 1, 2, 0, 1, 2, 0, 1, 2, 0 ,1, 1
　　　　　　];
                
var displayNum = screen.width > 1500 ? 25 : 15;//每次显示数据条数
var groupNum = Math.ceil(arr.length / displayNum);
var arrGroup = [];
for (var i = 0; i < arr.length; i += displayNum) {//数据按个数分组存储
    arrGroup.push(arr.slice(i, i + displayNum));
}
var areaGroup = [];
for (var i = 0; i < areaList.length; i += displayNum) {//区域名称按个数分组存储
    areaGroup.push(areaList.slice(i, i + displayNum));
}
var groupOption = []; 
for (var i = 0; i < groupNum; i++) {
    var temp = {
        xAxis: [
                {
                    type: 'category',
                    axisLabel: {
                        show: true,
                        textStyle: {
                                    color: '#7e878e',
                                    fontSize: 12
                                    },
                        interval: 0,
                        rotate: displayNum > 13 ? 25 : 0,//数据超过13条时，横坐标标签斜置
                    },
                    data: areaGroup[i],
                    splitLine: { show: false },

                    }
                ],
                series: [
                    { data: arrGroup[i] },
                ]
                };
    groupOption.push(temp);
    }
    

option = {
    baseOption: {
        timeline: {
            // y: 0,
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 2000,
            // controlStyle: {
            //     position: 'left'
            // },
            data: areaGroup,
            label: {
                formatter : function(s) {
                    return '';
                }
            }
        },
        title: {
            subtext: ''
        },
        tooltip: {},
        calculable : true,
        grid: {
            top: 80,
            bottom: 100
        },
        xAxis: [
            {
                type:'category',
                axisLabel:{'interval':0},
                data:areaList,
                splitLine: {show: false}
            }
        ],
        yAxis: [
            {
                minInterval: 1,//纵坐标为整数
                type: 'value',
                name: '处',
                // max: 53500
                max: 3
            }
        ],
        series: [
                    {
                        name: '异常总数',
                        type: 'bar',
                        barWidth: 15,
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                color: '#D0D8E2',
                                formatter: function (params) {//总数为0时显示数字
                                    if (params.value === 0) {
                                        return params.value;
                                    } else {
                                        return '';
                                    }
                                }
                            }
                    },
                    data: arr,
                    itemStyle: {
                        normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: '#75c0ea'
                                                },
                                                {
                                                    offset: 1,
                                                    color: '#3b85dc'
                                                }
                                                ]
                                            )
                                }
                                },
                    }
                ]
    },
    options: groupOption,
};

第二种：通过DataZoom实现

 

var zoomstart = 0;
var zoomend = 100;

var restart = setInterval(function () {
    var areaList = [
                "北京市昌平区", "北京石景万达","北京海淀区苏宁",  " 北京朝阳区望京街", " 北京朝阳区太阳宫", " 北京东城王府井", " 北京丰台区蒲方路", " 上海市虹口区", " 上海市普陀区",
                "上海市静安区", " 上海市徐汇区", " 上海市黄浦区", " 上海市闵行区", " 上海市闸北区", " 南京市中山北路", " 南京秦淮长乐路", " 南京江宁东山",
                "杭州市下城区", " 杭州市萧山区", " 苏州市吴中区",
                "青岛市李沧区", " 青岛市市南区", " 无锡市北塘区", " 无锡市梁溪区", " 无锡市南长区", " 扬州市邗江区", " 武汉市汉阳区", " 厦门市思明区", " 常州市新北区",
                "广州市越秀区", " 成都市锦江区", " 深圳市南山区", " 深圳市福田区", " 苏州市姑苏区", " 四川省简阳市", " 西安雁塔区", " 西安莲湖区",
                "西安经开区", "郑州市金水区", " 沈阳市和平区",
                "天津市河西区", " 合肥市庐阳区", " 合肥市蜀山区", " 宁波市江东区", " 济南市历下区", " 重庆南坪", " 河北廊坊", " 河北石家庄", " 河南洛阳",
                "云南昆明", " 辽宁沈阳", " 沈阳奥体", " 辽宁抚顺", " 湖南湘潭", " 湖南长沙", " 安徽马鞍山", " 安徽芜湖",
                "安徽亳州", " 苏州工业园区", " 南京建邺区",
                "绍兴河桥", " 杭州拱墅", " 内蒙古包头", " 南昌红谷滩", " 湖北宜昌", " 甘肃兰州", " 福建莆田", " 福建龙岩", " 广州白云区",
                "宁夏银川", " 山东潍坊", " 山东泰安", " 山东烟台", " 山东德州", " 广西南宁", " 四川绵阳", " 广东佛山",
                "广东东莞", " 厦门集美", " 福州金融街",
                "长春红旗街", " 太原龙湖", " 武汉荆门", " 陕西渭南", " 内蒙古通辽", " 浙江金华", " 宁波余姚", " 常州武进", " 江苏镇江",
                "无锡滨湖区"
                ];
                        
    var arr = [ 1, 1, 1, 2, 1, 1, 2, 0, 1, 2, 0, 1, 2, 1, 2,
                1, 1, 2, 1, 1, 2, 0, 1, 2, 0, 2, 0, 1, 2, 0,
                2, 1, 1, 2, 0, 1, 1, 1, 2, 1, 1, 2, 0, 1, 1,
                1, 2, 1, 1, 2, 0, 1, 2, 0, 2, 0, 2, 0, 1, 1,  
                1, 1, 2, 1, 1, 2, 0, 1, 2, 0, 1, 2, 0, 1, 1,
                1, 1, 2, 1, 1, 2, 0, 1, 2, 0, 1, 2, 0 ,1, 1
              ];
              
    option = {
                            grid: {
                                top: "40",
                                bottom: "25%",
                                right: "25",
                                left: "40",
                            },
                            tooltip: {
                                trigger: 'axis',
                            },

                            xAxis: [
                                {
                                    type: 'category',
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: "#cfd4d8",
                                            width: "2"
                                        }
                                    },
                                    axisLabel: {
                                        show: true,
                                        textStyle: {
                                            color: '#7e878e',
                                            fontSize: 12
                                        },
                                        interval: 0,
                                        rotate: arr.length > 13 ? 25 : 0 ,//数据超过13条时，横坐标标签斜置
                                    },
                                    axisTick: {
                                        show: false,
                                    },
                                    data: areaList
                                }
                            ],
                            dataZoom: [
                                {
                                    type: 'slider',
                                    show: true,
                                    start: zoomStart(),
                                    end: zoomEnd(arr.length),//默认显示条柱数

                                }
                            ],
                            yAxis: [
                                {
                                    minInterval: 1,
                                    type: 'value',
                                    name: '(处)',
                                    position: 'left',
                                    axisLabel: {
                                        formatter: '{value}'
                                    },
                                    splitArea: {
                                        "show": true
                                    },
                                    axisLine: {
                                        show: true,
                                        lineStyle: {
                                            color: "#cfd4d8",
                                            width: "2"
                                        }
                                    },
                                    axisTick: {
                                        show: false,
                                    },
                                    splitLine: {
                                        show: true,
                                        lineStyle: {
                                            color: '#d9d8d8',
                                            width: 1,
                                            type: 'dashed'
                                        }
                                    },
                                    nameTextStyle: {
                                        color: '#7e878e',
                                    },

                                }
                            ],
                            series: [
                                {
                                    name: '异常总数',
                                    type: 'bar',
                                    barWidth: 15,
                                    label: {
                                        normal: {
                                            show: true,
                                            position: 'top',
                                            color: '#D0D8E2',
                                            formatter: function (params) {//总数为0时显示数字
                                                if (params.value === 0) {
                                                    return params.value;
                                                } else {
                                                    return '';
                                                }
                                            }
                                        }
                                    },
                                    data: arr,
                                    itemStyle: {
                                        normal: {
                                            color: new echarts.graphic.LinearGradient(
                                                0, 0, 0, 1, [{
                                                    offset: 0,
                                                    color: '#75c0ea'
                                                },
                                                {
                                                    offset: 1,
                                                    color: '#3b85dc'
                                                }
                                                ]
                                            )
                                        }
                                    },
                                }


                            ]
                        };
    }, 3000);
                        
            //dataZoom的自动播放
            function zoomStart() {
                if (zoomend >= 100) 
                    zoomstart = 0;
                else {
                    zoomstart += 20;
                }
                return zoomstart;
            }
            
            function zoomEnd(length) {
                var displayNum = screen.width > 1500 ? 25 : 15;//根据屏幕分辨率，定默认显示条柱数
                if (length > displayNum && zoomstart === 0) {
                    zoomend = (displayNum / length) * 100;
                } else if (length > displayNum) {
                    zoomend += 20;
                }
                else {
                    zoomend = 100;
                    clearInterval(restart);
                }
                return zoomend;
            }