echarts 简单绘制地图

最新推荐文章于 2024-06-11 21:36:57 发布
最新推荐文章于 2024-06-11 21:36:57 发布
阅读量1.4k 收藏 6
点赞数 1
分类专栏： # 前端插件/工具 文章标签： 前端
原文链接：https://www.jianshu.com/p/d6e889af6516
版权

效果图

需要导入以下文件

   <script src="~/Scripts/jquery.js"></script>/*Jquery文件*/
    <script src="~/Scripts/echarts.js"></script>/*echarts文件,可从官网下载*/
    <script src="~/Scripts/jiangxi.js"></script>/*省份数据，可从我的网盘中下载*/

以下是完整代码

<!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>
</head>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="echartMap" style="width: 1000px;height:1000px;"></div>
    <script src="jquery.min.js"></script>
    <script src="echarts.min.js"></script>
    <script src="jiangxi.js"></script>
    <script type="text/javascript">
        var sData=[
            {name:'南昌市',value:12000000},
            {name:'上饶市',value:12000000},
            {name:'景德镇市',value:12000000},
            {name:'九江市',value:12000000},
            {name:'宜春市',value:12000000},
            {name:'抚州市',value:12000000},
            {name:'吉安市',value:12000000},
            {name:'赣州市',value:12000000},
            {name:'新余市',value:12000000},
            {name:'萍乡市',value:12000000},
            {name:'鹰潭市',value:12000000},
        ]
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('echartMap'));
       var option = {
           tooltip: {
               show: true,
               trigger: 'item',
               triggerOn: 'click',
               formatter: "名称:{b}<br />坐标:{c}"
           },
           series: [{
                   name: "江西省分布",
                   type: 'custom',//配置显示方式为用户自定义
                   legendHoverLink:true,
                   coordinateSystem: 'geo',
                //    itemStyle: {
                //        normal: {
                //            color: '#46bee9'
                //        },
                //        label:{show:true}
                //    },
                   data: sData //    coldCar
               }
           ],
           legend: {
            //    type: "plain",
               show: true,
               orient: 'vertical',
               x: 'middle',
               y: 'left',
               data: [
                   {
                       name: "分布",
                       icon: "circle",
                       textStyle: {
                           color: "#a9d6fa"
                       }
                   }
               ]
           },
           geo: {//引入江西省的地图
               map: '江西',
               label: {
                   show:true,
                   color:'#000',
                   fontSize:18,
                   emphasis: {
                       show: true,
                       color:'#000',
                   }
               },
               roam: true,
               zoom: 1,
               zlevel:0,
               itemStyle: {
                   normal: {
                       borderColor: '#fff'
                   },
                   emphasis: {
                        borderColor: '#1890ff',
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 5,
                        shadowOffsetX: 5
                   }
               },
               regions: [//对不同的区块进行着色
                   {
                       name: '上饶市',
                       itemStyle: {
                           normal: {
                               areaColor: '#5CD89E'
                           },
                           emphasis: {
                            areaColor: '#5CD89E',
                            }
                       }
                   }, {
                       name: '景德镇市',
                       itemStyle: {
                           normal: {
                               areaColor: '#FCCF73'
                           },
                           emphasis: {
                            areaColor: '#FCCF73',
                            }
                       }
                   }, {
                       name: '鹰潭市',
                       itemStyle: {
                           normal: {
                               areaColor: '#81A1FD'
                           },
                           emphasis: {
                            areaColor: '#81A1FD',
                            }
                       }
                   }, {
                       name: '南昌市',
                       itemStyle: {
                           normal: {
                               areaColor: '#FD898D'
                           },
                           emphasis: {
                            areaColor: '#FD898D',
                            }
                       }
                   }, {
                       name: '九江市',
                       itemStyle: {
                           normal: {
                               areaColor: '#FCCF73'
                           },
                           emphasis: {
                            areaColor: '#FCCF73',
                            }
                       }
                   }, {
                       name: '宜春市',
                       itemStyle: {
                           normal: {
                               areaColor: '#81A1FD'
                           },
                           emphasis: {
                            areaColor: '#81A1FD',
                            }
                       }
                   }, {
                       name: '抚州市',
                       itemStyle: {
                           normal: {
                               areaColor: '#FCCF73'
                           },
                           emphasis: {
                            areaColor: '#FCCF73',
                            }
                       }
                   }, {
                       name: '新余市',
                       itemStyle: {
                           normal: {
                               areaColor: '#5CD89E'
                           },
                           emphasis: {
                            areaColor: '#5CD89E',
                            }
                       }
                   }, {
                       name: '萍乡市',
                       itemStyle: {
                           normal: {
                               areaColor: '#FCCF73'
                           },
                           emphasis: {
                            areaColor: '#FCCF73',
                            }
                       }
                   }, {
                       name: '吉安市',
                       itemStyle: {
                           normal: {
                               areaColor: '#FD898B'
                           },
                           emphasis: {
                            areaColor: '#FD898B',
                            }
                       }
                   }, {
                       name: '赣州市',
                       itemStyle: {
                           normal: {
                               areaColor: '#81A1FD'
                           },
                           emphasis: {
                            areaColor: '#81A1FD',
                            }
                       }
                   }
               ]
           
            }
       };
       myChart.setOption(option);
       myChart.on('click',function(params){
           if(params.componentType=='geo'){
               if(params.name='上饶市'){
                   console.log('上饶市');
               }
           }

       })
    </script>
</body>

</html>

注：关于文字不居中，地图上显示名称的位置为其省会的坐标位置。在导入的地图数据中，直接搜索相关地区名字，可以看到经纬度坐标。也就是只需要改变cp下的经纬度就可以改变图上文字位置。

希江木
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
页面图表插件echarts中map用法
欢迎大家交流前端开发技术、经验及各种知识沉淀
09-21 3359
整个地图实现阴影或者3D效果，需要echarts中配置项**geo和series中同时设置阴影效果**（或者series系列数组中设置2个元素），series浮在geo上面,二者中series的z的值要大于geo中z的值，并且geo相对series有阴影偏移距离，注意在series中的itemstyle中不设置shadowOffsetX和shadowOffsetY；地图中某一区域的阴影效果可以在data数据中具体的元素中对itemStyle进行设置
Echart地图组件的使用
暗夜91的博客
04-25 1万+
1、基本应用（中国地图+世界地图） ​ echarts中想要使用地图首先需要准备地图对应的js文件，js文件可以到github上克隆下来，地址为： https://github.com/Luna829/incubator-echarts ，地图的js文件存放在 map/js路径下。 1）效果要求： 2）代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt
echart之map地图图表使用教程
ll_883963的博客
07-15 3440
官方解释你可以有选择地退出默认的深度响应式/只读转换模式，并将原始的，未被代理的对象嵌入状态图中。它们可以根据情况灵活运用：有些值不应该是响应式的，例如复杂的第三方类实例或 Vue 组件对象。(第三方实例)当渲染具有不可变数据源的大列表时，跳过 proxy 转换可以提高性能。解决方案在实例化echart时，将其指定为非响应式的import {
Echarts 绘制地图（中国、省市、区县），保姆级教程！
最新发布
共同学习，共同成长
06-11 5292
这篇讲述 Vue+Echarts 绘制地图（中国、省市、区县），保姆级教程！
教你从零开始画echarts地图
m0_67401660的博客
07-31 6124
离线地图下载地址echarts文档地址。
echarts map （echarts地图）使用总结
HurryUpp的博客
12-11 1万+
echarts 地图的各种使用场景
Echarts绘制地图（超详细版！）
m0_55245520的博客
01-17 9418
Echarts是一个很有用又很美观的可视化工具，最近想用Echarts绘制地图，但是网上的代码都没有绘制完全，今天分享一下我的代码要注意echarts需要引用一些js文件~
echarts 绘制地图
a754334599的博客
03-02 1595
例图： var uploadedDataURL = "/asset/get/s/data-1528971808162-BkOXf61WX.json"; var geoGpsMap = [121.4648, 31.2891]; var t = 1; var r = 1; //所有地点坐标 var geoCoordMap = { 江苏: [118.8062, 31.9208], 黑龙江: [127.9688, 45.368], 内蒙古: [110.3467, 41.489...
echarts绘制地图
yf19990720的博客
08-18 1270
echarts ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 ECharts 遵循 Apache-2.0 开源协议，免费商用。 ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。 效果图 初始效果 鼠标移到某一板块效果、 鼠标移到图例上查看效果 代码 开始前，先下载引入地图资源 <script src="./china.js"></s
echarts绘制全国地图完整代码
06-08
在“echarts绘制全国地图完整代码”这个主题中，我们将深入探讨如何使用 ECharts 来绘制中国全图，并了解相关的核心知识点。 首先，`map.html` 文件是主页面，它包含了 ECharts 地图展示的 HTML 结构。在这个文件中...
ECharts地图绘制和钻取简易接口详解
12-10
1.地图绘制过程原理 ...给定范围边界经纬度数据，再给它个名字就构成了绘制地图的基础。也就是说，你可以绘制任意形状的地图版块。 2.地图数据生成 中国以及省市县等地图的基础数据可以从这里生成与下载。 ...
新疆echarts地图资源
12-30
新疆，作为中国的一个自治区，拥有多个地级市、自治州和县级市，因此，这个资源包很可能是包含了这些行政区域的坐标信息和边界数据，以便在ECharts中精确绘制出新疆的地图轮廓。 要使用这些地图资源，首先你需要在...
echarts实现北京市地图
04-11
在本案例中，我们将详细探讨如何使用ECharts来实现北京市地图的绘制。 1. **安装ECharts** 在开始之前，确保你已经安装了ECharts。如果你还没有安装，可以通过npm进行安装： ``` npm install echarts ``` 或者...
echarts——map
xiaoququ的博客
12-16 5345
全国及各地市地图数据获取 案例一：根据各个省份数值高低显示不同深浅的颜色 案例二：二级地图穿透
echarts地图绘制
O_nini_O的博客
06-29 5126
echarts画地图&热力图
echarts 5.0之map使用
吃糖牙疼的博客
01-29 6639
echarts升级5.0之后 map使用 …
Echart实现中国地图和地图打点
wtyzky的博客
12-28 1万+
Echarts实现中国地图和地图打点。
Vue 使用 Apache Echarts 绘制地图（省市、地区、自定义）
热门推荐
~朴：shu的博客
07-04 2万+
使用Apache Echarts绘制中国、省市级、自定义地图的方法

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值