1，生成地图
2，如果需要产生地图上的点位，需要在配置中传入geoCoord具体数据为一下：
"海门": [121.15, 31.89],
"鄂尔多斯": [109..608266],
"招远": [120.38, 37.35],
"舟山": [122..985295],
"齐齐哈尔": [123.97, 47.33],
"盐城": [120.13, 33.38],
"赤峰": [118.87, 42.28],
"青岛": [120.33, 36.07],
"乳山": [121.52, 36.89],
"金昌": [102..520089],
"泉州": [118.58, 24.93],
"莱西": [120.53, 36.86],
"日照": [119.46, 35.42],
"胶南": [119.97, 35.88],
"南通": [121.05, 32.08],
"拉萨": [91.11, 29.97],
"云浮": [112.02, 22.93],
"梅州": [116.1, 24.55],
"文登": [122.05, 37.2],
"上海": [121.48, 31.22],
"攀枝花": [101..582347],
"威海": [122.1, 37.5],
"承德": [117.93, 40.97],
"厦门": [118.1, 24.46],
"汕尾": [115..786211],
"潮州": [116.63, 23.68],
"丹东": [124.37, 40.13],
"太仓": [121.1, 31.45],
"曲靖": [103.79, 25.51],
"烟台": [121.39, 37.52],
"福州": [119.3, 26.08],
"瓦房店": [121..627114],
"即墨": [120.45, 36.38],
"抚顺": [123.97, 41.97],
"玉溪": [102.52, 24.35],
"张家口": [114.87, 40.82],
"阳泉": [113.57, 37.85],
"莱州": [119..177017],
"湖州": [120.1, 30.86],
"汕头": [116.69, 23.39],
"昆山": [120.95, 31.39],
"宁波": [121.56, 29.86],
"湛江": [110..270708],
"揭阳": [116.35, 23.55],
"荣成": [122.41, 37.16],
"连云港": [119.16, 34.59],
"葫芦岛": [120..711052],
"常熟": [120.74, 31.64],
"东莞": [113.75, 23.04],
"河源": [114.68, 23.73],
"淮安": [119.15, 33.5],
"泰州": [119.9, 32.49],
"南宁": [108.33, 22.84],
"营口": [122.18, 40.65],
"惠州": [114.4, 23.09],
"江阴": [120.26, 31.91],
"蓬莱": [120.75, 37.8],
"韶关": [113.62, 24.84],
"嘉峪关": [98..77313],
"广州": [113.23, 23.16],
"延安": [109.47, 36.6],
"太原": [112.53, 37.87],
"清远": [113.01, 23.7],
"中山": [113.38, 22.52],
"昆明": [102.73, 25.04],
"寿光": [118.73, 36.86],
"盘锦": [122..119997],
"长治": [113.08, 36.18],
"深圳": [114.07, 22.62],
"珠海": [113.52, 22.3],
"宿迁": [118.3, 33.96],
"咸阳": [108.72, 34.36],
"铜川": [109.11, 35.09],
"平度": [119.97, 36.77],
"佛山": [113.11, 23.05],
"海口": [110.35, 20.02],
"江门": [113.06, 22.61],
"章丘": [117.53, 36.72],
"肇庆": [112.44, 23.05],
"大连": [121.62, 38.92],
"临汾": [111.5, 36.08],
"吴江": [120.63, 31.16],
"石嘴山": [106.39, 39.04],
"沈阳": [123.38, 41.8],
"苏州": [120.62, 31.32],
"茂名": [110.88, 21.68],
"嘉兴": [120.76, 30.77],
"长春": [125.35, 43.88],
"胶州": [120.0622],
"银川": [106.27, 38.47],
"张家港": [120..875428],
"三门峡": [111.19, 34.76],
"锦州": [121.15, 41.13],
"南昌": [115.89, 28.68],
"柳州": [109.4, 24.33],
"三亚": [109..252847],
"自贡": [104..33903],
"吉林": [126.57, 43.87],
"阳江": [111.95, 21.85],
"泸州": [105.39, 28.91],
"西宁": [101.74, 36.56],
"宜宾": [104.56, 29.77],
"呼和浩特": [111.65, 40.82],
"成都": [104.06, 30.67],
"大同": [113.3, 40.12],
"镇江": [119.44, 32.2],
"桂林": [110.28, 25.29],
"张家界": [110..117096],
"宜兴": [119.82, 31.36],
"北海": [109.12, 21.49],
"西安": [108.95, 34.27],
"金坛": [119.56, 31.74],
"东营": [118.49, 37.46],
"牡丹江": [129.58, 44.6],
"遵义": [106.9, 27.7],
"绍兴": [120.58, 30.01],
"扬州": [119.42, 32.39],
"常州": [119.95, 31.79],
"潍坊": [119.1, 36.62],
"重庆": [106.54, 29.59],
"台州": [121..656386],
"南京": [118.78, 32.04],
"滨州": [118.03, 37.36],
"贵阳": [106.71, 26.57],
"无锡": [120.29, 31.59],
"本溪": [123.73, 41.3],
"克拉玛依": [84.77, 45.59],
"渭南": [109.5, 34.52],
"马鞍山": [118.48, 31.56],
"宝鸡": [107.15, 34.38],
"焦作": [113.21, 35.24],
"句容": [119.16, 31.95],
"北京": [116.46, 39.92],
"徐州": [117.2, 34.26],
"衡水": [115.72, 37.72],
"包头": [110, 40.58],
"绵阳": [104.73, 31.48],
"乌鲁木齐": [87.68, 43.77],
"枣庄": [117.57, 34.86],
"杭州": [120.19, 30.26],
"淄博": [118.05, 36.78],
"鞍山": [122.85, 41.12],
"溧阳": [119.48, 31.43],
"库尔勒": [86.06, 41.68],
"安阳": [114.35, 36.1],
"开封": [114.35, 34.79],
"济南": [117, 36.65],
"德阳": [104.37, 31.13],
"温州": [120.65, 28.01],
"九江": [115.97, 29.71],
"邯郸": [114.47, 36.6],
"临安": [119.72, 30.23],
"兰州": [103.73, 36.03],
"沧州": [116.83, 38.33],
"临沂": [118.35, 35.05],
"南充": [106..837793],
"天津": [117.2, 39.13],
"富阳": [119.95, 30.07],
"泰安": [117.13, 36.18],
"诸暨": [120.23, 29.71],
"郑州": [113.65, 34.76],
"哈尔滨": [126.63, 45.75],
"聊城": [115.97, 36.45],
"芜湖": [118.38, 31.33],
"唐山": [118.02, 39.63],
"平顶山": [113.29, 33.75],
"邢台": [114.48, 37.05],
"德州": [116.29, 37.45],
"济宁": [116.59, 35.38],
"荆州": [112..335165],
"宜昌": [111.3, 30.7],
"义乌": [120.06, 29.32],
"丽水": [119.92, 28.45],
"洛阳": [112.44, 34.7],
"秦皇岛": [119.57, 39.95],
"株洲": [113.16, 27.83],
"石家庄": [114.48, 38.03],
"莱芜": [117.67, 36.19],
"常德": [111.69, 29.05],
"保定": [115.48, 38.85],
"湘潭": [112.91, 27.87],
"金华": [119.64, 29.12],
"岳阳": [113.09, 29.37],
"长沙": [113, 28.21],
"衢州": [118.88, 28.97],
"廊坊": [116.7, 39.53],
"菏泽": [115..23375],
"合肥": [117.27, 31.86],
"武汉": [114.31, 30.52],
"大庆": [125.03, 46.58]}我们要说明的问题：1，当这个geoCoord被传入一次之后，echarts会记录这次传入，初始化另外一个图的时候不需要再传入，可以直接使用markpiont做点
阅读(...) 评论()插件～使用ECharts动态在地图上标识点~动态添加和删除标识点 - 推酷
插件～使用ECharts动态在地图上标识点~动态添加和删除标识点
之前写过一个Echarts的文章，没有基础的同学可以先看这＜上一篇＞，对于一个地图和说，我们在初始化之后，你可能被在地图上标识出一些点，当然这根据你的业务去标识，而如果每次更新数据都加载全部的标识点，这对于性能是有影响的，也是没有必要的，所以我就找了一种动态添加和删除点的方法，即addMarkPoint和delMarkPoint，需要注意的是，如果标识后添加或者删除之后，我们必须要刷新地图，这样你做的操作才可以第一时间响应到地图上来．
　　　 //周期调用刷新数据
setInterval(function () {
console.log(&going&);
//在线，添加点
myChart.addMarkPoint(2, {
data: [{ name: &北京& }]
//离线，添加点
myChart.addMarkPoint(1, {
data: [{ name: &天津& }]
myChart.delMarkPoint(2, &北京&);
myChart.refresh();//实时更新到地图
从图中我们看到，添加标识后＂北京＂之后又删除了＂北京＂，所以在地图上只把＂天津＂显示出来了．
对于一个框架的研究我们需要有耐心．
对于一个框架的猜测，我们要敢去想，多去尝试！
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致ECharts · BMap
BMapExt是在Echarts基础上使用百度地图API进行地图绘制，使用的时候除了需要Echarts的相关知识外，还需要对百度地图API()有所了解
{HTMLElement} getEchartsContainer
获取扩展为Echarts生成的容器
{BMap.Map}
获取扩展使用的百度地图实例
{ECharts} initECharts
参数同Echarts实例的init
初始化echarts实例，参数完全使用， 返回扩展使用的Echarts实例
{ECharts} getECharts
获取扩展使用的Echarts实例
参数同Echarts实例的setOption
此方法会讲option中的series中的markPoint、markLine的坐标重新计算为与百度地图匹配的坐标，
{Array.&number&} getMapOffset
获取扩展当前的地图偏移量
{Array.&number&} geoCoord2Pixel
{Array.&number&} geoCoord
经纬度坐标转换为像素坐标
{Array.&number&} pixel2GeoCoord
{Array.&number&} pixel
像素坐标转换成经纬度坐标
1、引用Echarts、扩展、百度地图API
2、实例化扩展，传人容器、百度地图API的变量、echarts
3、获取扩展中使用的百度地图实例，进行地图操作
4、获取扩展生成Echarts容器
5、使用扩展初始化Echarts（initECharts），操作（setOption）
// 在这之前必须加装ECharts、百度地图API文件、引用扩展文件
var myBMapExt = new BMapExt($('#main')[0], BMap, echarts);
// 获取地图实例
var map = myBMapExt.getMap();
// 以下是地图的操作，详细api请前往百度地图API官网
var startPoint = {
x: 104.114129,
y: 37.550339
var point = new BMap.Point(startPoint.x, startPoint.y);
map.centerAndZoom(point, 5);
map.enableScrollWheelZoom(true);
// 配置option
var option = {...}
// 获取echarts的dom容器
var container = BMapExt.getEchartsContainer();
// 通过initEcharts初始化echarts并获取实例
var myChart = BMapExt.initECharts(container);
// 设置option
BMapExt.setOption(option);3462人阅读
java（12）
&&&&&&& Echarts是一款开源、功能强大的数据可视化产品。之前做图表一直都是使用Highcharts来做的，Echarts与Highcharts大致用法差不多，最近用到了Echarts的地图功能，把官网上的两个例子整合了一下终于达到了要求。贴出来跟大家分享一下。另附上新疆各市县经纬度js文件一份(xjGeoCoord.js)
先来晒一个效果图吧
下面就来看一下代码如果实现
一、引用的css与js
&link rel=&shortcut icon& href=&asset/ico/favicon.png&&
&link href=&asset/css/font-awesome.min.css& rel=&stylesheet&&
&link href=&asset/css/bootstrap.css& rel=&stylesheet&&
&link href=&asset/css/carousel.css& rel=&stylesheet&&
&link href=&asset/css/echartsHome.css& rel=&stylesheet&&
&link href=&asset/css/codemirror.css& rel=&stylesheet&&
&link href=&asset/css/monokai.css& rel=&stylesheet&&
&script src=&asset/js/jquery.min.js&&&/script&
&script src=&asset/js/echartsHome.js& type=&text/javascript&&&/script&
&script src=&asset/js/bootstrap.min.js&&&/script&
&script src=&asset/js/codemirror.js&&&/script&
&script src=&asset/js/javascript.js&&&/script&
&script src=&asset/js/echartsConfig.js&&&/script&
&script src=&www/js/echarts.js&&&/script& &script src=&www/js/chart/geoCoord.js&&&/script&
二、html部分，用于地图展示和top5相关信息展示
&div class=&row-fluid& style=&height:600position:&&
&div id=&mapContainer&
style=&position: height: 100%; width: 90%; background-color: cursor:text-align:left&&
 无相关数据
&div id=&pieChart& style=&position:z-index:1;height:100%;padding-right:0.5width:30%;float:right&&
&ol class=&rectangle-list&&
克拉玛依:1.1.1.1(626)
乌鲁木齐:22.2.2.2(855)
库尔勒:3.3.3.3(755)
天山:4.4.4.4(755)
三、自己写的css与js部分及功能注释&style type=&text/css&&
counter-reset:
list-style:
*list-style:
font: 15px 'trebuchet MS', 'lucida sans';
padding: 0;
margin-bottom: 4
text-shadow: 0 1px 0 rgba(255,255,255,.5);
margin: 0 0 0 2
.rectangle-list div{
padding: .4em .4em .4em .8
*padding: .4
margin: .5em 0 .5em 2.5
background: #F0F0F0;
color: #444;
text-decoration:
-webkit-transition: all .3s ease-
-moz-transition: all .3s ease-
-ms-transition: all .3s ease-
-o-transition: all .3s ease-
transition: all .3s ease-
.rectangle-list div:hover{
background: #
.rectangle-list div:before{
content: counter(li);
counter-increment:
left: -2.5
margin-top: -1
background: #FE0902; --序号背景色
line-height: 2
text-align:
font-weight:
.rectangle-list div:after{
content: '';
border: .5
margin-top: -.5
-webkit-transition: all .3s ease-
-moz-transition: all .3s ease-
-ms-transition: all .3s ease-
-o-transition: all .3s ease-
transition: all .3s ease-
.rectangle-list div:hover:after{
border-left-color: #FE0902;
&script type=&text/javascript&&
var maxRange = 1000;
$(function(){
option = {
text: '新疆',
x:'center'
tooltip : {
trigger: 'item',
formatter:function(param){//提示信息格式化
return &&b&&+param.data.name+&&/b&&br/&数量：&+param.data.
orient: 'vertical',//图例位置
x:'left',
data:['']//图例文本信息
dataRange: {
min : 0,//值域控件最小值
max : maxRange,//值域控件最大值
calculable : true,//默认为false,设置为true时值域显示为线性渐变
precision:0,//小数精度，默认为0
color: ['red', 'orange', 'yellow','#FFFCEC']//值域颜色，最少两个
toolbox: {//图表工具
show : true, //是否展示
//布局方式，默认为水平布局，水平(vertical)|垂直(horizontal)
orient : 'horizontal',
//横向位置，可选为：'center' | 'left' | 'right' | {number}(x坐标，单位px)
x: 'left',
//纵向位置可选为：'top' | 'bottom' | 'center' | {number}(y坐标，单位px)
y: 'top',
feature : {
mark : {show: true}, //辅助线
dataView : {show: false, readOnly: false}, //数据视图
restore : {show: true}, //还原
saveAsImage : {show: true} //保存为图片
series : [
name: 'pm2.5',
type: 'map',
mapType: '新疆', //地图类型 china:中国；continent:世界
hoverable: true, //鼠标经过时，是否高亮显示
roam:true,
data : [ //区域编码是乱写的^_^,为了演示除name和value之外的属性如何取值;
{name: '巴音郭楞蒙古自治州',value: 623,areaCode:11111},
//{name: '和田地区',value: 425,areaCode:11112},
{name: '哈密地区',value: 78,areaCode:11113},
{name: '阿克苏地区',value: 384,areaCode:11114},
{name: '阿勒泰地区',value:342,areaCode:11115},
{name: '喀什地区',value: 109,areaCode:11116},
//{name: '塔城地区',value: 526,areaCode:11117},
{name: '昌吉回族自治州',value: 271,areaCode:11118},
{name: '克孜勒苏柯尔克孜自治州',value: 98,areaCode:11119},
{name: '吐鲁番地区',value:120,areaCode:11110},
//{name: '伊犁哈萨克自治州',value: 451,areaCode:11120},
{name: '博尔塔拉蒙古自治州',value: 239,areaCode:11121},
{name: '乌鲁木齐市',value: 740,areaCode:11122},
{name: '克拉玛依市',value: 122,areaCode:11123},
//{name: '阿拉尔市',value: 432,areaCode:11124},
{name: '图木舒克市',value: 170,areaCode:11125},
//{name: '五家渠市',value: 250,areaCode:11126},
//{name: '石河子市',value:193,areaCode:11127},
{name: '那曲地区',value:127,areaCode:11128}
itemStyle:{
borderColor:'#A1DFF2', //地图边界线颜色
borderWidth:1, //边界线宽度
areaStyle:{
color:'white'
geoCoord: geoCoord //地区经纬度
{//坐标标注
type: 'map',
mapType: '新疆',
data : [],
markPoint : {
// 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
symbolSize: 5,
itemStyle: {
normal: { //地图内图形的默认样式和强调样式（悬浮时样式）
borderColor: 'orange',
borderWidth: 1,
// 标注边线线宽，单位px，默认为1
show: false
emphasis: { //地图内图形的强调样式（悬浮时样式）
borderColor: '#1e90ff',
borderWidth: 5,
show: false
{name: &克拉玛依&, value: 626,ipAddress:'1.1.1.1'},
{name: &乌鲁木齐&, value: 855,ipAddress:'22.2.2.2'},
{name: &库尔勒&, value: 755,ipAddress:'3.3.3.3'},
{name: &天山&, value: 755,ipAddress:'4.4.4.4'}
{//向外发散光圈
name: 'Top5',
type: 'map',
mapType: '新疆',
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
//光圈大小,v代表节点的value值,可改为return 10+v*10/maxR
return 10+v/100
effect : {
show: true,
shadowBlur : 0
itemStyle:{
label:{show:false }
tooltip:{//注：此处的tooltip必须放在data参数上面，才能生效
formatter:function (param){
return &&b&&+param.data.name+&&/b&&br/&IP地址：&+param.data.ipAddress+&(&+param.data.value+&)&;
{name: &克拉玛依&, value: 626,ipAddress:'1.1.1.1'},
{name: &乌鲁木齐&, value: 855,ipAddress:'22.2.2.2'},
{name: &库尔勒&, value: 755,ipAddress:'3.3.3.3'},
{name: &天山&, value: 755,ipAddress:'4.4.4.4'}
require.config({
echarts: 'www/js'
'echarts',
'echarts/chart/map'
DrawEChart
//回调函数 渲染ECharts图表
function DrawEChart(ec) {
var chartContainer = document.getElementById(&mapContainer&);
//加载图表
var myChart = ec.init(chartContainer);
myChart.on(echartsConfig.EVENT.CLICK,echartsClick);//设置单击事件
myChart.setOption(option);
function echartsClick(param){
if(param.data.areaCode!=undefined){
alert(param.data.name+&:&+param.data.areaCode);
四、实例下载地址：
五、在为Echarts设置主题时需要注意，只有内置主题（'macarons', 'infographic'）可以直接传入名称，其他的主题需要把主题包中对应的js文件开头和结尾有关封装的部分去掉，再使用setTheme(Object)方法来设置主题。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：100787次
积分：1007
积分：1007
排名：千里之外
原创：18篇
转载：41篇
评论：25条
(2)(2)(1)(1)(2)(1)(1)(3)(4)(3)(2)(2)(1)(3)(1)(1)(1)(3)(1)(1)(5)(8)(3)(1)(6)