echarts关系图/力导向动态图(地图经纬度定位)

需求:项目要做一个动态展示服务器前置机间是否连通的界面。

先看下效果,分两种,一种带地图(经纬度),一种屏蔽地图显示:

 

这个是通过百度echarts的一个案列改造而来。下面附上官网地址API地址、改造前Demo地址、china.jsonecharts.js

上代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="HandheldFriendly" content="true">
	<title></title>
	
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="echarts.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script> 
</head>
<body>
    <div id="main"  style="width: 100%; height: 640px;"></div>
</body>
<script type="text/javascript">
     // 基于准备好的dom,初始化echarts实例
    console.log("加载中---------------");
    var myChart;
    $.ajaxSettings.async = false;//设置为同步加载,防止因为注入china的json太久后面的代码先执行导致bug
    $.get('json/china.json', function (chinaJson) {//注入china地图,注入的原因有两点:1.引入经纬度 2.用于geo图层的显示,因为geo图层可以让端点产生动态波浪的动画效果
    echarts.registerMap('china', chinaJson);
    myChart = echarts.init($('#main')[0]);
    });
    var color = ['#a6c84c', '#ffa022', '#46bee9', '#FFB6C1', '#FFF0F5',
                 '#DA70D6', '#4B0082', '#0000FF', '#F8F8FF', '#4169E1',
                 '#F0FFFF', '#E1FFFF', '#00FFFF', '#008B8B', '#40E0D0',
                 '#FFFFE0', '#FFFF00', '#FFA500', '#CD5C5C', '#FF0000'];//随便找了几种颜色,用于产生随机颜色
    //类似于Demo里面的飞机图形,这里用的箭头图形,这里表示图形的矢量坐标,好处是无论地图放大缩小,都不会失真
    var planePath = 'path://M80.3,780.9l418.3-421.8l421.7,418.2L990,707L497.9,219.1L10,711.2L80.3,780.9z';//矢量网址:http://www.sfont.cn/
    var series = [];//echarts固有属性
    series.push({//这里目前使用了三个type,2个level,所以这里数组push一下
    	//之前这个type去掉依旧不影响展示效果,但是这个图层可以作为你不想使用level2的lines的动态效果
    	//举个例子,我这个需求不连通的服务器不需要箭头在线上动态走过去,就可以把这些需求的点加在这个图层里
    	type: 'lines',
    	zlevel: 1,//用于 Canvas 分层,不同zlevel值的图形会放置在不同的 Canvas 中,Canvas分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的zlevel。
    	//zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。类似于z-index吧
    	effect: {//线特效的配置
    		show: true,//是否显示特效。
            period: 6,//特效动画的时间,单位为 s。
            trailLength: 0.7,//特效尾迹的长度。取从 0 到 1 的值,数值越大尾迹越长。
            color: '#fff',//特效标记的颜色,默认取 lineStyle.color。
            symbolSize: 3//特效标记的大小,可以设置成诸如 10 这样单一的数字,也可以用数组分开表示高和宽,例如 [20, 10] 表示标记宽为20,高为10。
    	},
    	lineStyle: {
                normal: {
                    color: 'yellow',//线的颜色
                    type: 'dashed',//线的类型。'solid','dashed','dotted'
                    //opacity: 0.6, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
                    curveness: 0.2//边的曲度,支持从 0 到 1 的值,值越大曲度越大。
                }
        },
        data:[{coords:[[116.0046,28.6633],[120.37,22.64]]}] //线数据集。【【起点】,【终点】】
    },
    {
        type: 'lines',
        zlevel: 2,//第二图层,位于第一层之上
        symbol: ['none', 'arrow'],//线两端的标记类型,我这里用的箭头
        symbolSize: 10,
        label: {//标签相关配置
        	normal: {
        		show: true,
        		position: 'middle',//标签位置,'start' 线的起始点,'middle' 线的中点。'end' 线的结束点。
        		color: 'yellow',
        		formatter: function (params, ticket, callback) {//标签内容格式器,支持字符串模板和回调函数两种形式 回调函数格式:(params: Object|Array) => string
		        var showHtm="连接中....";
		        return showHtm;
             }
        	}
        },
        effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: planePath,//特效图形的标记。1.ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
            //2.可以通过 'image://url' 设置为图片,其中 URL 为图片的链接,或者 dataURI。URL 为图片链接例如:'image://http://xxx.xxx.xxx/a/b.png'
            //3.可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。
            symbolSize: 15
        },
        lineStyle: {
            normal: {
                color: color[1],
                width: 2,
                opacity: 0.6,
                curveness: 0.2
            }
        },
         data:[{coords:[[116.0046,28.6633],[90,29]]},{coords:[[116.0046,28.6633],[120,50]],lineStyle:{type: 'dashed'}},
              {coords:[[116.0046,28.6633],[90,50]]}]
    },
    {
        type: 'effectScatter',//带有涟漪特效动画的散点(气泡)图。利用动画特效可以将某些想要突出的数据进行视觉突出。
        coordinateSystem: 'geo',//该系列使用的坐标系 可选:1.'cartesian2d'使用二维的直角坐标系(也称笛卡尔坐标系),通过 xAxisIndex, yAxisIndex指定相应的坐标轴组件。
        //2.'polar',使用极坐标系,通过 polarIndex 指定相应的极坐标组件
        //3.'geo',使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件。
        zlevel: 2,//图层level2
        rippleEffect: {//涟漪特效相关配置
            brushType: 'stroke'//波纹的绘制方式,可选 'stroke' 和 'fill'。
        },
        label: {
            normal: {
                show: true,
                position: 'right',
                formatter: '{b}'
            }
        },
        //showEffectOn: 'emphasis',
        symbolSize: 20,
        //data通过value中的经纬度坐标显示点的位置
        data: [{name:'Mysql',value:[120,50],isConnected: false,ip: '192.18.231.1',serverLocation:'北京',itemStyle: {
            normal: {
                color: color[1]
            }
        }},{name:'MongoDb',value:[90,50],itemStyle: {
            normal: {
                color: color[(function(){//返回一个color随机数
                	return Math.round(Math.random()*19);
                })()],
                opacity: 0.7
            }
        },symbol: 'diamond',symbolSize: 30},
        {name:'Unix',value:[300,100]},
        {name:'Linux',value:[90,29],itemStyle: {
            normal: {
                color: 'rgb(128, 128, 128)'
            },
        },symbol: 'rect',isConnected: false,ip: '192.168.2.2',serverLocation:'成都'},
        {name:'主服务器',value:[116.0046,28.6633],symbol: 'image://http://pic.58pic.com/58pic/16/69/20/58t58PIC2Bu_1024.jpg',isConnected: true,ip: '192.168.1.1',serverLocation:'西安'},
        {name:'Oracle',value:[120.37,22.64],itemStyle: {
            normal: {
                color: color[(function(){
                	return Math.round(Math.random()*19);
                })()]
            },
        },symbol: 'roundRect',isConnected: false,ip: '192.168.2.2',serverLocation:'Fly'},]
    });
    option = {
    	 tooltip :{
    	 	show: true,
    	 	confine:false,//是否将 tooltip 框限制在图表的区域内。
    	 	showContent:true, //是否显示提示框浮层
            trigger:'item',//触发类型,默认数据项触发
            formatter: function (params, ticket, callback) {//悬浮提示,可以拿到data中的属性然后进行显示
		        console.log('-------');
		        console.log(params);
		        var showHtm="";
		        if(params.data){
		        	var obj = params.data;
		        	for(key in obj){
                        switch(key){
                        	case 'isConnected': showHtm += '是否联通='+obj[key]+'<br>'; break;
                        	case 'ip': showHtm += 'ip='+obj[key]+'<br>'; break;
                        	case 'serverLocation': showHtm += '服务器所在地='+obj[key]+'<br>'; break;
                        	default:
                        }
		        	}
		        }
		        return showHtm;
             }
    	 },
    	 backgroundColor: '#404a59',//背景色,默认无背景。
    	 title : {
       	 text: '服务器连通示意图',
       	 left: 'center',//grid 组件离容器左侧的距离,left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。
       	 textStyle : {
            color: '#fff'
           }
         },
	    geo: {//地理坐标系组件。
	        map: 'china',//地图类型 ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。
            zoom: 1,//当前视角的缩放比例。
            //center:[],//当前视角的中心点,用经纬度表示
	        label: {
	            emphasis: {
	                show: false
	            }
	        },
	        roam: true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
	        itemStyle: {
	            normal: {
	                areaColor: '#323c48',
	                borderColor: '#404a59'
	            },
	            emphasis: {
	                areaColor: '#2a333d'
	            }
	        }
	    },
	    series: series
    }
    myChart.setOption(option);
</script>
</html>

上面该注解的都写了注解,重复的没有写,有不懂的尽量自己查API,API更详细,地址已经在文章开头写了。

直接拷贝运行会缺echart.js(这个可以从官网下载,也可以从百度网盘下,链接在文章开头),china.json(自己百度下载或者文章开头链接下)。

后面有时间再写一篇关于这个的升级版,包括前后台,数据从后台取,自动根据实际页面展示的物理尺寸计算地图缩放级别,初始化地图中心点定位,定时刷新界面数据。

 

转载请注明出处:https://blog.csdn.net/qq_15351167/article/details/84530842

 

评论 3 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

Bury丶22

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值