<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="echarts.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<div id="main" style="height: 900px;height: 600px;"></div>
<script>
$.get('china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson);
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
legend:{},
series: [{
type: 'map',
map: 'china',
roam:true,
center:[115.97,29.71],
boundingCoords: [//二维数组，定义定位的左上角以及右下角分别所对应的经纬度
// 定位左上角经纬度
[-180, 90],
// 定位右下角经纬度
[180, -90]
],
zoom:2,//当前视角的缩放比例
scaleLimit:{//滚轮缩放的极限控制，通过min, max最小和最大的缩放值，默认的缩放为1。
min:10,
max:100,
},
nameMap:{//自定义地区的名称映射 如：把江苏改为了中国
'江苏':'中国'
},
selectedMode:'multiple',//选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。
label:{//图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
emphasis:{
show:true,
//position:[10,10],
},
normal:{
show:false
}
},
itemStyle:{//地图区域的多边形 图形样式。
normal:{
areaColor:'red',//整体颜色
},
emphasis:{
areaColor:'blue'//点击区域的颜色
}
},
zlevel:0,//zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，
// Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁
// （例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的
// Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
// zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
z:2,//组件的所有图形的z值。控制图形的前后顺序。z值小的图形会
// 被z值大的图形覆盖。
// z相比zlevel优先级更低，而且不会创建新的 Canvas。+
left:'auto',
top:'auto',
right:'auto',
bottom:'auto',//组件距离容器上下左右的距离
layoutCenter:['30%','30%'],//layoutCenter 和 layoutSize 提供了
// 除了 left/right/top/bottom/width/height 之外的布局手段。
// 在使用 left/right/top/bottom/width/height 的时候，
// 可能很难在保持地图高宽比的情况下把地图放在某个盒形区域的
// 正中间，并且保证不超出盒形的范围。此时可以通过 layoutCenter
// 属性定义地图中心在屏幕中的位置，layoutSize 定义地图的大小。如下示例
layoutSize:100,
geoIndex:null,//默认情况下，map series 会自己生成内部专用的 geo 组件。
// 但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series
// （例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个
// map series 控制，从而用 visualMap 来更改。当设定了 geoIndex 后，
// series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，
// 而是采用 geo 中的相应属性。
mapValueCalculation:'sum',//多个拥有相同地图类型的系列会使用同一个地图展现，
// 如果多个系列都在同一个区域有值，ECharts 会对这些值统计得到一个数据。
// 这个配置项就是用于配置统计的方式，
// 目前有： 'sum' 取和。'average' 取平均值。'max' 取最大值。'min' 取最小值。
showLegendSymbol:true,//在图例相应区域显示图例的颜色标识（系列标识的小圆点），存在 legend 组件时生效。
data:[
{}
]
}]
});
});
</script>
</body>
</html>
3278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
