一个使用 echarts 呈现地图图表的小例子 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 测试</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script>
    <!-- 引入 jquery.js -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <style>
        body{
            background-color: black;
        }
        #main{
            background-color: rgb(11,18,46);
        }
    </style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的元素 -->
    <div id="main" style="width: 800px;height:800px;"></div>
    <script type="text/javascript">
    
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        myChart.showLoading();

        // 地图数据源：https://datav.aliyun.com/tools/atlas/

        $.get('https://geo.datav.aliyun.com/areas_v2/bound/geojson?code=150600_full', function (geoJson) {

            myChart.hideLoading();

            echarts.registerMap('EEDS', geoJson);

            myChart.setOption(option = {
                title: {
                    text: '情况统计',
                    subtext: '统计截至：2021-04-25 12:32:21',
                    textAlign: 'right',
                    right: -150,
                    bottom: 20,
                    textStyle: {
                        color: 'white'
                    },
                    subtextStyle: {
                        color: 'white'
                    }
                },
                // 相关配置文档：https://echarts.apache.org/zh/option.html#series-map
                series: [
                    {
                        name: '情况统计',
                        type: 'map',
                        center: [108.97269199999997, 39.26688099244878],    // 当前视角的中心点
                        zoom: 1.2,                                          // 当前视角的缩放比例
                        roam: true,                                         // 是否开启平游或缩放
                        scaleLimit: {                                       // 滚轮缩放的极限控制
                            min: 1,
                            max: 2
                        },
                        mapType: 'EEDS',
                        label: {
                            show: true,
                            color: 'rgb(255, 255, 255)'
                        },
                        itemStyle: {
                            areaColor: 'rgba(0, 0, 200, 0)',
                            borderColor: 'rgb(255, 255, 255)'
                        },
                        data: [

                        ]
                    }
                ]
            });
        });
    </script>
</body>
</html>
posted @ 2021-04-25 18:42  不是豆豆  阅读(385)  评论(0)  编辑  收藏  举报
友情链接：迷途