ECharts中地图的使用
2018-04-19 本文已影响28人
wppeng
前台界面样式
map.png
-
介绍
根据点的经纬度，和两点之间的联通状态，动态显示两点的状态。 -
样式代码同（ECharts柱状图或者折线图方法封装）
.map {
height: 40rem;
}
<div class="index-module big-module map">
<div class="index-module-title blue">
<span id="ServerState"></span>
</div>
<div class="index-module-content">
<div id="ServerStateData" class="index-Chart">
</div>
</div>
</div>
- js引用
echarts.min.js;
china.js;
world.js
- js方法
/**
* ECharts地图
* @param {Object} dataPoint 点数据
* @param {Object} dataLine 线数据
* @param {Object} title 标题
*/
function MyEChartsMap(dataPoint, dataLine,title) {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById("ServerStateData"));
$("#ServerState").html(title);
var option = new Object();
//配置信息
option = {
tooltip: {
formatter: function(params) {
//这里如果不希望内容在一行显示也可以自定义css
switch(params.seriesType) {
case "scatter":
//点提示信息
return "站点名称：" + params.name + ",说明：" + params.value.toString().split(',')[2];
break;
case "lines":
//线提示信息
return params.data['fromName'] + "~" + params.data['toName'];
break;
case "map":
//面提示信息
return "区域：" + params.name + ",指数：" + params.value;
break;
}
}
},
/*地图设置*/
visualMap: {
min: 0, //最小颜色
max: 1500, //最大颜色
left: 'left',
top: 'bottom',
text: ['High', 'Low'],
seriesIndex: [1],
inRange: {
color: ['#e0ffff', '#FFFFCC'] //色彩区间
},
calculable: true
},
geo: {
map: 'china',
roam: true,
label: {
normal: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.4)'
}
}
},
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
/*地图设置结束*/
/*数据源*/
series: [
//点数据
{
type: 'scatter', //类型，表示点数据
coordinateSystem: 'geo',
data: convertPointData(dataPoint), //数据源
symbolSize: 8, //标记点大小
//标记样式：可使用svg图标
symbol: 'path://M512 64C306.4 64 140 230.4 140 436c0 101.6 40.8 194.4 107.2 261.6L512 960l264-263.2c66.4-67.2 107.2-159.2 107.2-261.6C884 230.4 717.6 64 512 64z m128 331.2c-4.8 62.4-54.4 112-116.8 116.8-75.2 6.4-138.4-53.6-138.4-127.2 0-70.4 57.6-128 128-128 73.6 0 133.6 63.2 127.2 138.4z',
//symbol: 'path://M877.632 456.8c14.976-14.72 20.384-32.96 14.816-49.984-5.536-17.024-20.608-28.544-41.344-31.584l-190.24-27.84c-6.976-1.024-18.464-9.472-21.6-15.904l-85.12-173.696c-9.28-18.944-24.896-29.76-42.88-29.76-17.952 0-33.6 10.816-42.816 29.76l-85.12 173.696c-3.104 6.432-14.592 14.848-21.6 15.904l-190.24 27.84c-20.704 3.04-35.776 14.56-41.344 31.584-5.568 17.024-0.16 35.232 14.816 49.984l137.696 135.232c5.088 4.992 9.536 18.816 8.32 25.92l-32.48 190.912c-3.552 20.832 2.752 38.816 17.344 49.344 7.52 5.44 16.224 8.16 25.472 8.16 8.576 0 17.6-2.336 26.56-7.04l170.176-90.176c6.048-3.2 20.448-3.2 26.528 0l170.144 90.112c18.528 9.856 37.504 9.44 52.064-1.056 14.56-10.528 20.864-28.48 17.344-49.28l-32.48-190.976c-1.28-7.104 3.2-20.928 8.32-25.92l137.664-135.232z',
//角度信息
symbolRotate: 0,
//鼠标选中说明
label: {
normal: {
formatter: '{b}', //tooltip显示，自定义参考上方例子
position: 'left', //对齐
show: false //是否一直显示
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F06C00' //颜色信息
}
}
},
//底图数据-蓝色部分。
{
name: 'categoryA',
type: 'map',
geoIndex: 0,
data: [{
name: '北京',
value: randomValue()
}, // randomValue() 表示一个随机的颜色数据，如需固定颜色请修改为确定的数字
{
name: '天津',
value: randomValue()
}, // 颜色设置参考visualMap模块
{
name: '上海',
value: randomValue()
},
{
name: '重庆',
value: randomValue()
},
{
name: '河北',
value: randomValue()
},
{
name: '河南',
value: randomValue()
},
{
name: '云南',
value: randomValue()
},
{
name: '辽宁',
value: randomValue()
},
{
name: '黑龙江',
value: randomValue()
},
{
name: '湖南',
value: randomValue()
},
{
name: '安徽',
value: randomValue()
},
{
name: '山东',
value: randomValue()
},
{
name: '新疆',
value: randomValue()
},
{
name: '江苏',
value: randomValue()
},
{
name: '浙江',
value: randomValue()
},
{
name: '江西',
value: randomValue()
},
{
name: '湖北',
value: randomValue()
},
{
name: '广西',
value: randomValue()
},
{
name: '甘肃',
value: randomValue()
},
{
name: '山西',
value: randomValue()
},
{
name: '内蒙古',
value: randomValue()
},
{
name: '陕西',
value: randomValue()
},
{
name: '吉林',
value: randomValue()
},
{
name: '福建',
value: randomValue()
},
{
name: '贵州',
value: randomValue()
},
{
name: '广东',
value: randomValue()
},
{
name: '青海',
value: randomValue()
},
{
name: '西藏',
value: randomValue()
},
{
name: '四川',
value: randomValue()
},
{
name: '宁夏',
value: randomValue()
},
{
name: '海南',
value: randomValue()
},
{
name: '台湾',
value: randomValue()
},
{
name: '香港',
value: randomValue()
},
{
name: '澳门',
value: randomValue()
}
]
},
//线数据01 -- 正常
{
tooltip: {},
type: 'lines',
zlevel: 20,
symbol: ['none', 'arrow'],
symbolSize: 6,
//动画
effect: {
show: true,
period: 3,
trailLength: 0,
//移动点样式。可使用预制，也可使用svg自定义。
//symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
symbol: 'triangle',
symbolSize: 6
},
lineStyle: {
normal: {
type: 'solid',
color: '#a6c84c', //线条颜色
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertLineData(dataLine, dataPoint, 0)
},
//线数据02 --损坏
{
tooltip: {},
type: 'lines',
zlevel: 20,
symbol: ['none', 'arrow'],
symbolSize: 6,
//动画效果--异常线路不显示动画
effect: {
show: false,
period: 3,
trailLength: 0,
//symbol: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
symbol: 'triangle',
symbolSize: 6
},
lineStyle: {
normal: {
type: 'dashed',
color: '#FF3333', //线条颜色
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertLineData(dataLine, dataPoint, 1)
}
]
};
myChart.setOption(option, true);
//绑定单击事件
myChart.on('click', function(params) {
switch(params.seriesType) {
case "lines":
//单击线
alert(params.data['fromName'] + "~" + params.data['toName']);
break;
//单击面
case 'map':
alert(params.name);
break;
//单击点
case "scatter":
alert("站点名称：" + params.name + ",说明：" + params.value.toString().split(',')[2]);
break;
}
});
}
/**
* 组合点数据
* @param {Object} data
*/
function convertPointData(data) {
var res = [];
for(item in data) {
res.push({
name: data[item].name,
value: [data[item].log, data[item].lat, data[item].remark]
});
}
return res;
}
/**
* 组合线数据
* @param {Object} dataline 线数据
* @param {Object} datapoint 点数据
* @param{Object} type 线类型（0正常，1损坏）
*/
function convertLineData(dataline, datapoint, type) {
var res0 = [];
var res1 = [];
for(var i = 0; i < dataline.length; i++) {
var fromName = dataline[i].fromName;
var toName = dataline[i].toName;
var state = dataline[i].state;
if(state == 0) {
res0.push({
fromName: fromName,
toName: toName,
coords: [SearchData(fromName, datapoint), SearchData(toName, datapoint)]
})
} else {
res1.push({
fromName: fromName,
toName: toName,
coords: [SearchData(fromName, datapoint), SearchData(toName, datapoint)]
})
}
}
if(type == 0) {
return res0;
} else {
return res1;
}
};
/**
* 在点数据中查找对应数据经纬度
* @param {Object} name
* @param {Object} datapoint
*/
function SearchData(name, datapoint) {
var value = [];
var i = 0;
while(i < datapoint.length) {
if(name == datapoint[i].name) {
value.push(datapoint[i].log, datapoint[i].lat);
break;
} else {
i++;
continue;
}
}
return value;
}
//随机颜色函数
function randomValue() {
return Math.round(Math.random() * 1000);
}
- 调用方法
MyEChartsMap(testPointdata, testLinedata, '服务器状态');
- 数据源
//点数据
var testPointdata = [{
"name": "齐齐哈尔",
"log": 123.97,
"lat": 47.33,
"remark": "备注齐齐哈尔"
},
{
"name": "赤峰",
"log": 118.87,
"lat": 42.28,
"remark": "备注赤峰"
},
{
"name": "海门",
"log": 121.15,
"lat": 31.89,
"remark": "备注海门"
},
{
"name": "成都",
"log": 104.06,
"lat": 30.67,
"remark": "备注成都"
}
]
//线数据（state代表线路是否通畅，0线路正常，1线路损坏）
var testLinedata = [{
"fromName": "齐齐哈尔",
"toName": "赤峰",
"state": 0
},
{
"fromName": "齐齐哈尔",
"toName": "海门",
"state": 1
},
{
"fromName": "海门",
"toName": "赤峰",
"state": 0
},
{
"fromName": "赤峰",
"toName": "海门",
"state": 0
},
{
"fromName": "齐齐哈尔",
"toName": "成都",
"state": 0
}
]
