埃查尔兹是一个使用Java脚本语言实现的开源可视化库，涵盖各行业图表，满足各种需求，下面这篇文章主要给大家介绍了关于埃查尔兹地图的相关资料，包括地图样式、合并地图、增加地图，需要的朋友可以参考下
目录
概述地图实现提出问题自定义地图总结
概述
地图在我们日常的数据可视化分析中是很常见的一种展示手段，不仅美观而且很大气。尤其是在大屏展示中更是扮演着必不可缺的角色。
地图实现
下面我们就来实现一个基本的地图，并为之添加一些好看的样式。
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题地图/标题
script src=' js/echarts。js '/脚本
脚本src=' js/jquery-2。1 .1 .量滴js '/脚本
/头
身体
div id=' map ' style=' width:1000 px；高度：800像素'/格
脚本类型='文本/javascript '
var dt=[
{姓名：'芙蓉区，值：40000.34,文本：'贷款笔数：54412br/贷款金额：468452.35万，选择：真},
{姓名：'岳麓区，值：38000,文本：'缴存人数：32412'},
{姓名：'开福区，值：18000,文本：'缴存人数：22412'},
{姓名：'天心区，值：15092,文本：'缴存人数：42412'},
{姓名：'雨花区，值：28000,文本：'缴存人数：52412'},
{姓名：'望城区，值：12000,文本：'缴存人数：72412'},
{姓名：'长沙县，值：32000,文本：'缴存人数：82412'},
{姓名：'宁乡县，值：5100,文本：'缴存人数：6412'},
{姓名：'浏阳市，值：2200,文本：'缴存人数：3412'},
{姓名：'分中心，值：4918,文本：'缴存人数：66412'}
];
定义变量选项={
标题：{
'文本： '长沙市，
潜台词： '各区县，
x:"中心"
},
工具提示：{
触发器："项目",
类型：'十字，
/*背景颜色：" # ff7f 50 "，//提示标签背景颜色
textStyle:{color:'#fff'}，//提示标签字体颜色
格式化程序：函数（参数){
返回参数数据索引.name 'br /' dt[param.dataIndex].文本；
} */
alwayshowcontent:false，
边框半径：4，
borderWidth: 1，
borderColor: 'rgba(0，0，0，0.2)'，
背景色：' rgba(255，255，255，0.9)'，
填充：0,
//位置：'顶部，
textStyle: {
fontSize: 12，
颜色：' #333 '
},
格式化程序：函数（参数){
var color=' # FFB84D
var a=' div style=' background-color:' color '；填充：5px 10px文本对齐：居中；颜色：白色；字体大小：16px' dt[params.dataIndex].名称"/div "；
var num=数学。细胞(参数。数据。名字[1]).长度/10);
a=' div style=' padding:3px；'';
for(var I=0；i numi ) {
a=dt[params.dataIndex].文本”br”；
}
a='/div '；
返回a；
}
},
视觉图：{
最低：800,
最高：50000,
文本：['高','低'],
x:'左，
y:'中心，
实时：假，
可计算的：真，
范围：{
颜色：['亮天蓝色','黄色','橙色]
}
},
工具箱：{
秀：真的，
方向："垂直",
x:'右，
y:'中心，
边框颜色：' #FFF '，//工具箱边框颜色
borderWidth: 0，//工具箱边框线宽，单位px，默认为0(无边框)
填充：5,//工具箱内边距，单位px，默认各方向内边距为5,
节目标题：假的，
功能：{
saveAsImage: { show : true，
标题： '保存为图片，
类型：“jpeg”
},
还原：{show: true}，
}
},
系列：[{
名称：'长沙'，
类型：“地图”，
地图：' cs '，
//符号：'./images/shine.jpg '，
//symbolSize: 41
roam:没错，
标签:{
正常：{
显示：真实
},
重点：{
显示：真实
}
},
布局：['50% '，' 50%']，//属性定义地图在屏幕上的中心位置，一般结合layoutSize定义地图的大小。
//layoutSize: 11200，
项目样式：{
正常：{label:{show:true}}，
强调：{label:{show:true}}
},
数据：dt
}]
};
$.get('json/cs.json '，function (csJson) {
echarts.registerMap('cs '，csJson)；
var chart=echarts . init(document . getelementbyid(' map '))；
chart.setOption(选项)；
});
/脚本
/body
/html
示意图如下：
一个基本的地图就出来了。
提出问题
熟悉长沙的人都会知道，上图中多了一个区域“副中心”，但长沙的地图板块中并没有这个区域。那么我是怎么把它改成这样的呢？
其实这是一开始用户提出的一个需求，因为其中有一个副中心，但是长沙没有地图区域，所以最终决定增加一个湖南的缩略图样式的区域来代表这个副中心。
刚开始我也找了很多资料，但是没有找到合适的方式。然后我决定用两张地图来表示。然后我给用户看了样式，用户觉得很满意。但是在真实的开发过程中，我确实遇到了很多问题，数据不好展示和链接在一起。我花了很长时间才找到一个网站。
自定义地图
以下是该网站的使用方法：
打开网址，我们可以看到这个网站的样子。
网页左上角是菜单栏，我们需要编辑的json文件在打开选项中打开。
打开文件
编辑后，在第二个保存菜单中保存我们编辑的内容。
保存- GeoJSON
网页中间有一个区域是我们需要重点关注的绘图工具。
第一种是按点画图，所有的图都是线的形状。
二是polygon，可以快速绘制多边形区域或者更复杂的地图区域。
第三种是矩形，可以快速画出简单的矩形区域。
当我们在地图上添加一个新的区域时，我们必须给这个区域命名：
如图：点击这个新增加的区域，会出现这个区域的属性框。点击Add按钮，添加一个新的name属性值作为子中心。这样就完成了地图面积的增加。
上图左上角是我自己画的。长沙地图原来只有以下区域。
随着地图的增多，必然会有地图的合并。
以长沙为例，如果开福区和芙蓉区因行政区域划分合并为一个区，那么我们需要在地图上将这两个区合并。
首先删除这两个区：点击芙蓉区和开福区，删除。
删除后是这样的。
你可以在中间看到一个空白区域，然后用我们的点画工具在地图上画出空白区域。使用多边形绘制工具链接空白区域中的点。在绘制过程中，尽量使用鼠标滚轮放大地图，方便绘制，绘制更精确。最后，将其名称修改为合并后的名称。
最后，完成的绘图可以保存在本地。
地图上有这么多东西。如有疑问，欢迎留言讨论。
最后，发送地图的3D版本：
!文档类型html
html lang='en '
头
meta charset='UTF-8 '
标题标题/标题
脚本src='./js/echarts.js'/script
脚本src='./js/echarts-gl.js'/script
脚本src='./js/jquery-2 . 1 . 1 . min . js '/脚本
/头
身体
div id=' MP ' style=' height:700 px；宽度：100%;边距：0px填充：0px'/div
脚本
var dt=[
{姓名：'芙蓉区，值：1,高度：2.5},
{姓名：'岳麓区，值：2,高：3.5},
{姓名：'开福区，值：3,高：4.5},
{姓名：'天心区，值：4,高：1.5},
{姓名：'雨花区，值：5,高：5.5},
{姓名：'望城区，值：6,高：3.5},
{姓名：'长沙县，值：7,高：2.5},
{姓名：'宁乡县，值：8,高：4.5},
{姓名：'浏阳市，值：9,高：5.5}
];
定义变量选项={
//背景色：“# 333”，
geo3D:[{
秀：真的，
类型："地图",
地图：' cs '，
symbolSize: 1300，
//环境：新echarts。图形。线性梯度(0，0，0，1，[{
//offset: 0，color: '#00aaff' //天空颜色
//}, {
//offset: 0.7，color: '#998866' //地面颜色
//}, {
//offset: 1，color: '#998866' //地面颜色
//}]，false)，
环境：'./images/shine.jpg '，
接地面：{
秀：假的，
颜色：' #0080FF '
},
阴影："真实",
//backgroundColor:'红色，
项目样式：{
areaColor: '#fff '，
不透明度：1,
borderColor: 'rgba(100，149，237，1)'，
边框宽度：2
},
标签:{
秀：真的，
textStyle: {
颜色：' #ff0000 '
}
},
重点：{
标签:{
秀：真的，
距离：2
//格式化程序：" {b} "
},
项目样式：{
颜色：' #EF7E10 '，
不透明度：1
}
},
实例化：假，
宽度："100%",
高度："100%",
箱宽：160,
箱高：2,
地区：dt
}],
系列：[{
斜面光滑度：50,
类型：' bar3D '，
坐标系统：' geo3D '，
backgroundcolor:'blcak '，
数据：[{
名称：'芙蓉区，值：[112.988094,28.193106,2.5],项目样式：{
颜色：' #dd6b66 '
}},
{姓名：'岳麓区，值：[112.911591,28.213044,2.5],项目样式：{
颜色：' #759aa0 '
}},
{姓名：'开福区，值：[112.985525,28.201336,2.5],项目样式：{
颜色：' #e69d87 '
}},
{姓名：'天心区，值：[112.97307,28.192375,2.5],项目样式：{
颜色：' #8dc1a9 '
}},
{姓名：'雨花区，值：[113.016337,28.109937,2.5],项目样式：{
颜色：' #ea7e53 '
}},
{姓名：'望城区，值：[112.819549,28.347458,2.5],项目样式：{
颜色：' #eedd78 '
}},
{姓名：'长沙县，值：[113.080098,28.237888,2.5],项目样式：{
颜色：' #73a373 '
}},
{姓名：'宁乡县，值：[112.553182,28.253928,2.5],项目样式：{
颜色：' #73b9bc '
}},
{姓名：'浏阳市，值：[113.633301,28.141112,2.5],项目样式：{
颜色：' #7289ab '
}
}],
maxHeight: 20，
minHeight:0，
barSize: 4
}]
};
$.获取('./json/cs.json '，函数(chinaJson) {
echarts.registerMap('cs '，中国JSON)；
var图表=echarts。init(文档。getelementbyid(' MP ')；
chart.setOption(选项);
})
/脚本
/body
/html
效果图：
全国各省市地图json数据
总结
关于Echarts地图示例的详细说明，本文到此结束。有关Echarts地图的更多详细信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。