埃查尔兹是一个使用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地图的更多详细信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
