echarts--迁徙图特性简介
$(function() {
loadMapData(); //页面加载时调用封装加载echarts地图的函数
});
function loadMapData (cityName) {
if (cityName == '' || cityName == null) {
cityName = '广州市'; //默认查询的城市, 此处默认查询广州市的迁入迁出情况
}
$.get('${basePath }/enterpriseMigration/getCityMigrationData',{'cityName':cityName}, function (migrationData) {
var inDataCount = migrationData.inDataCount;
var outDataCount = migrationData.outDataCount;
if (inDataCount == null) {
inDataCount = 0;
}
if (outDataCount == null) {
outDataCount = 0;
}
$("#inDataCount").html(inDataCount+' <span> 户</span>');
$("#outDataCount").html(outDataCount+' <span> 户</span>');
$("#inDataCount").html();
var geoCoordMap = { //可以在地图上显示的城市的坐标信息
'广州市': [113.5107,23.2196],
'韶关市':[113.6,24.82],
'深圳市':[114.05,22.55],
'珠海市':[113.57,22.27],
'汕头市':[116.68,23.35],
'佛山市':[113.12,23.02],
'江门市':[113.08,22.58],
'湛江市':[110.35,21.27],
'茂名市':[110.92,21.67],
'肇庆市':[112.47,23.05],
'惠州市':[114.42,23.12],
'梅州市':[116.12,24.28],
'汕尾市':[115.37,22.78],
'河源市':[114.7,23.73],
'阳江市':[111.98,21.87],
'清远市':[113.03,23.7],
'东莞市':[113.75,23.05],
'中山市':[113.38,22.52],
'潮州市':[116.62,23.67],
'揭阳市':[116.37,23.55],
'云浮市':[112.03,22.92]
};
var inData = [
[{name:'云浮市',value:95},{name:'广州市'}], //数据中name的城市名称必须与geoCoordMap中城市名称一致, 不然关联不上
[{name:'揭阳市',value:95},{name:'广州市'}]
];
var outData = [
[{name:'广州市'},{name:'揭阳市',value:95}],
[{name:'广州市'},{name:'潮州市',value:95}]
];
inData = migrationData.in;
outData = migrationData.out;
if (inData == null){
inData = [];
}
if (outData == null){
outData = [];
}
/* for(var i = 0; i < inData.length; i ++) {
alert(inData[i][1].name);
} */
var planePath = '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';
var convertData0 = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [toCoord, fromCoord]
});
}
}
return res;
};
var convertData1 = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord ,toCoord]
});
}
}
return res;
};
var color = ['#eee035', '#b958f5'];
var series = [];
[['迁入企业', inData], ['迁出企业', outData]].forEach(function (item, i) {
if (i == 0) {
convertData = convertData0;
}
if (i == 1) {
convertData = convertData1;
}
series.push({
name: item[0],
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0],
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: 'triangle',
symbolSize: 10
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0],
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});
});
$.getJSON(basePath + '/resources/data/guangdong.json', function(data) {
echarts.registerMap('guangdong', data);
gdchart3 = echarts.init(document.getElementById('gdmap3'));
var option = {
title : {
left: 'center',
textStyle : {
color: '#fff'
}
},
tooltip : {
trigger: 'item'
},
legend: {
orient: 'vertical',
bottom: 200,
left: 100,
data:['迁入企业', '迁出企业'],
textStyle: {
color: '#fff'
},
selectedMode: 'multiple'
},
geo: {
map: 'guangdong',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#1c498a',
borderColor: '#d278fc'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
layoutCenter: ['50%', '38.5%'], //地图在屏幕上显示的位置
layoutSize: screen.width/1.95, //地图加载的尺寸比例设置, screen.width为屏幕可用宽度
series: series
};
gdchart3.setOption(option);
$(window).on("resize", gdchart3.resize); //根据屏幕大小, 自适应加载地图
gdchart3.on('click',function (params) {
var cityName = params.name; //点击地图获取城市名称
$("#inTitleSpan").html('实时各地迁入'+cityName+'的企业总量');
$("#outTitleSpan").html('实时各地迁出'+cityName+'的企业总量');
loadMapData(cityName);
});
});
},'json');
}
echarts--迁徙图特性简介的更多相关文章
- echarts迁徙图
前段时间在echarts社区,看见别人写的echarts迁徙图,学习并也写了一个 预览地址: https://gallery.echartsjs.com/editor.html?c=xYS-YtzOa ...
- Echarts4+EchartsGL 3D迁徙图(附源码)
最近遇到些Echarts迁徙图问题,在实现二维地图的迁徙图后开始开发3D迁徙图,在网上一查,发现3D版本迁徙图资料较少,自己研究并借鉴一些资料后写了一个小demo,希望能帮大家少走些弯路,共同学习. ...
- 【转】各种图(流程图,思维导图,UML,拓扑图,ER图)简介
原文地址:各种图(流程图,思维导图,UML,拓扑图,ER图)简介 流程图 1.定义:流程图是对过程.算法.流程的一种图像表示,在技术设计.交流及商业简报等领域有广泛的应用. 2.案例 3.计算机语言只 ...
- SpartanBrowser产品和安全特性简介
v:* { } o:* { } w:* { } .shape { }p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-botto ...
- vue中使用 echarts3.0 或 echarts2.0 (模拟迁徙图,折线图)
一.echarts3.0(官网: http://echarts.baidu.com/) 首先通过npm安装echarts依赖,安装的为3.0版本 npm install echarts -s 也可以使 ...
- 常见Struts、Hibernate、Spring、J2EE、ibatis、Oracle等开发框架架构图及其简介
各种系统架构图及其简介 转载请保留出处,不胜人生一场醉汇总. 以下文字和架构图均在本人相关系统设计和架构方案中有所应用. 原文出处:http://space.itpub.net/6517/viewsp ...
- leaflet 结合 Echarts4 实现迁徙图(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
- arcgis api 4.x for js 集成 Echarts4 实现模拟迁徙图效果(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- echarts雷达图
用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...
随机推荐
- AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定
AngularJS与单选框及多选框的双向动态绑定 赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...
- JSP判断移动设备
日期: 2014年3月6日 人员::铁锚 看到了一篇很好的文章, <在天猫,前端做什么?>,里面有天猫php判断移动设备的正则(个人猜测),觉得很好用,于是就决定移植到JSP里面. jsp ...
- WINCE的批处理
WINCE上没有提供象window一样的bat文件,如果需要类似功能可以借助第三方程序MortScript MortScript是一个运行于WINCE上的免费脚本解释程序,脚本文件为.mscr或.mo ...
- linux下ruby使用tcl/tk编程环境设置
正常情况下最新的ruby都是不带tcl/tk选项编译的,所以我们在运行tcl/tk代码时都会发生找不到tk库的错误.解决办法很简单只要以tcl/tk选项编译ruby即可. 这里以ubuntu 15.0 ...
- C语言之插入排序
插入法排序的要领就是每读入一个数立即插入到最终存放的数组中,每次插入都使得该数组有序. 上代码: #include <stdio.h> #include <stdlib.h> ...
- 网站开发进阶(十八)js获取html标签中的值
js获取html标签中的值 项目开发过程中,由于需求所迫,需要获取html标签元素中的内容,下面做一简单总结.以下所讲的示例适用于其它标签元素. 主要包括2中方法获取元素内容: 方法一:.innerT ...
- PS 滤镜算法原理——碎片效果
%%% Fragment %%% 对原图做四个方向的平移,然后对平移的结果取平均 %%% 碎片效果 clc; clear all; Image=imread('4.jpg'); Image=doubl ...
- iOS中动态计算不同颜色、字体的文字高度
在改项目bug的时候,有一个问题动态计算label的高度,前开发者竟然用字符串长度除以14.16这样的常量来计算是否换行,结果cell的高度问题非常严重. 因为label内容里有部分关键字是要另一种颜 ...
- Select、Poll与Epoll比较
(1)select select最早于1983年出现在4.2BSD中,它通过一个select()系统调用来监视多个文件描述符的数组,当select()返回后,该数组中就绪的文件描述符便会被内核修改标志 ...
- Mac OS X下各种文件编码的转换方法
何曾几时本猫还在windows下编码的时候,那时ruby的源代码的编码格式都是gbk啊!导致N多中文显示为乱码.后来无奈写了个转换代码从gbk编码转为utf-8格式的小工具: #!/usr/bin/r ...