<template>
    <div class="container">
        <div id="main">

        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import 'echarts-gl'
    import Vue from 'vue'

    Vue.prototype.$echarts = echarts;

    export default {
        mounted() {
            // let randomData = [];

            let randomData = [];
            randomData = this.createDate();
            this.createChart(randomData);
            setInterval(() => {
                randomData = this.createDate();
                // this.createChart(randomData);
            },3000);
        },
        methods: {
            createDate(){
                let randomData = [];
                let x, y, z;
                for (var i = 0; i < 50; i++) {
                    // x = Math.random() * 100;
                    // y = Math.random() * 100;
                    // // x =  i;
                    // // y =  i;
                    // z = Math.random() * 100;
                    for(var j = 0; j < 30; j++) {
                        x = j;
                        y = i;
                        z = Math.random() * 100;
                        randomData.push([x, y, z])
                    }

                }
                return randomData
            },
            createChart(randomData) {

                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
                myChart.setOption({
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    visualMap: {
                        show: false,
                        min: 2,
                        max: 100,
                        inRange: {
                            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                        }
                    },
                    xAxis3D: {
                        type: 'value',
                    },
                    yAxis3D: {
                        type: 'value'
                    },
                    zAxis3D: {
                        type: 'value',
                        max: 100,
                        min: 0
                    },
                    grid3D: {
                        // show:false,
                        axisLine: {
                            lineStyle: {color: '#fff'}
                        },
                        axisPointer: {
                            lineStyle: {color: '#fff'}
                        },
                        viewControl: {
                            autoRotate: false
                        },
                        light: {
                            main: {
                                shadow: true,
                                quality: 'ultra',
                                intensity: 1.5
                            }
                        }
                    },
                    series: [{
                        type: 'bar3D',
                        // data: [[0, 0, 3], [0, 1, 3.57], [0, 2, 4.57]],
                        data: randomData,
                        shading: 'lambert',
                        label: {
                            formatter: function (param) {
                                return param.value[2].toFixed(1);
                            }
                        }
                    }]
                });
            }
        }
    }
</script>

<style scoped>
    #main {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 840px;
    }
    #bg_three {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        height: 840px;
    }
</style>
