<template>
    <div class="container">
        <div id="main">
            <H5>3D图</H5>
            <div id="tester" style="width:600px;height:250px;"></div>
        </div>
    </div>
</template>

<script>
    import Plotly from '../3d/plotly-latest.min'

    export default {
        mounted() {
            this.init();
        },
        methods: {
            init() {
                // let TESTER = document.getElementById('tester');
                // Plotly.newPlot( TESTER, [{
                //     x: [1, 2, 3, 4, 5],
                //     y: [1, 2, 4, 8, 16] }], {
                //     margin: { t: 0 } } );


                // Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function (err, rows) {
                // Plotly.d3.csv('http://sdzhsh/mt_bruno_elevation.csv', function (err, rows) {
                //     function unpack(rows, key) {
                //         return rows.map(function (row) {
                //             return row[key];
                //         });
                //     }

                var z_data = [];
                var t = 0;
                var t1 = 0;
                var t2 = 0;
                var t3 = 0;
                for (var i = 0; i < 24; i++) {
                    // z_data.push(unpack(rows, i));
                    t = parseInt(Math.random()*100);
                    t1 = parseInt(Math.random()*100);
                    t2 = parseInt(Math.random()*100);
                    t3 = parseInt(Math.random()*100);
                    z_data.push(
                        [t1, t, t, t3, t, t, t, t2, t3, t, t, t, t2, t3, t, t, t, t2],
                    )
                }

                var data = [{
                    z: z_data,
                    type: 'surface'
                }];

                var layout = {
                    title: '',
                    autosize: false,
                    width: 960,
                    height: 600,
                    margin: {
                        l: 15,
                        r: 10,
                        b: 15,
                        t: 10,
                    }
                };
                Plotly.newPlot('tester', data, layout);
                // });
            }
        }
    }
</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>
