达到的效果:

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

echarts 中国地图标注所在点的更多相关文章

  1. echarts中国地图散点涟漪效果

    echarts中国地图例子:http://gallery.echartsjs.com/editor.html?c=effectScatter-map 代码: var data = [{ name: ' ...

  2. echarts中国地图

    echarts中国地图效果图: =================== 需要引入echarts的js文件:(1.echarts.min.js:2.china.js) 下载地址: echarts.min ...

  3. echarts 中国地图 数据自动提示

    mounted() { // 首先每种图是根据series -->type决定的 eg:bar--柱状图 line 折线图 pie饼图 map地图等等三部曲 跟着走 // @第一步都是初始化 v ...

  4. 一个让echarts中国地图包含省市轮廓的技巧

    背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...

  5. Echarts 中国地图(包括china.js文件)

    用Echarts写中国地图需要导入china.js(现在官方不提供下载,个人找的在最下面有),根据需要的效果如下.位置可以自己在option里面修改 <!DOCTYPE html> < ...

  6. 使用echarts简单制作中国地图,echarts中国地图

    网站需要一张中国地图,并且鼠标经过某个省份,该省份的省份名字显示,而且该省份的地区会变色显示. 第一种方法: 将每个省份的图片定位(先隐藏),拼合成一张中国地图,然后再定位省份名称,鼠标经过省份名字, ...

  7. 百度Echarts中国地图经纬度

    百度显示中国地图的地址 https://www.makeapie.com/explore.html#sort=rank~timeframe=all~author=all%3Ftdsourcetag v ...

  8. echarts中国地图3D各个城市标点demo

    <!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta ...

  9. php数据映射到echarts中国地图

    echarts和php结合 根据php后台数据,映射到地图上所有的省份,地图市下钻的形式,每次下钻到新地图不合并(合并缩放的话会导致下钻地图位置找不到了),添加了自定义工具栏里面的返回到顶级下钻地图 ...

随机推荐

  1. PAT 1061 - 1064 题解

    这四道题来自 13 年 08 月 30 的 PAT 测试. 代码量不大,思路也比较直接.不过第一题的处理逻辑不太清晰,需要好好把握.稍有不慎就掉进坑里了(很多人被这道 20'的题坑了一个多小时心慌意乱 ...

  2. gdal的矢量栅格化接口GDALRasterizeLayers使用(一)

    作者:朱金灿 来源:http://blog.csdn.net/clever101 gdal库提供了一个矢量栅格化接口函数GDALRasterizeLayers.今天让我们学习一下这个接口函数的使用.该 ...

  3. markdownpad 2 的使用

    1. 注册 邮箱:Soar360@live.com 授权秘钥: GBPduHjWfJU1mZqcPM3BikjYKF6xKhlKIys3i1MU2eJHqWGImDHzWdD6xhMNLGVpbP2M ...

  4. Gamma 函数及其应用

    1. Γ(⋅) 函数定义 Γ(α)=∫∞0tα−1e−tdt 可知以下基本性质: Γ(α+1)=αΓ(α)(分部积分法) Γ(1)=1 ⇒ Γ(n+1)=n! Γ(12)=π√ 2. 常见变形 对于 ...

  5. JieBaNet+Lucene.Net

    基于JieBaNet+Lucene.Net实现全文搜索   实现效果: 上一篇文章有附全文搜索结果的设计图,下面截一张开发完成上线后的实图: 基本风格是模仿的百度搜索结果,绿色的分页略显小清新. 目前 ...

  6. java 压缩以及解压文件,有tar,zip,gz(gizp)和解压

    package com.yabsz.decompCompr; import java.io.File; import java.util.ArrayList; import java.util.Lis ...

  7. SqlBulkCopy快速插入datatable到数据库中参考代码,以及要注意的问题

    参考代码如下: public class Examination { #region 批量插入一个sheet的专业对应的学科 /// <summary> /// 批量插入一个sheet的专 ...

  8. 简明Python3教程 18.下一步是什么

    如果你有认真通读本书之前的内容并且实践其中包含的大量例程,那么你现在一定可以熟练使用python了. 同时你可能也编写了一些程序用于验证python特性并提高你的python技能.如果还没有这样做的话 ...

  9. OpenCV 图像白平衡算法(相机自动白平衡)

    彩色相机内部有三个CCD电子耦合元件,分别用来感受红绿蓝三中颜色的光线,默认情况下,三个颜色的感光电路信号的放大比例是1:1:1的.在理想的拍摄环境下,纯白色的RGB分量按照1:1:1的比例放大之后, ...

  10. modern-cpp-features

    C++17/14/11 Overview Many of these descriptions and examples come from various resources (see Acknow ...