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

最新推荐文章于 2024-07-04 18:04:28 发布

DXnima

最新推荐文章于 2024-07-04 18:04:28 发布

阅读量1.4k

点赞数 1

分类专栏： Echarts+Vue 文章标签：数据可视化 3d javascript vue.js

本文链接：https://blog.csdn.net/qq_40953393/article/details/110352339

版权

Echarts+Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该博客演示了如何使用ECharts和Maptalks库来创建一个3D柱状图，展示上海地区的居民活动点分布。通过引入相关JavaScript库，设置地图和数据，实现了地图的3D效果，并通过视觉映射进行颜色配置。最终，通过ECharts的bar3D系列类型，将数据点以3D柱状形式直观呈现。

摘要由CSDN通过智能技术生成

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

效果图：

npm安装：

npm install echarts
npm install echarts-gl

引入方式：

import echart from "echarts";

或者index.html里面：

    <!-- maptalks 的 CSS 文件 -->
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css">
    <!-- maptalks 的 js 文件 -->
    <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
    <!--echarts js文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!--echarts-gl js文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <!-- ecStat 的 js 文件 -->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <!-- dataTool 的 js 文件 -->
    <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>

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