达到的效果:

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. [AlwaysOn Availability Groups]AlwaysOn健康诊断日志
  2. YTU 3004: 栈的基本运算(栈和队列)
  3. linux redis release.c:37:10: fatal error: release.h: No such file or directory
  4. GraphQL的schema定义文件加载到内存里的例子
  5. MFC创建及读写ini文件操作(转)
  6. 南农计算机考研985,江浙沪985/211考研难度梯队排名
  7. linux启动nifi指令,Nifi 组件脚本开发 - ExecuteScript 使用指南 (二)
  8. mysql group_concat去重_MySQL group_concat() 函数用法
  9. 将非事务性资源绑定到JTA事务中的几种模式
  10. JavaFX技巧12:在CSS中定义图标
  11. SDL_main导致main找不到入口
  12. Python1 安装和配置
  13. 量子场论考试题目解答
  14. 求是量子产业观察:中国量子信息产业发展迅速,初创企业成为新兴力量
  15. 手机连接 linux系统软件,linux上安卓手机管理软件及连接办法
  16. Duilib的界面设计工具DuiDesigner的使用说明
  17. 同步光网络(SONET,Synchronous Optical Networking)简介
  18. 腾讯安全全面出击:双十一不该成为黑产的狂欢
  19. Steave Jobs
  20. Java分布式中文分词组件 - word分词(转自 https //github com/ysc/word)

热门文章

  1. 7. Java不可变集合和Stream流
  2. 挂接Google翻译,下载音频
  3. Code Clinic: Go 代码诊所:Go语言 Lynda课程中文字幕
  4. 西门子标准报文1常用_西门子V90 PN伺服与PLC通信连接
  5. 工业RFID读写器|读卡器在装配线自动化改造升级中的应用与优势
  6. 在微信小程序中编写金额摇奖效果
  7. cuda-z/gpu-z/cpu-z工具分析GPU显卡和CPU算力信息
  8. CTFSHOW-misc
  9. Echarts图形化报表工具
  10. LTE概念搅动4G热潮