Echarts地图使用示例

最新推荐文章于 2024-04-02 22:38:26 发布

旧歌如梦

最新推荐文章于 2024-04-02 22:38:26 发布

阅读量1.2k

点赞数

分类专栏： web 前端文章标签： web 前端地图 js html

本文链接：https://blog.csdn.net/weixin_41878589/article/details/102397659

版权

web 前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Echarts地图使用示例

关于今天使用Echarts地图
几经波折终于完成了Echarts地图使用
首先必须要有JSON地图数据

html代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cechart</title>
<!-- 引入 ECharts 文件 -->
    <script src="./js/echarts.js"></script>
	<script src="./map/china.js"></script>
     <script src="./js/jquery.min.js"></script>
    
</head>
<body>
    <!-- 为 ECharts Map 准备一个容器 -->
    <div id="main" style="width:600px;height:500px;border:1px solid #ccc;"></div>
</body>
<script type="text/javascript">
//初始化地图
$(function () {
	// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
   option = {
	    tooltip : {
	        trigger: 'item',
	        formatter: '{b}'
	    },
	    series : [
	        {
	            name: '中国',
	            type: 'map',
	            mapType: 'china',
	            selectedMode : 'multiple',
	            itemStyle:{
	                normal:{label:{show:true}},
	                emphasis:{label:{show:true}}
	            }
	        }
	    ]
	};
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
})
</script>
</html>

js代码

由于数据太庞大
这里只拿一个块数据演示

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'echarts'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('echarts'));
    } else {
        // Browser globals
        factory({}, root.echarts);
    }
}(this, function (exports, echarts) {
    var log = function (msg) {
        if (typeof console !== 'undefined') {
            console && console.error && console.error(msg);
        }
    }
    if (!echarts) {
        log('ECharts is not Loaded');
        return;
    }
    if (!echarts.registerMap) {
        log('ECharts Map is not loaded')
        return;
    }
	echarts.registerMap('中山市', {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [113.3717198716715, 22.567930189427248],
                        [113.37504903801022, 22.565884153217166],
                        [113.3784451022871, 22.563405788935924],
                        [113.3814490106064, 22.567467557356117],
                        [113.388557, 22.570455],//---
                        [113.39136958945706, 22.56747140812177],
                        [113.39807622385266, 22.57226674674831],
                        [113.401623, 22.572399],//------
                        [113.40927643291847, 22.56630434624766],
                        [113.411226, 22.563772],///
                        [113.40568426742671, 22.56003899927614],
                        [113.409869, 22.555871],
                        [113.40931949879906, 22.553534711337367],
                        [113.40714255871228, 22.548606756064792],
                        [113.40490618869023, 22.54340229950127],
                        [113.40569698324536, 22.53959498405322],
                        [113.40197610672507, 22.538392333719372],
                        [113.4008963043357, 22.53601863826654],
                        [113.39873483608983, 22.532630176108277],
                        [113.39733338833157, 22.530778603858536],
                        [113.39466148593164, 22.530264863072727],
                        [113.39071911798138, 22.527608179906426],
                        [113.38974523448665, 22.519642811163894],
                        [113.39296382619729, 22.514976176299037],
                        [113.38711009088647, 22.512325007770055],
                        [113.3720426229187, 22.503205957916595],
                        [113.3706736639249, 22.502600396056227],
                        [113.36996050401245, 22.504054959936614],
                        [113.36673703620458, 22.504471408284267],
                        [113.361316, 22.505217],//
                        [113.36566393532667, 22.515889395883985],
                        [113.371696, 22.522269],//------->
                        [113.372558, 22.526254],//---->
                        [113.372504, 22.534783],
                        [113.371193, 22.539524],
                        [113.36412075604794, 22.55604944860904],
                        [113.36181817270922, 22.557401722886485],
                        [113.3580566246243, 22.560111613693355],
                        [113.35965688896542, 22.560768765582147],
                        [113.36379057007298, 22.561391612248734],
                        [113.36416918036387, 22.560458349178933],
                        [113.36555943237863, 22.562213466998728],
                        [113.36946790532414, 22.564293408911784],
                        [113.371723, 22.567936]
                    ]
                ]
            },
            "properties": {
                "name": "石岐街道"
            }
        }]
    });
    }
));

地图效果

在这里插入图片描述

注意想要切换JOSN数据

option 中的 mapType 属性和 registerMap 中的第一个参数名称要保持一致，否则无法加载出地图

旧歌如梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts地图使用示例

Echarts地图使用示例关于今天使用Echarts地图几经波折终于完成了Echarts地图使用首先必须要有JSON地图数据html代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />&...
复制链接

扫一扫