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实现

 

来源：https://www.cnblogs.com/daiyayi/p/11892858.html