利用echarts-gl实现3d柱状图的可视化

最新推荐文章于 2024-07-26 13:56:51 发布

nswdbb520

最新推荐文章于 2024-07-26 13:56:51 发布

阅读量1.4k

点赞数

分类专栏：可视化文章标签： javascript html gis 数据可视化

本文链接：https://blog.csdn.net/nswdbb520/article/details/108098428

版权

可视化专栏收录该内容

2 篇文章 0 订阅

订阅专栏

准备工作

上代码

<!-- 
<body>
 -->
<html>

<head>
    <meta charset='utf-8' />
    <style>
        #map {
            margin: 0 auto;
            width: 100%;
            height: 100%
        }

        html,
        body {
            margin: 0;
            overflow: hidden;
            background: #fff;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }
    </style>
</head>

<body>
    <div id='map'></div>
    <script src="jquery.min.js"></script>
    <script src="include-mapboxgl.js"></script>
    <script src="echarts.min.js"></script>
    <script src="echarts-gl.min.js"></script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('map'));

        $.getJSON('ShanghaiBuildingPrice.json', function (linedata) {
            mapboxgl.accessToken = '你自己mapbox的accessToken';
            myChart.setOption({

                visualMap: {
                    show: false,
                    calculable: true,
                    realtime: false,
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    },
                    outOfRange: {
                        colorAlpha: 0
                    },
                    max: linedata[1]
                },
                toolBox: {
                    feature: {
                        dataZoom: {
                            show: true,
                        }
                    }
                },
                mapbox: {
                    center: [121.4693, 31.123070],
                    zoom: 10,
                    pitch: 50,
                    bearing: -10,
                    style: 'mapbox://styles/mapbox/light-v9',
                    boxHeight: 50,
                    // altitudeScale: 3e2,
                    postEffect: {
                        enable: true,
                        SSAO: {
                            enable: true,
                            radius: 2,
                            intensity: 1.5
                        }
                    },
                    light: {
                        main: {
                            intensity: 1,
                            shadow: true,
                            shadowQuality: 'high'
                        },
                        ambient: {
                            intensity: 0.
                        },
                        ambientCubemap: {
                            texture: 'ShanghaiBuildingPrice.hdr',
                            exposure: 1,
                            diffuseIntensity: 0.5
                        }
                    },

                },

                series: [{
                    type: 'bar3D',
                    roam: true,
                    shading: 'realistic',
                    coordinateSystem: 'mapbox',
                    barSize: 0.2,
                    silent: true,
                    data: linedata[0]
                }]
            });
            //获取mapbox对象
            var mapbox = myChart.getModel().getComponent('mapbox3D').getMapbox();
            mapbox.addControl(new mapboxgl.NavigationControl(), 'top-left');

        });

    </script>
</body>

</html>