echarts 实现中国地图的操作
2019-03-07 本文已影响0人
重启试试吧
根据项目的要求在闪点地图上展示，在上传文件时闪点的状态让点变大变颜色，下载文件的城市节点变一个颜色，静态时节点一个样式，也就时说一个地图上要有点的状态要有三种。想了好久修修改改终于实现了。请看最终效果图
map.png
；
点击相对应的城市节点弹出模态框显示这个城市的详细信息如下图。
map (2).png
-
首先下载：jquery.js , echarts.js , china.js文件；
-
html代码： <div id="mainPie" class="mainPieStyle"></div>选定一个容器并且设置一个id;初始化图标的是填入设置的id;var myChartMaps = echarts.init(document.getElementById('mainPie'));
最后 // 使用刚指定的配置项和数据显示图表 myChartMaps.setOption(optionMaps);。
3.话不多说请看代码；
var myChartMaps = echarts.init(document.getElementById('mainPie'));
//配置地图
myChartMaps.setOption({
series: [{
type: 'map',map: 'china' }] }); // 给地图的每个小点添加点击事件 myChartMaps.on('click', function (params) { console.log("this",params) if(params.componentType=="series"){ thisModer(params); console.log("添加信息",params); }else if(params.componentType=="geo"){ } });var rest
$.ajax({
url:"",
type:"get",
success:function(result){
rest=result
}
})
var city=rest.detail;
// 静态
var dataStatic=[];
dataStatic.push({
//填入数据
name:city.YanCheng.city,_name:"YanCheng",value:100
});// 下载 // download var dataDownload = []; dataDownload.push({ //填入数据 name:city.ShenZhen.city,_name:"ShenZhen",value:100 })// 上传
// uploading
var dataUploading=[];
dataUploading.push({
//填入数据
name:city.ChengDou.city,_name:"ChengDou",value:100}) var geoCoordMap = { "深圳":[114.0412,22.3712], "成都":[104.06,30.67], "南京":[118.46,32.03], "盐城":[119.57,32.85], "广州":[113.23,23.16], "北京":[115.25,39.26] };
//静态
var convertDataStatic= function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
city:data[i]._name,
name: data[i].name,
value: geoCoord.concat(data[i].value),
_data: city[data[i]._name]
});
}
}
return res;
};
// 下载
var convertDownload = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
console.log("city[data[i]._name]",city[data[i]._name])
res.push({
city:data[i]._name,
name: data[i].name,
value: geoCoord.concat(data[i].value),
_data: city[data[i]._name]
});
}
}
return res;
};
// 上传
var convertUploading = function (data) {
// console.log("cccccc22222",data)
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
console.log("city[data[i]._name]",city[data[i]._name])
res.push({
city:data[i]._name,
name: data[i].name,
value: geoCoord.concat(data[i].value),
_data: city[data[i]._name]
});
}
}
return res;
};
optionMaps = {
backgroundColor:"pink",
title: {
// text: '节点详情',
// subtext: 'data from PM25.in',
// sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item',
// 设置悬浮框中的数据
formatter: function(params) {
console.log("thissssss",params)
var res = params.data;
var storss=(((res._data.stors)/1000)/1000)/1000;
return "城市："+ res.name +"<br/>节点数：" + res._data.clusters + "<br/>文件数：" + res._data.files +
"<br/>存储容量：" + storss + "GB<br/>"
//公网IP："+ res._data.publicIP +
//"<br/>内网IP：" + res._data.intranet;
},
// 设置提示框文字的样式
textStyle:{
color:"#00FF00",
fontSize:20,
},
},
geo: {
map: 'china',
label: {
emphasis: {
// 是否显示鼠标移入省份的时候显示出省份名称
show: true
}
},
roam: true,
itemStyle: {
normal: {
// 设置地图的颜色
// areaColor: '#92FEFE',
areaColor:"white",
// #F6EFA6
borderColor: '#111'
},
emphasis: {
// 鼠标移入/高亮的时地图的颜色
areaColor: '#00A0EA'
}
},
},
series : [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertDataStatic(dataStatic),
symbolSize:15,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
// 设置小点的颜色
color: "#00A0EA",
}
}
},
//上传
{
name: '项目文件',
type: 'effectScatter',
coordinateSystem: 'geo',
data:convertDownload(dataDownload),
// 设置点的大小
symbolSize:20,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
// 显示地图小点上的文字
formatter: '{b}',
// 显示的位置
position: 'right',
// 设置小点字体的大小
fontSize:20,
// 是否显示
show: true
}
},
itemStyle: {
// 设置点的颜色
normal:{
color:"rgb(252, 93, 7)",
// color:"rgba(255, 145, 0, 0.986)",
}
},
// effect : {
// show: true,
// shadowBlur : 0
// },
zlevel: 1
},
// 下载
{
name: '项目文件',
type: 'effectScatter',
coordinateSystem: 'geo',
data:convertUploading(dataUploading),
// 设置点的大小
symbolSize:20,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
// 显示地图小点上的文字
formatter: '{b}',
// 显示的位置
position: 'right',
// 设置小点字体的大小
fontSize:20,
effect : {
show: true,
shadowBlur : 0
},
// 是否显示
show: true
}
},
itemStyle: {
// 设置点的颜色
normal:{
color:"rgba(0, 184, 0, 0.835)",
}
},
zlevel: 1
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChartMaps.setOption(optionMaps);
