【Echarts】三维地图叠加柱状图

最新推荐文章于 2024-06-30 12:49:11 发布

程序员不丑009

最新推荐文章于 2024-06-30 12:49:11 发布

阅读量1.3k

点赞数

分类专栏：前端知识文章标签： Echarts三维地图

本文链接：https://blog.csdn.net/u013517229/article/details/118335962

版权

前端知识专栏收录该内容

13 篇文章 0 订阅

订阅专栏

代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title>echarts 地图</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/1.1.1/echarts-gl.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 400px; border: 1px solid black;"></div>
<script type="text/javascript">
    var myChart;
        $.get("扬州市.json", function(huaianJson) {
            echarts.registerMap("yangzhou", huaianJson);
            myChart = echarts.init(document.getElementById("map"));
            var option = {
                geo3D: {
                    show: true,
                    map: "yangzhou",
                    viewControl: { //用于鼠标的旋转，缩放等视角控制
                        autoRotate: false,
                        distance: 130,
                        beta: 100
                    },
                    itemStyle: {
                        borderColor: "black",
                        borderWidth: 2
                    },
                    // 配置为垂直渐变的背景
                    environment: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0, color: '#00aaff' // 天空颜色
                    }, {
                        offset: 0.7, color: '#998866' // 地面颜色
                    }, {
                        offset: 1, color: '#998866' // 地面颜色
                    }], false)
                },
                series: [{
                    type: 'bar3D',
                    coordinateSystem: 'geo3D',
                    shading: 'lambert',
                    data: [[119.442267,32.392154, 100], [119.397777,32.377899, 200], [119.567481,32.426564, 70],
                        [119.321284,33.23694, 120], [119.182443,32.271965, 90], [119.443842,32.785164, 50]],
                    barSize: 3,
                    minHeight: 0.2,
                    silent: true,
                    itemStyle: {
                        color: 'orange'
                        // opacity: 0.8
                    },
                    label: {
                        show: true,
                        formatter: function (params) {
                            return params.data[2];
                        },
                        textStyle: {
                            color: "yellow",
                            fontSize: 20,
                            backgroundColor: "rgba(255,255,255,0.0)"
                        }
                    }
                }]
            }
            myChart.setOption(option);
        });
</script>
</body>
</html>

地图JOSN数据下载地址：http://datav.aliyun.com/tools/atlas/index.html#&lat=33.50475906922609&lng=104.2822265625&zoom=4

程序员不丑009

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
【Echarts】三维地图叠加柱状图

代码如下所示：<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>echarts 地图</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquer..
复制链接

扫一扫

专栏目录