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;
            }