echarts地图上的标签为图片_ECharts中地图的使用
前台界面样式
map.png
介绍
根据点的经纬度，和两点之间的联通状态，动态显示两点的状态。
.map {
height: 40rem;
}
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
}
]
echarts地图上的标签为图片_ECharts中地图的使用相关推荐
- echarts地图上的标签为图片_百度地图标记点中添加Echarts图表
html { height: 100% } body { height: 100%; margin: 0px; padding: 0px } #container { height: 100% } v ...
- echarts地图上的标签为图片_PyEcharts——地图-数据可视化
注意事项:notebook用的浏览器一定要是谷歌浏览器 说明:这些包都正常安装了,但是notebook中无法显示地图,但是保存的网页中可以显示,当时用的是360急速浏览器. 我以为重新启动了noteb ...
- 在图片上做标签，图片可放大缩小
最近有个功能需要标记出没张图里脸部,并且点击大图后,图片可以缩放,标记也会跟着移动.有点类似地图tag 眼见为实,先上一张效果图: 由于最近项目已经完成差不多,在这段时间里把觉得有质量的功能拿出来和小 ...
- android百度地图覆盖物异步加载图片,Android 百度地图marker中图片不显示的解决方法(推荐)...
目的: 根据提供的多个经纬度,显示所在地的marker样式,如下: 问题: 1.发现marker中在线加载的图片无法显示出来: 2.获取多个对象后,却只显示出了一个marker: 以下为官网实现方法: ...
- java地图上标记_绘制点标记-在地图上绘制-开发指南-Android 地图SDK | 高德地图API...
点标记用来在地图上标记任何位置,例如用户位置.车辆位置.店铺位置等一切带有位置属性的事物. 地图 SDK 提供的点标记功能包含两大部分,一部分是点(俗称 Marker).另一部分是浮于点上方的信息窗体 ...
- 地图上绘制任意角度的椭圆_地图上的总椭圆
地图上绘制任意角度的椭圆 或者,如何选择下班后去海滩的最佳方式 (Or, how to choose the best way to walk to the beach after work) It ...
- qgis在地图上画导航线_在Laravel中的航线
qgis在地图上画导航线 For further process we need to know something about it, 为了进一步处理,我们需要了解一些有关它的信息, The rou ...
- 地图上分成一块一块区域 高德地图_在谷歌地图上绘制行政区域轮廓【结合高德地图的API】...
实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百 ...
- 百度地图在地图上添加多个点,并调整地图层级及中心点至合适位置大小
项目中有个输入关键字,把搜索结果在地图上标点的需求,需要将搜索到的结果标在地图中,如果有的点不在当前地图视野中,需要将地图移动到合适的中心点,并且调整到合适层级. 分享一下其中比较关键点的函数. /* ...
最新文章
- ajax怎么设置好友,好友按ajax新消息通知
- 数据标准化处理,data.mean和data.std
- IT行业热点商业模式随笔第七章——商业模式创新规律
- Java基础提升篇：理解String 及 String.intern() 在实际中的应用
- Android之java.lang.OutOfMemoryError: Failed to allocate a ** byte allocation with **free bytes and 2M
- 【java】6个延时队列的实现方案
- spring test---restful与文件上传
- 浏览器的“sleep”
- python数据格式化后导入数据库_MySQL导入格式化数据
- 红米3s进不了recovery_红米手机3S/3X刷recovery教程及第三方recovery下载
- Typora下载链接
- Google Ads关键词不展示原因及解决方案
- vs2012 wp8 应用调试时报错 指定的通信资源（端口） 已由另一个应用程序使
- 迈普交换机_配置手册_IS420
- 大陆资金港股打新股亲身体验全流程
- 【CIPS 2016】(17章)文字识别 (研究进展、现状趋势)
- SVN-服务器及pc端SVN搭建
- CTO问我，为什么需要API网关？
- 风场可视化：绘制轨迹
- 计算机控制的节能路灯系统,路灯与PLC自动控制系统