Echarts 实现西藏自治区地图

最新推荐文章于 2024-06-13 21:46:08 发布
︶ㄣ洳影隨形しovё
最新推荐文章于 2024-06-13 21:46:08 发布
阅读量739
点赞数
本文链接：https://blog.csdn.net/qq_43907534/article/details/107760707
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>西藏地图</title>
    <!-- 引入 Bootstrap 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- cdn 引入 JQuery 文件 -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.min.js"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
        }

        .map_title {
            width: 1125px;
            height: 50px;
            line-height: 50px;
        }

        .map_title div:first-child {
            float: left;
            margin-left: 350px;
            font-size: 20px;
            color: #01479D;
            font-weight: bold;
        }

        .map_title div:nth-child(2) {
            float: right;
            margin-right: 15px;
        }

        .map_title div select {
            width: 120px;
            height: 30px;
        }

        .map_title div select:hover {
            background-color: #01479D;
            color: #fff;
        }

        .map_title div select option {
            background-color: '#fff';
        }
    </style>
</head>

<body>
    <div class="tibet">
        <div class="map_title">
            <div>投资项目在线审批监管平台申报项目概览</div>
            <div>
                <select id="mnu-area" name="area">
                    <option value="540000">西藏</option>
                    <option value="540100">拉萨市</option>
                    <option value="540200">日喀则市</option>
                    <option value="540300">昌都市</option>
                    <option value="540400">林芝市</option>
                    <option value="542200">山南地区</option>
                    <option value="542400">那曲地区</option>
                    <option value="542500">阿里地区</option>
                </select>
                <select id="mnu-year" name="year">
                    <option value="all">全部</option>
                    <option value="2020" selected="">2020</option>
                    <option value="2019">2019</option>
                    <option value="2018">2018</option>
                    <option value="2017">2017</option>
                    <option value="2016">2016</option>
                    <option value="2015">2015</option>
                </select>
            </div>
        </div>


        <div id="xizang_map" style="width: 1125px;height: 450px;">

        </div>
        <!-- <img src="./json/tibet.json"></img> -->
    </div>
    <script>
        var xizang_map = echarts.init(document.getElementById('xizang_map'));
        // 引入地图数据
        // var uploadedDataURL = "https://geo.datav.aliyun.com/areas_v2/bound/540000_full.json";
        var uploadedDataURL = "./json/tibet.json";
        
        // 请求返回的数据
        var mapData = [
            { name: '拉萨市', value: 219 },
            { name: '日喀则市', value: 339 },
            { name: '昌都市', value: 312 },
            { name: '林芝市', value: 329 },
            { name: '山南市', value: 89 },
            { name: '那曲市', value: 189 },
            { name: '阿里地区', value: 109 }
        ];
        var COLORS = ["#003167", "#0050a3", "#005fca", "#077fff", "#3fbcff", "#77d0ff"];
        // 解析地图数据包
        $.getJSON(uploadedDataURL, function (geoJson) {
            echarts.registerMap('tibet', geoJson);
            var option = {
                // backgroundColor: '#fff',
                // title: {
                //     text: '',
                //     top: 20,
                //     x: 'center',
                //     textStyle: {
                //         color: '#ccc'
                //     }
                // },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return params.name + '<br/>' + '项目数:' + Math.ceil(Math.random() * 500) + '个' + '<br/>' + '总投资:' + Math.ceil(Math.random() * 200) + '亿元';
                    },

                    textStyle: {
                        color: '#fff'
                    },
                },
                // 视觉映射组件【展示效果类似于图例】
                visualMap: {
                    // top bottom left right 组件离容器之间的距离
                    type: 'piecewise',
                    left: 50,
                    bottom: 30,
                    splitList: [
                        {

                            min: 1000,
                            color: COLORS[0],
                            label: '1000个以上'

                        },
                        {

                            min: 301,
                            max: 1000,
                            color: COLORS[1],
                            label: '301-1000个'

                        },
                        {
                            min: 101,
                            max: 300,
                            color: COLORS[2],
                            label: '101-300个'

                        },
                        {
                            min: 21,
                            max: 100,
                            color: COLORS[3],
                            label: '21-100个'
                        },
                        {
                            min: 6,
                            max: 20,
                            color: COLORS[4],
                            label: '6-20个'
                        },
                        {
                            max: 5,
                            color: COLORS[5],
                            label: '5个或以下'
                        }
                    ],
                },
                geo: {
                    roam: true, // 是否开启鼠标缩放
                    // zoom: 1.5,// 当前视角的缩放比例
                    // aspectScale: 0.75, // 地图的长宽比
                },
                series: {
                    type: 'map',
                    map: 'tibet',
                    label: {
                        show: true,
                        color: '#d87a80',
                        fontSize: 12,
                    },
                    emphasis: {
                        label: {
                            color: '#fff'
                        },
                        itemStyle: {
                            areaColor: '#fe9756',
                            borderWidth: 0,
                        }
                    },
                    data: mapData
                }
            };
            xizang_map.setOption(option);
        });

    </script>
</body>

</html>
难点:那曲市文本标签位置显示可以在地区json中添加 “cp”:[88.7,32.5] 自己设置标签的显示位置
在这里插入图片描述