2D地图图表效果如下:
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2D地图示例</title>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/echarts4.0.js"></script>
</head>
<body>
<!-- 2D地图容器 -->
<div id="main" style="width: 100%; height: 800px;"></div>
<script>
// 初始化图表
var myChart = echarts.init(document.getElementById('main'));
// JSON文件(地图数据)路径
var uploadedDataURL = "json/440500(广东汕头市).json";
// 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。
myChart.showLoading();
//引入json格式地图数据
$.get(uploadedDataURL, function(geoJson) {
echarts.registerMap('tongren', geoJson);
// 隐藏动画加载效果。
myChart.hideLoading();
option = {
backgroundColor: '#fff', // 画布背景颜色
title : { // 标题
top : '5%',
text : '汕头市2D地图',
subtext : '',
x : '10%',
textStyle : {
fontSize: 20,
color : '#000'
}
},
tooltip : { // 提示框
trigger : 'item',
formatter : function(params) {
return params.name;
}
},
geo: {
//show: true, // 是否显示地理坐标系组件,[ default: true ]
map: 'tongren', // 地图类型,[ default: '' ]。ECharts 中提供了两种格式的地图数据:一种js地图数据文件,另一种是JSON格式的地图数据文件.
roam: true, // 是否开启 鼠标缩放 和 平移漫游。默认不开启(false)。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
//silent: false, // 图形是否 不响应 和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
//center: [0.00, 0.00], // 当前视角的中心点，用经纬度表示 (Array)
//aspectScale: 0.75, // scale 地图的长宽比(number),[ default: 0.75 ] 最终的 aspect 的计算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale
//zoom: 1, // 当前视角的缩放比例(number),[ default: 1 ]
scaleLimit: { // (Object)滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1。
min: 0.3,
max: 3,
},
nameMap: { // 自定义地区的名称映射，如下:
//'China' : '中国',
},
selectedMode: 'single', // 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。
label: { // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle下，在 ECharts 3 中为了让整个配置项结构更扁平合理，label 被拿出来跟 itemStyle 平级，并且跟 itemStyle 一样拥有 emphasis 状态。
normal: { //普通状态
show: true, // 是否显示标签。[ default: false ]
position: 'inside', // 标签的位置(string, Array)。[x, y] 通过相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 示例：// 绝对的像素值 position: [10, 10], // 相对的百分比 position: ['50%', '50%']
// http://www.echartsjs.com/gallery/view.html?c=doc-example/label-position
//distance: 5, // 距离图形元素的距离,[ default: 5 ]。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
//rotate: 0, // 标签旋转(number)。从 -90 度到 90 度。正值是逆时针。
//offset: [50,60], // (Array)是否对文字进行偏移。默认不偏移。例如：[30, 40] 表示文字在横向上偏移 30，纵向上偏移 40。
color: "#000", // 文字的颜色,[ default: "#fff" ]。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。
//fontStyle: 'normal', // 文字字体的风格[ default: 'normal' ], normal, italic, oblique
//fontWeight: 'normal', // 文字字体的粗细[ default: normal ], normal,bold,bolder,lighter,100 | 200 | 300 | 400...
fontFamily: 'sans-serif', // 文字的字体系列[ default: 'sans-serif' ],还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize: 12, // 文字的字体大小,[ default: 12 ]
},
emphasis: { //强调状态(鼠标移上去的效果)
color: "#000",
fontWeight: 'bold',
fontSize: 18,
}
},
itemStyle: { // 地图区域的多边形 图形样式。
//color: '#000', // 图形的颜色。[ default: 自适应 ]
normal: {
areaColor: 'rgba(87,241,242,0.5)', // 地图区域的颜色。[ default: '#eee' ]
borderColor: '#000', // 图形的描边颜色。支持的颜色格式同 color，不支持回调函数。 rgba(147, 235, 248, 1)
borderWidth: 0.2, // 描边线宽。为 0 时无描边。[ default: 0 ]
//borderType: 'solid', // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
//opacity: 0.8, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
//shadowBlur: 20, // 图形阴影的模糊大小(number)。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
//shadowColor: '#000', // 阴影颜色。支持的格式同color。
//shadowOffsetX: 100, // 阴影水平方向上的偏移距离。[ default: 0 ]
//shadowOffsetY: 10, // 阴影垂直方向上的偏移距离。[ default: 0 ]
},
emphasis: {
areaColor: 'blue',
borderColor: '#fff',
borderWidth: 1,
}
},
//zlevel: 0, // 所有图形的 zlevel 值[ default: 0 ]。
//z: 2, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低，而且不会创建新的 Canvas。
//left: 'center', // 组件离容器左侧的距离[ default: 'auto' ]。left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
//top: 'middle', // 组件离容器上侧的距离[ default: 'auto' ]。top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
//right: 'auto', // 组件离容器右侧的距离[ default: 'auto' ]。right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
//bottom: 'auto', // 组件离容器下侧的距离[ default: 'auto' ]。bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。默认自适应。
/** layoutCenter,layoutSize 两个配置项不常用,暂时忽略 */
/* ----------------------- 重点 start-------------------------- */
regions: [{ // 在地图中对特定的区域配置样式。注: geo 区域的颜色也可以被 map series 所控制，参见 series-map.geoIndex。
name: '潮南区', // 地图区域的名称
selected: false, // 该区域是否选中[ default: false ]。
itemStyle: { // 该区域的多边形样式设置
areaColor: 'red',
color: 'red',
},
label: {}, // 图形上的文本标签
}, {
name: '金平区',
selected: false,
itemStyle: {
areaColor: 'yellow',
},
}],
/* ----------------------- 重点 end-------------------------- */
},
series: [{
type: 'map', // 类型:地图
//map: 'tongren', // 地图类型。
name: '汕头市', // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
geoIndex: 0, // [ default: null ]默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
data: [
{name: '南澳县'},
{name: '濠江区'},
{name: '金平区'},
{name: '龙湖区'},
{name: '澄海区'},
{name: '潮阳区'},
{name: '潮南区'},
]
}]
};
// 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。
myChart.setOption(option);
});
// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
var subSystem = params.name;
var url = 'https://www.baidu.com/s?ie=UTF-8&wd=';
// 根据点击地图区域的名称,跳转到对应页面
window.open(url.concat(subSystem));
});
</script>
</body>
</html>
echarts.js 下载链接: http://echarts.baidu.com/download.html
至于地图数据文件可根据需要自行百度，只是练习的话可参考：https://blog.csdn.net/gray_key/article/details/80197527
扫一扫
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
