Echart 基于maptalks3D地图实现3D柱状图

深藏阁楼爱情的钟 2022-12-25 00:54 273阅读 0赞

例子来源[ECharts Gallery - 上海居民活动点分布可视化 (makeapie.com)][ECharts Gallery - _ _makeapie.com]

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70][]

# npm安装： #

npm install echarts
    npm install echarts-gl

引入方式：

import echart from "echarts";

或者index.html里面：

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
        
        <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
        
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>

# 1.数据结构 #

var data1=[
          {
           name:"wnm",//柱状图名字
           value:[
                    121.25354625637668, //经度
                    31.12640542845193, //纬度
                    30000 //数值
                 ]
           }]

# 2.option配置 #

var option = {
                    visualMap: {
                        show:false,
                        max:30000,
                        inRange: {
                            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                        },
                    },
                    tooltip:{
                    },
                    //创建maptalks3D地图
                    maptalks3D: {
                        center: [121.4693, 31.213070],
                        zoom: 10,
                        pitch: 40,
                        urlTemplate: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                        // altitudeScale: 1,
                        postEffect: {
                            enable: true,
                            FXAA: {
                                enable: true
                            }
                        },
                        light: {
                            main: {
                                intensity: 1,
                                shadow: true,
                                shadowQuality: 'high'
                            },
                            ambient: {
                                intensity: 0.
                            },
                            ambientCubemap: {
                                // texture: 'data-1491838644249-ry33I7YTe.hdr',
                                exposure: 1,
                                diffuseIntensity: 0.5,
                                specularIntensity: 2
                            }
                        }
                    },
                    series: [
                       {
                        type: 'bar3D',
                        shading: 'realistic',
                        coordinateSystem: 'maptalks3D',
                        barSize: 0.4,
                        silent: true,
                        data:data1
                    }]
                }

# 3.源码 #

<!DOCTYPE html>
    <html style="height: 100%">
       <head>
           <meta charset="utf-8">
       </head>
       <body style="height: 100%; margin: 0">
           <div id="container" style="height: 100%"></div>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
           <--!引入maptalks地图-->
           <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
           <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
           <script type="text/javascript">
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var data1=[{name:"wnm",value:[121.25354625637668, 31.12640542845193, 30000]}];
                // https://gallerybox.echartsjs.com
                //读取MapboxStyle数据
                var option = {
                    visualMap: {
                        show:false,
                        max:30000,
                        inRange: {
                            color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                        },
                    },
                    tooltip:{
                    },
                    maptalks3D: {
                        center: [121.4693, 31.213070],
                        zoom: 10,
                        pitch: 40,
                        urlTemplate: 'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
                        // altitudeScale: 1,
                        postEffect: {
                            enable: true,
                            FXAA: {
                                enable: true
                            }
                        },
                        light: {
                            main: {
                                intensity: 1,
                                shadow: true,
                                shadowQuality: 'high'
                            },
                            ambient: {
                                intensity: 0.
                            },
                            ambientCubemap: {
                                // texture: 'data-1491838644249-ry33I7YTe.hdr',
                                exposure: 1,
                                diffuseIntensity: 0.5,
                                specularIntensity: 2
                            }
                        }
                    },
                    series: [{
                        type: 'bar3D',
                        shading: 'realistic',
                        coordinateSystem: 'maptalks3D',
                        barSize: 0.4,
                        silent: true,
                        data:data1
                    }]
                }
    
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
           </script>
       </body>
    </html>

遇到什么问题，可留言，看到会尽快回复。

[ECharts Gallery - _ _makeapie.com]: https://www.makeapie.com/editor.html?c=xBycTiGtFf
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTUzMzkz_size_16_color_FFFFFF_t_70]: /images/20221120/d5136322429c4c98a4274ba4a375f024.png