都市楼宇echarts 柱状配置项内容和展示

      
	// github: github.com/jackshawn/pics-by-echarts

            var r = function(max) {
                var m = max || 10;
                return Math.floor(Math.random() * m);
            };

            var moonAndStars = {
                type: 'graph',
                data: (function() {
                    var moonPosition = {
                        x: r(150) + 25,
                        y: r(50)
                    }
                    var moon = [{
                        symbolSize: 80,
                        x: moonPosition.x,
                        y: moonPosition.y
                    }, {
                        symbolSize: 70,
                        x: moonPosition.x - 1.5,
                        y: moonPosition.y - 1.5,
                        itemStyle: {
                            normal: {
                                color: 'rgb(51, 51, 51)'
                            }
                        }
                    }, {
                        symbolSize: 0,
                        x: 0,
                        y: 0
                    }, {
                        symbolSize: 0,
                        x: 200,
                        y: 100
                    }];
                    var num = 60;
                    var stars = [];
                    for (var i = 0; i < num; i++) {
                        stars.push({
                            symbolSize: r(3),
                            x: r(200),
                            y: r(50)
                        })
                    }
                    return moon.concat(stars);
                })(),
                itemStyle: {
                    normal: {
                        color: '#ccc'
                    }
                },
                silent: true,
                z: -1
            };

            var roofs = [
                /*三角形*/
                [1, 2, 3, 4, 5, 4, 3, 2, 1],
                /*凸*/
                [2, 2, 2, 4, 4, 4, 2, 2, 2],
                [2, 2, 2, 4, 20, 4, 2, 2, 2],
                [10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
                [6, 6, 6, 6, 6, 5, 4, 3, 2, 1],
                [0.3, 1, 1.6, 2.5, 3, 3.5, 3.6, 3.7, 3.7, 3.6, 3.5, 3, 2.5, 1.6, 1, 0.3],
                [6, 6, 6, 6, 6, 2, 2, 2],
                [6, 5.5, 5, 4.5, 4, 3.5, 3, 2.5, 2, 1.5],
                [1, 1, 1, 1, 1, 1.5, 2, 2.5, 3, 3.5, 4],
                [1, 1, 1, 1, 1, 1, 1],
                [4, 4, 4, 2, 2, 2, 4, 4, 4]

            ];
            var build = function(height) {
                var arr = [100];
                var l = 14;
                var h = height || 50;
                var addFloor = function(arr, l) {
                    var a = [];
                    for (var i = 0; i < arr.length; i++) {
                        a.push(arr[i] + l);
                    }
                    return a;
                };
                for (var i = 0; i < l; i++) {
                    var newRoof = addFloor(roofs[r(11)], r(h));
                    if (Math.random() < .5) {
                        newRoof.reverse()
                    }
                    arr = arr.concat(newRoof);
                    if (Math.random() < .5) {
                        arr.push(0)
                    }
                }
                return arr;
            };
            var building = build();
            var building2 = (function() {
                var b = build(100);
                for (var i = 0; i < b.length; i++) {
                    if (b[i] > building[i]) {
                        b[i] = b[i] - building[i];
                    }

                }
                return b;
            })()

            option = {
                stack: true,
                xAxis: {
                    data: [],
                    silent: true,
                    splitLine: {
                        show: false
                    }
                },
                grid: {
                    left: 0,
                    right: 0,
                    bottom: 0,
                    top: 0
                },
                yAxis: {
                    silent: true,
                    splitLine: {
                        show: false
                    }
                },
                series: [
                    moonAndStars, {
                        type: 'bar',
                        data: building,
                        itemStyle: {
                            normal: {
                                color: 'rgb(38, 41, 57)'
                            }
                        },
                        animationDelay: function(idx) {
                            return idx * 10;
                        }
                    }, {
                        type: 'bar',
                        data: building2,
                        itemStyle: {
                            normal: {
                                color: 'rgb(28, 31, 47)'
                            }
                        },
                        animationDelay: function(idx) {
                            return idx * 10 + 300;
                        }
                    }, {
                        coordinateSystem: 'cartesian2d',
                        type: 'lines',
                        zlevel: -2,
                        effect: {
                            show: true,
                            period: 1,
                            trailLength: 0.05,
                            symbolSize: Math.random() * 2 + 1,
                            symbol: 'diamond',
                            loop: false
                        },
                        lineStyle: {
                            normal: {
                                color: '#ccc',
                                opacity: 0,
                                curveness: -0.05
                            }
                        },
                        data: [{
                            coords: [
                                [r(50) + 100, r(50) + 150],
                                [r(20) + 10, r(50) + 50]
                            ]
                        }],
                        animationDelay: 1100
                    }
                ],
                animationEasing: 'elasticOut',
                animationDelayUpdate: function(idx) {
                    return idx * 5;
                }
            };
            setInterval(function() {
                option.series[3].effect.symbolSize = Math.random() * 2 + 1;
                option.series[3].data.push({
                    coords: [
                        [r(50) + 100, r(50) + 150],
                        [r(20) + 10, r(50) + 50]
                    ]
                });
                myChart.setOption(option);
            }, 8000)