echarts全国地图、省市地图、放射状效果，涟漪效果，版块颜色效果
1.地图json数据可以选择阿里云下载
http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=32.基础用法只显示地图（3D效果的地图）
首先在页面中引入echarts.js,以及demo节点
var china = "./content/js/lib/china.json";
$.get(china, function (geoJson) {
var chart = echarts.init(document.getElementById('ChinaMap'));
echarts.registerMap('中国', geoJson);
var option = {
geo: [
//地图背景
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 65,
bottom: 1,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 62,
bottom: 4,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 59,
bottom: 7,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 56,
bottom: 10,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 53,
bottom: 13,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
//地图坐标,本层为最上层，上面是为了营造立体效果，可以删除上面的就是2d效果
{
map: '中国',
label: {
show: false, //是否显示版块标题
textStyle: {
color: '#5FB5FF',
fontSize: 12
}
},
roam: false, // 是否开启滚轮缩放和拖拽漫游,默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
top: 50,
bottom: 16,
itemStyle: {
areaColor: { //版块颜色
type: 'radial',
x: 0.5,
y: 0.5,
r: 1,
colorStops: [{
offset: 0, color: 'rgba(0,66,147,.8)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0,27,80,.8)' // 100% 处的颜色
}],
global: false // 缺省为 false
},
borderColor: '#0087FF',
borderWidth:1
},
emphasis: { // 鼠标放到地图上面显示
itemStyle: {
areaColor: 'rgba(0,66,147,.8))'
},
label: {
color: '#fff',
}
},
zoom:1.3, //放大效果
center:[106.948024,32.563161], //地图的视觉中心
}],
series: []
};
chart.setOption(option);
})2.地图显示涟漪效果、放射效果、版块颜色根据数据不同改变
var china = "./content/js/lib/china.json";
$.get(china, function (geoJson) {
var chart = echarts.init(document.getElementById('ChinaMap'));
echarts.registerMap('中国', geoJson);
var chinaDatas = [
[{
name: '吉林省',
value: [125.3245,43.886841],
ed: 0 //用于区分版块颜色
}], [{
name: '陕西省',
value: [108.948024,34.263161],
ed: 0
}], [{
name: '山东省',
value: [117.000923,36.675807],
ed: 0
}], [{
name: '重庆市',
value: [106.504962,29.533155],
ed: 0
}], [{
name: '江苏省',
value: [118.767413,32.041544],
ed: 0
}], [{
name: '北京市',
value: [116.405285,39.904989],
ed: 1
}], [{
name: '福建省',
value: [119.306239,26.075302],
ed: 1
}], [{
name: '上海市',
value: [121.472644,31.231706],
ed: 1
}],[{
name: '浙江省',
value: [120.153576,30.287459],
ed: 0
}],
[{
name: '广东省',
value: [113.280637,23.125178],
ed: 10
}]
];
var convertData = function(data) {
var res = [];
for(var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = dataItem[0].name;
var toCoord = [113.280637,23.125178];
if(fromCoord && toCoord) {
res.push([{
coord: dataItem[0].value
}, {
coord: toCoord,
}]);
}
}
return res;
};
var series = [];
[['广东省', chinaDatas]].forEach(function(item, i) {
series.push(
//地图版块颜色
{
name: '其他',
type: 'map',
roam: false,
geoIndex: 5,
itemStyle: {
normal: {
show: false,
}
},
data: item[1].map(function(dataItem) {//data:{name:'北京市',value:0}
return {
name: dataItem[0].name,
value: dataItem[0].ed
};
}),
},
{
type: 'lines',
zlevel: 3,
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 5, //图标大小
},
lineStyle: {
normal: {
width: 1, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: .3, //尾迹线条曲直度,
color: '#ff2345'
}
},
data: convertData(item[1]) //轨迹线条
/*data:{
"fromName": "海珠区",
"toName": "天河区",
lineStyle: {
color: '#FFD24B', // yellow
},
"coords": [
[113.262008, 23.103131],
[113.335367, 23.13559]
]
}*/
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: { //涟漪特效
period: 4, //动画时间，值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 7 //波纹圆环最大限制，值越大波纹越大
},
label: {
normal: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
formatter: function(params){//圆环显示文字
return params.data.name;
},
fontSize: 13,
color: '#fff'
},
emphasis: {
show: true
}
},
symbol: 'circle',
symbolSize: function(val) {
return 5+ val[2] * 5; //圆环大小
},
showEffectOn: 'render',
itemStyle: {
normal: {
show: false,
color: '#ff2345',
shadowBlur: 0,
shadowColor: '#ff2345'
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[0].name,
value: dataItem[0].value.concat(0.7)
};
}),
/*data:{
"name": "海珠区",
"value": [
113.262008, 23.103131, 0.7
]
}*/
});
});
var option = {
visualMap: {//板块区分颜色
type: 'piecewise',
show: false,
pieces: [{
min: 0.9,
label: '建成',
color: 'rgba(11,191,0,0.8)'
},
{
max: 0.5,
min: 0,
label: '在建',
color: 'rgba(191,197,53,0.8)'
},
{
max: 0.9,
min: 0.6,
label: false,
color: '#FF2345'
}
],
color: '#fff',
textStyle: {
color: '#fff',
},
visibility: 'off'
},
geo: [
//地图背景
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 65,
bottom: 1,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 62,
bottom: 4,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 59,
bottom: 7,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 56,
bottom: 10,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
{
map: '中国',
label: {
show: false
},
roam: false,
left: 'center',
top: 53,
bottom: 13,
itemStyle: {
areaColor: 'rgba(30,130,210,.2)',
borderColor: 'rgba(30,130,210,.2)'
},
silent: true,
zoom:1.3,
center:[106.948024,32.563161],
},
//地图坐标
{
map: '中国',
label: {
show: false,
textStyle: {
color: '#5FB5FF',
fontSize: 12
}
},
roam: false,
top: 50,
bottom: 16,
itemStyle: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 1,
colorStops: [{
offset: 0, color: 'rgba(0,66,147,.8)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(0,27,80,.8)' // 100% 处的颜色
}],
global: false // 缺省为 false
},
borderColor: '#0087FF',
borderWidth:1
},
emphasis: {
itemStyle: {
areaColor: 'rgba(0,66,147,.8))'
},
label: {
color: '#fff',
}
},
zoom:1.3,
center:[106.948024,32.563161],
}],
series: series
};
chart.setOption(option);
})