达到的效果:

1.本身是个中国地图‘

2.直接通过经纬度标注

3.标注点可以是其他样子(比如:五角星)

4.标注点具有提示框并且鼠标可以进入

5.提示框里的链接可点击(可以添加为链接事件);

所需要技术

1.echarts.min.js

2.china.js

直接上代码

$(document).ready(function(){
$.ajax({
url:'',
type:'POST',
dataType:'json',
data:{num:1000},
dataType:'json',
success:function(data){
var list=data.result;

var markPointData=[];
for (var i = 0; i < list.length; i++) {
var num=[];
var ok=list[i].address;
var num=ok.split(",");
markPointData.push({
"name": list[i].organizationName,
"coord": num,
"runConut": list[i].mun17,
"unitCount": list[i].mun18,
"organizationId":list[i].organizationId

});
};
console.log(markPointData);
//地图
var myChart = echarts.init(document.getElementById('main'));
// mapChart的配置
var option = {
"tooltip": {//提示框组件。
"trigger": 'item',//触发类型 散点图
"enterable": true,//鼠标是否可进入提示框
"transitionDuration": 1,//提示框移动动画过渡时间
"formatter": function(params) {
console.log(params);
return '<a target="_blank" class="params-name" href="'+__CONTEXT__+'/common/jsp?path=specialSubject/unit&organizationId='+params.data.organizationId+'">' + params.name + '</a><p class="conut-next">管理干部培训&nbsp;&nbsp;' + params.data.runConut + '人</p><p class="conut-next">卓越教师培训&nbsp;&nbsp;' + params.data.unitCount + '人</p>'
// if (params.seriesIndex == 0 && JSON.stringify(markPointData).indexOf(params.name) > -1) {
// return '<p class="params-name">' + params.data.name + '</p><p class="conut-next">管理干部培训&nbsp;&nbsp;' + params.data.runConut + '人</p><pclass="conut-next">卓越教师培训&nbsp;&nbsp;' + params.data.unitCount + '人</p>'
// }
},
"backgroundColor": '#fff',
"borderWidth": '1px',
"borderRadius": '5',
"borderColor": 'rgba(72,150,128,1)',
"textStyle": {
//"color": 'rgba(94,194,222,1)'
},
"padding": 22
},
"series": [{//系列列表
"name": "中国",
"type": "map",
"mapType": "china",
"zoom": 1,//当前视角的缩放比例。
"selectedMode": false,
"layoutCenter": ['50%', '53%'],
"layoutSize": "102%",
"label": {//图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
"normal": {
"show": false,
"textStyle": {
"color": "#fff",
"fontSize": "12"
}
},
"emphasis": {
"show": false,
"textStyle": {
"color": "#fff",
"fontSize": "12"
}
}
},
"markPoint": {//图表标注。
"symbol": 'path://M512 39.384615l169.353846 295.384615 342.646154 63.015385-240.246154 248.123077L827.076923 984.615385l-315.076923-145.723077L196.923077 984.615385l43.323077-334.769231L0 401.723077l342.646154-63.015385L512 39.384615',
"symbolSize":10,
"label": {
"normal": {
"show": true,
},
"emphasis": {
show: true,
}
},
"itemStyle": {
"normal": {
"color": 'rgba(72,150,128,1)'
}
},
"data": markPointData
}
}]
};
myChart.setOption(option);
var myChart = echarts.init(document.getElementById('main'));

}
})

  

我的成果:http://gallery.echartsjs.com/editor.html?c=x32xatwys1

转载于:https://www.cnblogs.com/zhaozhenghao/p/10081636.html

echarts 中国地图标注所在点相关推荐

  1. Echarts中国地图各省份区域设置不同的颜色

    摘要: 接着<Echarts引入中国地图>续写,我们的项目需求是要求地图的背景颜色要各省份不同.看了文档同时也看了相关官网例子,写出来总结下吧,以便以后需要. 实现: 1.在series中 ...

  2. echarts 中国地图 世界地图

    最近项目中用到了echarts 中国地图 世界地图,特在这记录一下. world.js 下载链接(world_new.js带有中国地区名称,另一个只是用来显示中国地图) 链接:https://pan. ...

  3. 【echarts 中国地图射线版本】vue实现中国地图航线动画效果,地图上添加散点效果【详细注释,通俗易懂】

    先上效果图 前置条件,必看 首先你需要安装echarts并引入 然后你需要下载china.json文件并注册引入,不然不生效 当然很多新手可能不知道china.json在哪里下载,因为官方已经没有了, ...

  4. Echarts中国地图三级钻取

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站:https://www.captainai.net/dongkelun 前言 最近其实一直在用Echa ...

  5. Echarts中国地图背景颜色渐变

    摘要:关于Echarts地图的问题,在第一篇就说过引入等相关问题(如还有疑惑请先看之前的文章传送门).地图的背景颜色如何实现渐变呢?主要利用的是Echarts中的geo和visualMap结合实现.v ...

  6. VUE 中实现echarts中国地图 人口迁徙

    VUE 中实现echarts中国地图 人口迁徙 效果图: 安装Echarts依赖 要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echa ...

  7. HTML中地图根据数据变色,echarts中国地图根据数据对省份渲染不同的颜色

    echarts中国地图 .centerItem { width: 856px; height: 640px; background-color: #fff; margin: 110px auto 0 ...

  8. 【echarts 中国地图增加南海九段线】

    echarts 中国地图增加南海九段线 最近在开发echarts 中国地图时,客户提出中国地图要完整,需要增加南海九段线. 这是个政治任务,但是echarts里面的文档没有关于南海诸岛九段线的相关配置 ...

  9. Echarts中国地图修改

    前言 在使用Echarts图表时需要修改中国地图中的样式以及内容,在网上查找了一些资料并且整理了一下. Echarts中国地图 地图样式修改 标题修改 数值功能删除,但保留数据计算 按钮功能去除 地图 ...

最新文章

  1. 码农也能有春天:一个人独立运营网站12年,赚到了5亿多美元!
  2. Dreamwerver8下定义表单实现第一个登陆页面
  3. 使用NLog实现一个简单的日志记录(包含源代码)
  4. Effective C# 原则34:创建大容量的Web API(译)
  5. IOS静态库生成及测试
  6. 写在开通博客的第一天
  7. java的实现内部类实现链表
  8. 某些服务在未由其他服务或程序使用时将自动停止
  9. CSRF verification failed. Request aborted.
  10. 【Spark Summit EU 2016】沃森媒体分析系统:从单租户Hadoop到3000租户Spark的架构演进...
  11. 利用iptabls的NFLOG记录自己的HTTP HTTPS上网行为
  12. php算法调度先来先服务器,高响应比优先调度算法
  13. BT5 autoscan genlist ADMsnmp snmpcheck使用
  14. 记录一下java的常用单词
  15. 数理统计中95%置信区间的含义
  16. 苹果蓝牙耳机怎么接电话_如何在开车时可以更安全的接电话——ROMAN R6000蓝牙耳机...
  17. 自动驾驶专题介绍 ———— 转向系统
  18. 网络web渗透工程师-教你怎么喝着茶,把甲方爸爸的活干了。
  19. TeamViewer挂了?用这几种方式依然可以实现Windows远程连接Linux
  20. 权桂贤发布,张朝阳站台:这才是5G安卓机皇

热门文章

  1. Jeecg-boot开发环境搭建(Windows版)
  2. FPGA入门嵌入式 块RAM双口RAM使用
  3. 红外小目标检测之DANNet
  4. Java核心技术36讲 第一讲:Java平台的理解
  5. AudioService
  6. okl4 linux,数据接入 API
  7. 如何制定产业园区招商运营方案
  8. 豌豆荚工程师谈其新版应用搜索技术
  9. ios运行html时黑屏,iOS13 ,xcode11新建项目真机运行出现黑屏及新出现的SceneDelegate的作用...
  10. SAP小技巧 DOCKING容器解决分辨率问题