本站所有转载资源全部来源于本站会员，仅供下载学习与参考，请勿用于商业用途，下载学习试用后请于24小时内删除，如有条件请支持正版，如有侵权请联系删除，谢谢。
资源介绍
一、通用组件使用方式
1. 引入依赖
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>地图-平面图地图3D效果</title> </head> <body> <div id="chart" style="width: 100%;height:100%;"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js"></script> <script src="http://39.101.138.43:8090/wp-content/themes/wpzt-hot/echarts/map/js/china.js"></script> </body> </html>
2. 绘制图表
var myChart = echarts.init(document.getElementById('chart'));
var option;
option = {
title: {
top: 10,
text: '平面图地图3D效果，整体地图渐变色，并且两层同步拖拽',
left: 'center',
textStyle: {
color: '#fff'
}
},
backgroundColor: 'rgba(0, 10, 52, 1)',
geo: {
map: 'china',
aspectScale: 0.75,
layoutCenter: ["50%", "51.5%"], //地图位置
layoutSize: '118%',
roam: true,
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 0.5,
color: {
type: 'linear-gradient',
x: 0,
y: 1500,
x2: 2500,
y2: 0,
colorStops: [{
offset: 0,
color: '#009DA1' // 0% 处的颜色
}, {
offset: 1,
color: '#005B9E' // 50% 处的颜色
}],
global: true // 缺省为 false
},
opacity: 0.5,
},
emphasis: {
areaColor: '#2a333d'
}
},
regions: [{
name: '南海诸岛',
itemStyle: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
},
emphasis: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
}
}],
z: 2
},
series: [{
type: 'map',
map: 'china',
tooltip: {
show: false
},
label: {
show: true,
color: '#FFFFFF',
fontSize: 16
},
aspectScale: 0.75,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '118%',
roam: true,
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 0.6)',
borderWidth: 0.8,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1200,
x2: 1000,
y2: 0,
colorStops: [{
offset: 0,
color: '#009DA1' // 0% 处的颜色
}, {
offset: 1,
color: '#005B9E' // 50% 处的颜色
}],
global: true // 缺省为 false
},
},
emphasis: {
areaColor: 'rgba(147, 235, 248, 0)'
}
},
zlevel: 1
}]
};
//echarts 设置地图外边框以及多个geo实现缩放拖曳同步
myChart.on('georoam', function(params) {
var option = myChart.getOption(); //获得option对象
if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
} else { //捕捉到拖曳时
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
}
myChart.setOption(option); //设置option
});
myChart.setOption(option);
3. 生成的Option配置
{
"title": {
"top": 10,
"text": "平面图地图3D效果，整体地图渐变色，并且两层同步拖拽",
"left": "center",
"textStyle": {
"color": "#fff"
}
},
"backgroundColor": "rgba(0, 10, 52, 1)",
"geo": {
"map": "china",
"aspectScale": 0.75,
"layoutCenter": ["50%", "51.5%"],
"layoutSize": "118%",
"roam": true,
"itemStyle": {
"normal": {
"borderColor": "rgba(147, 235, 248, 1)",
"borderWidth": 0.5,
"color": {
"type": "linear-gradient",
"x": 0,
"y": 1500,
"x2": 2500,
"y2": 0,
"colorStops": [{
"offset": 0,
"color": "#009DA1"
}, {
"offset": 1,
"color": "#005B9E"
}],
"global": true
},
"opacity": 0.5
},
"emphasis": {
"areaColor": "#2a333d"
}
},
"regions": [{
"name": "南海诸岛",
"itemStyle": {
"areaColor": "rgba(0, 10, 52, 1)",
"borderColor": "rgba(0, 10, 52, 1)"
},
"emphasis": {
"areaColor": "rgba(0, 10, 52, 1)",
"borderColor": "rgba(0, 10, 52, 1)"
}
}],
"z": 2
},
"series": [{
"type": "map",
"map": "china",
"tooltip": {
"show": false
},
"label": {
"show": true,
"color": "#FFFFFF",
"fontSize": 16
},
"aspectScale": 0.75,
"layoutCenter": ["50%", "50%"],
"layoutSize": "118%",
"roam": true,
"itemStyle": {
"normal": {
"borderColor": "rgba(147, 235, 248, 0.6)",
"borderWidth": 0.8,
"areaColor": {
"type": "linear-gradient",
"x": 0,
"y": 1200,
"x2": 1000,
"y2": 0,
"colorStops": [{
"offset": 0,
"color": "#009DA1"
}, {
"offset": 1,
"color": "#005B9E"
}],
"global": true
}
},
"emphasis": {
"areaColor": "rgba(147, 235, 248, 0)"
}
},
"zlevel": 1
}]
}
END
上一篇 地图-模拟3D效果-自动轮询提示
下一篇 地图-伪3D世界地图+散点图
