echarts中如何使用地图

最新推荐文章于 2024-06-21 17:19:53 发布

脑瓜不疼

最新推荐文章于 2024-06-21 17:19:53 发布

阅读量4.1k

点赞数

分类专栏：大前端文章标签： echarts javascript

本文链接：https://blog.csdn.net/super__code/article/details/79575499

版权

大前端专栏收录该内容

88 篇文章 0 订阅

订阅专栏

有两种引入方式，一种是js文件引入，一种是json文件引入；

下面就以json文件为例：（首先需要省份的json数据）

需要注意的是：$get需要在开启服务的环境下才能加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="mapDemo" style="width: 100%;height: 600px; border: 1px solid ;"> </div>
</body>
<script src="assets/plugins/jquery/jquery.js"></script>
<script src="assets/plugins/echarts4/echarts4.min.js"></script>
<script>
    $(function(){
        $.get('assets/plugins/echarts4/json/henan.json', function (henanJson) {
            echarts.registerMap('河南', henanJson);
            var chart = echarts.init(document.getElementById('mapDemo'));
            var   option = {
                series:[
                    {
                        name:'1',
                        type:'map',
                        map:'河南',
                        zoom:0.8,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        mapLocation:{
                            y:60
                        },
                        itemSytle:{
                            emphasis:{label:{show:false}}
                        },
                        data:[
                        ]
                    }
                ],

            };
            chart.setOption(option);
            chart.resize()
        })

    })
</script>
</html>

效果图：

脑瓜不疼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts中如何使用地图

有两种引入方式，一种是js文件引入，一种是json文件引入；下面就以json文件为例：（首先需要省份的json数据）需要注意的是：$get需要在开启服务的环境下才能加载&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&
复制链接

扫一扫

专栏目录