echarts如何自定义画地图

最新推荐文章于 2024-06-11 21:36:57 发布

骚年008

最新推荐文章于 2024-06-11 21:36:57 发布

阅读量8k

点赞数 3

分类专栏：前端文章标签： echarts超易版画图

本文链接：https://blog.csdn.net/qq_36245035/article/details/90698811

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

首先进入http://geojson.io画好图。

建立一个js文件，比如我建立guangyuan.js，里面执行

echarts.registerMap('引入名称', {
  "type": "FeatureCollection",
//这个数组装数据
  "features": []
}

然后在建立echarts的路径引入该js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入js -->
    <script src="./guangyuan.js"></script>
</head>
<body>
    <div id="map" style="width:500px;height:300px;background: rgba(12,134,211,0.2)"></div>
</body>
</html>
<script>
    var map = echarts.init(document.getElementById('map'));
        map.setOption(
            {
                series: [
                    {
                        name:'广元',
                        type:'map',
                        mapType:'广元'
                    }
                ]
            }
        );
</script>

这里有全国，全部省，市，区的地图

骚年008

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
echarts如何自定义画地图

首先进入http://geojson.io画好图。建立一个js文件，比如我建立guangyuan.js，里面执行 echarts.registerMap('引入名称', { "type": "FeatureCollection",//这个数组装数据 "features": []} 然后在建立echarts的路径引入该js <!DOC...
复制链接

扫一扫