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

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

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

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

官网地址：http://echarts.baidu.com/
API地址：http://echarts.baidu.com/option.html#title
Demo地址：http://www.echartsjs.com/gallery/editor.html?c=geo-lines
china.json：https://pan.baidu.com/s/1gPfPjj6W_rylgXKXlDPsfw 密码：258r
echarts.js：https://pan.baidu.com/s/13UAS4iGUzfINdLAEWuT4_w 密码：zhir

上代码：

<!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) => stringvar 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,//图层level2rippleEffect: {//涟漪特效相关配置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

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

Echarts3 关系图-力导向布局图
因为项目需要,要求实现类似力导图效果的图,我就瞄上了echarts. 注意事项1:由于我的项目要部署到内网,所以js文件要在本地,网上大多力导图都是echarts2的,而其又依赖zrender基础库, ...
仿企查查、天眼查 d3关联关系图力项导图
研究完股权穿透图跟企业图谱最近又写了一个企业.人物的力项导图力导向图可以直观看出各个元素之间的关系具体的代码就不贴了,官网很多 demo 都可以直接拿来用先看效果 d3灵活的地方就在于它可以 ...
python画动态图-python画动态图
广告关闭 2017年12月,云+社区对外发布,从最开始的技术博客到现在拥有多个社区产品.未来,我们一起乘风破浪,创造无限可能. 而漂漂亮亮的可视化是完成这一任务的绝佳工具. 本文将介绍 5 种非传统的 ...
MATLAB绘制主函数动态图,matlab绘制动态图
mathematica绘制动态图,"绘图之王"争霸赛--Excel才是绘图王道,matlab绘制动态图,动态三维图绘制 matlab动态图画法_数学_自然科学_专业资料.Matla ...
activiti动态增加节点_图神经网络之动态图
图这种结构普遍存在于人类社会生活中,如互联网中网页间的互相链接会构成图.网民购买商品会构成"网民-商品"图.人和人的交流会构成图.论文的互相引用也会构成图.有许多任务需要根据这些图 ...
动态图相册 android,‎动态图相册 in de App Store
累计1000+"真实"五星好评 9大核心功能:GIF播放.GIF保存.GIF分享.GIF压缩.文件夹管理.全网GIF搜索.全网GIF浏览.导入导出.GIF制作 *GIF播放* 解决 ...
音视频入门-20-BMP、PNG、JPG、GIF静态图生成GIF动态图
* 音视频入门文章目录 * 静态图 -> 动态图前面 [18-手动生成一张GIF图片] 和 [19-使用giflib处理GIF图片] 生成的 GIF 每一帧都是一个颜色,平时用到的 GIF 每 ...
d3力导向图增加节点_D3.js+Es6+webpack构建人物关系图(力导向图)，动态更新数据，点击增加节点，拖拽增加连线......
Java学习手记2--多线程一.线程的概念 CPU执行程序,就好比一个人在干事情一样,同一个时间你只能做一件事情,但是这样的效率实在是太低了,在你用电脑的时候,听歌就不能浏览网页,看电影就不能下载视 ...
ECharts力导向布局图增加滚动条
ECharts(canvas)根据容器(div)初始化宽度,高度  <div id="capital&quo ...

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

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

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

官网地址：http://echarts.baidu.com/

API地址：http://echarts.baidu.com/option.html#title

Demo地址：http://www.echartsjs.com/gallery/editor.html?c=geo-lines

china.json：https://pan.baidu.com/s/1gPfPjj6W_rylgXKXlDPsfw 密码：258r

echarts.js：https://pan.baidu.com/s/13UAS4iGUzfINdLAEWuT4_w 密码：zhir

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

最新文章

热门文章