900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > Echart实现的数据可视化统计人口流动效果(功能:饼状图 条形图 叠加条形图 流入流

Echart实现的数据可视化统计人口流动效果(功能:饼状图 条形图 叠加条形图 流入流

时间:2022-09-05 08:35:45

相关推荐

Echart实现的数据可视化统计人口流动效果(功能:饼状图 条形图 叠加条形图 流入流

博客目录

Echart实现的可视化统计人口流动效果实现功能截图系统功能技术点总结代码写在最后

Echart实现的可视化统计人口流动效果

最近使用echart实现了人口统计的可视化效果,常用的条形图、饼状图,不过比较炫的是实现的人口流入流出模拟的动态图。

实现功能截图

人口流入流出动态模拟效果(动态图,这里不知道怎么加GIF图):

常规统计图:

复杂叠加条形图:

系统功能

使用echarts实现数据可视化:条形图、饼状图、流入流出模拟。

技术点总结

运行环境:

需要依赖echarts.js

具体的echarts环境的配置,可以参考这位博主:

/m0_45052521/article/details/121410738

代码

data1.js:

//文化程度var whcd = ['文盲','小学','初中','高中','技工学校','中专','大学专科','大学本科','研究生'];//性别var xb = ['男性','女性'];//收入水平var sr = ['1000-2000元','2000-2999元','3000-3999元','4000-4999元','5000-5999元','6000-6999元','7000-7999元','8000-8999元','9000-10000元','10000以上'];//地区var dq = ['沧县','青县','东光县','海兴县','盐山县','肃宁县','南皮县','吴桥县','献县','孟村回族自治县','泊头市','任丘市','黄骅市','河间市','新华区','运河区','沧州经济开发区','沧州高新技术产业开发区'];//婚姻状况var hyzk = [ '未婚','已婚','离异','丧偶','其他 '];//年龄段var nld = ['20岁以前','20-30岁','30-40岁','40-50岁','50-60岁','60岁以后'];var itemdata=[[xb,whcd],[whcd,sr],[nld,sr],[sr,dq],[whcd,dq]];var title = ['年人口男女分布比例','年人口文化程度分布比例','年各年龄阶段人口分布比例','年各收入水平人口分布比例','年人口文化程度分布比例'];var title1 = ['年各文化程度人口分布情况','年各收入水平人口分布情况','年各收入水平人口分布情况','年各地区人口分布情况','年各地区人口分布情况'];var title2 = [['年各文化程度','人口分布情况'],['年','各收入水平人口分布情况'],['年','各收入水平人口分布情况'],['年各地区','收入水平人口分布情况'],['年各地区','人口分布情况']];var data =[[{year:,data:[[167354,1004666,1135322,208252,35382,69202,58961,44043,5257],[149349,1012069,1210654,219371,37271,72896,62109,46395,5538 ]]},[{year:,data:[[,129215,43072,17735,15202,12668,10134,7601,7094,5067],[,726025,338811,129071,96803,82282,70989,59695,45175,32268],[,581802,431659,243982,243982,95716,82578,69441,52550,37536],[,51314,129998,41052,42078,20868,18474,10263,9237,8894],[,8718,22086,6974,7149,3546,3138,1744,1570,1511],[,17052,43198,13642,13982,6934,6138,3410,3070,2956],[,9686,14529,19371,29057,9686,4843,2906,1937,1743],[,5788,9406,14470,21705,7235,3618,2894,2170,2026],[,86,346,2418,1727,1036,864,691,518,432 ]]}, ],[{year:,data:[[175,218,122,0,0,0,0,0,0,0],[107181,144072,38396,11366,5978,5083,5083,2574,1309,8901],[266349,691954,184889,49784,32244,18936,20878,16318,7570,97233],[158972,674785,357081,78428,40905,31175,32222,31218,15838,134015],[48998,293335,314017,84689,21314,14966,13569,11977,8006,7],[2334,6087,6087,1680,698,240,131,163,153,2182 ]]},],[{year:,data:[[54316,26673,23073,18417,24425,27224,29865,22293,48328,17156,47488,66157,48685,70201,23976,29252,5243,1238],[168381,82687,71527,57092,75719,84397,92584,69108,149819,53184,147215,205089,150924,217626,74327,90682,16253,3837],[83750,41127,35577,28397,37662,41978,46050,34373,74518,26453,73223,10,75067,108244,36969,45104,8084,1908],[21014,1031],[10533,11555,8625,18698,6637,18373,25595,18836,27160,9276,11317,2028,479],[9406,4619,3996,3189,4230,4715,5172,3861,8369,2971,8224,11457,8431,12157,4152,5066,908,214],[6548,3215,2781,2220,2944,3282,3600,2687,5826,2068,5725,7975,5869,8462,2890,3526,632,149],[6685,3283,2840,2267,3006,3351,3676,2744,5948,2112,5845,8143,5992,8641,2951,3600,645,152],[5789,2843,2459,1963,2603,2901,3183,2376,5150,1828,5061,7051,5188,7482,2555,3117,559,132],[3058,1502,1299,1037,1375,1533,1681,1255,2721,966,2673,3724,2741,3952,1350,1647,295,70],[29236,14357,12419,9913,13147,14654,16075,11999,26013,9234,25561,35609,26205,37786,12905,15745,2822,666]]},],[{year:,data:[[29455,14464,12512,9987,13246,14764,16196,12089,26208,9304,25752,35876,26401,38069,13002,15863,2843,671],[187566,92108,79677,63597,84347,94013,103133,76983,166889,59244,163989,228457,168120,242423,82796,101014,18104,4274],[218187,107146,92685,73980,98117,109361,119970,89550,194134,68916,190761,265753,195567,281999,96312,117505,21060,4971],[39771,19530,16895,13485,17885,19934,21868,16323,35387,12562,34772,48441,35648,51403,17556,21419,3839,906],[6757,3318,2870,2291,3039,3387,3715,2773,6012,2134,5908,8230,6057,8733,2983,3639,652,154],[13216,6490,5614,4481,5943,6624,7267,5424,11759,4174,11555,16097,11846,17081,5834,7117,1276,301],[11260,5530,4783,3818,5064,5644,6191,4621,10019,3557,9845,13715,10093,14553,4970,6064,1087,257],[8411,4130,3573,2852,3782,4216,4625,3452,7484,2657,7354,10245,7539,10871,3713,4530,812,192],[1004,493,426,340,451,503,552,412,893,317,878,1223,900,1298,443,541,97,23 ]]},]];var gmysqy = ['规模以上工业企业','规模以上商业企业'];var jglx = ['企业','机关','事业单位','社会团体','工会','个体工商户','民办非企业','其他组织机构'];var qylx = ['国有企业','集体所有制','私营企业','股份制企业','联营企业','外商投资企业','港澳台','股份合作企业'];var qygm = ['微型','小型','中型','大型','特大型企业'];var hyfl = ['农、林、牧、渔业','采矿业','制造业','电力、燃气及水生产和供应业','建筑业','批发和零售业','交通运输、仓储和邮政业','住宿和餐饮业','信息传输、软件和信息技术服务业','金融业房地产业','租赁和商务服务业','科学研究和技术服务业','水利、环境和公共设施管理业','居民服务、修理和其他服务业','教育','卫生和社会工作','文化、体育和娱乐业','公共管理、社会保障和社会组织','国际组织'];var qyns = ['X<30万','30万≤X<100万','100万≤X<200万','200万≤X<500万','500万≤X<1000万','1000万≤X<5000万','5000万≤X<1亿','1亿≤X<10亿','10亿≤X<20亿','X≥20亿'];var ygsl = ['微型(X<20)','小型(20≤X<300 )','中型(300≤X<1000)','大型(X≥1000)'];var xvqy = ['小型企业','微型企业','家庭作坊式企业','个体工商户'];//、、、、、//、。var itemdata1=[[gmysqy,hyfl],[gmysqy,qygm],[qygm,hyfl],[hyfl,qyns],[qylx,qyns],[gmysqy,ygsl],[xvqy,hyfl]];function HashMap1(){/**Map大小**/ var size=0; /**对象**/ var entry=new Object(); /**Map的存put方法**/ this.put=function(key,value){if(!this.containsKey(key)){size++; entry[key]=value; } } /**Map取get方法**/ this.get=function(key){return this.containsKey(key) ? entry[key] : null; } /**Map删除remove方法**/ this.remove=function(key){if(this.containsKey(key) && ( delete entry[key] )){size--; } } /**是否包含Key**/ this.containsKey= function (key){return (key in entry); } /**是否包含Value**/ this.containsValue=function(value){for(var prop in entry) {if(entry[prop]==value){return true; } } return false; } /**所有的Value**/ this.values=function(){var values=new Array(); for(var prop in entry) {values.push(entry[prop]); } return values; } /**所有的 Key**/ this.keys=function(){var keys=new Array(); for(var prop in entry) {keys.push(prop); } return keys; } /**Map size**/ this.size=function(){return size; } /**清空Map**/ this.clear=function(){size=0; entry=new Object(); } } function HashMap() {var hash_table_length = 1024 * 1024; //2的幂次方 var hash_table = new Array(hash_table_length); //hashTable表 var total_size = 0; //总长度 /* * 新增hashmap值 * 参数: * key : key值 * value: 原始Value值 */ this.put = function (key, value) {if (key != null) {var hash = hashCode(key); //进过hashCode,将key转化成整型 var index = indexFor(hash, hash_table.length); //从冲突链表中查询KEY键是否存在,存在的话覆盖新值 for (var obj = hash_table[index]; obj != null; obj = obj.next) {if (obj.hash == hash && obj.key == key) {obj.value = value; return obj.value; } } addEntry(hash, key, value, index); } return false; } /* * 获取hashmap对应值 * 参数: * key : key值 */ this.get = function (key) {if (key != null) {var hash = hashCode(key); //进过hashCode,将key转化成整型 var index = indexFor(hash, hash_table.length); for (var obj = hash_table[index]; obj != null; obj = obj.next) {if (obj.hash == hash && obj.key == key) {return obj.value; } } } return false; } /* * 删除一个hash值 * 参数: * key : key值 */ this.remove = function (key) {if (key != null) {var hash = hashCode(key); //进过hashCode,将key转化成整型 var index = indexFor(hash, hash_table.length); var entry = hash_table[index]; var e = entry; while (e != null) {//循环跑链表,将需要删除值的next对象放到前一个对象的next中 var next = e.next; if (e.hash == hash && e.key == key) {if (entry == e) {hash_table[index] = next; } else {entry.next = next; } total_size--; return true; } entry = e; e = next; } } return false; } /* * 清空hashtable操作 * 参数: * key : key值 */ this.clear = function () {hash_table = null; hash_table = new Array(hash_table_length); total_size = 0; return hash_table; } /* * 判断KEY值是否存在 * 参数: * key : key值 */ this.isSet = function (key) {if (key != null) {var hash = hashCode(key); //进过hashCode,将key转化成整型 var index = indexFor(hash, hash_table.length); for (var obj = hash_table[index]; obj != null; obj = obj.next) {if (obj.hash == hash && obj.key == key) {return true; } } } return false; } /* * 返回hashMap长度 */ this.size = function () {return total_size; } /* * 解决hash冲突的链表结构 * 参数: * hash : hash值,key经过hashCode的值 * key : key值 * value: 原始Value值 * index: hashTable 索引值 */ var addEntry = function (hash, key, value, index) {var entry = hash_table[index]; var item = {"hash" : hash, "key" : key, "value" : value, "next" : entry }; hash_table[index] = item; total_size++; //统计数据表总长度 } /* * 经过该函数得到 哈希表 哈希地址 */ var indexFor = function (hash, length) {return hash & (length - 1); } /* * 通过hashCode函数,将key转化成整型 */ var hashCode = function (key) {var h = 0, off = 0; var length = key.length; for (var i = 0; i < length; i++) {var temp = key.charCodeAt(off++); h = 31 * h + temp; if (h > 0x7fffffff || h < 0x80000000) {h = h & 0xffffffff; } } h ^= (h >>> 20) ^ (h >>> 12); return h ^ (h >>> 7) ^ (h >>> 4); }; }

data2.js

var qr = [{year:,data:[{name:'上海',value:100},{name:'北京',value:90},{name:'大连',value:80},{name:'重庆',value:70},{name:'南昌',value:60},{name:'拉萨',value:50},{name:'中山',value:40},{name:'乌鲁木齐',value:30},{name:'柳州',value:20},{name:'韶关',value:10}]},{year:,data:[{name:'上海',value:90} ]}];var qc = [{year:,data:[{name:'上海',value:100},{name:'北京',value:90},{name:'大连',value:80},{name:'重庆',value:70},{name:'南昌',value:60},{name:'拉萨',value:50},{name:'中山',value:40},{name:'乌鲁木齐',value:30},{name:'柳州',value:20},{name:'韶关',value:10}]},{year:,data:[{name:'上海',value:90} ]}];var center = '沧州';function HashMap1(){/**Map大小**/ var size=0; /**对象**/ var entry=new Object(); /**Map的存put方法**/ this.put=function(key,value){if(!this.containsKey(key)){size++; entry[key]=value; } } /**Map取get方法**/ this.get=function(key){return this.containsKey(key) ? entry[key] : null; } /**Map删除remove方法**/ this.remove=function(key){if(this.containsKey(key) && ( delete entry[key] )){size--; } } /**是否包含Key**/ this.containsKey= function (key){return (key in entry); } /**是否包含Value**/ this.containsValue=function(value){for(var prop in entry) {if(entry[prop]==value){return true; } } return false; } /**所有的Value**/ this.values=function(){var values=new Array(); for(var prop in entry) {values.push(entry[prop]); } return values; } /**所有的 Key**/ this.keys=function(){var keys=new Array(); for(var prop in entry) {keys.push(prop); } return keys; } /**Map size**/ this.size=function(){return size; } /**清空Map**/ this.clear=function(){size=0; entry=new Object(); } } function HashMap() {var hash_table_length = 1024 * 1024; //2的幂次方 var hash_table = new Array(hash_table_length); //hashTable表 var total_size = 0; //总长度 /* * 新增hashmap值 * 参数: * key : key值 * value: 原始Value值 */ this.put = function (key, value) {if (key != null) {var hash = hashCode(key); //进过hashCode,将key转化成整型 var index = indexFor(hash, hash_table.length); //从冲突链表中查询KEY键是否存在,存在的话覆盖新值 for (var obj = hash_table[index]; obj != null; obj = obj.next) {if (obj.hash == hash && obj.key == key) {obj.value = value; return obj.value; } } addEntry(hash, key, value, index); } return false; } /* * 获取hashmap对应值 * 参数: * key : key值 */ this.get = function (key) {if (key != null) {var hash = hashCode(key); //进过hashCode,将key转化成整型 var index = indexFor(hash, hash_table.length); for (var obj = hash_table[index]; obj != null; obj = obj.next) {if (obj.hash == hash && obj.key == key) {return obj.value; } } } return false; } /* * 删除一个hash值 * 参数: * key : key值 */ this.remove = function (key) {if (key != null) {var hash = hashCode(key); //进过hashCode,将key转化成整型 var index = indexFor(hash, hash_table.length); var entry = hash_table[index]; var e = entry; while (e != null) {//循环跑链表,将需要删除值的next对象放到前一个对象的next中 var next = e.next; if (e.hash == hash && e.key == key) {if (entry == e) {hash_table[index] = next; } else {entry.next = next; } total_size--; return true; } entry = e; e = next; } } return false; } /* * 清空hashtable操作 * 参数: * key : key值 */ this.clear = function () {hash_table = null; hash_table = new Array(hash_table_length); total_size = 0; return hash_table; } /* * 判断KEY值是否存在 * 参数: * key : key值 */ this.isSet = function (key) {if (key != null) {var hash = hashCode(key); //进过hashCode,将key转化成整型 var index = indexFor(hash, hash_table.length); for (var obj = hash_table[index]; obj != null; obj = obj.next) {if (obj.hash == hash && obj.key == key) {return true; } } } return false; } /* * 返回hashMap长度 */ this.size = function () {return total_size; } /* * 解决hash冲突的链表结构 * 参数: * hash : hash值,key经过hashCode的值 * key : key值 * value: 原始Value值 * index: hashTable 索引值 */ var addEntry = function (hash, key, value, index) {var entry = hash_table[index]; var item = {"hash" : hash, "key" : key, "value" : value, "next" : entry }; hash_table[index] = item; total_size++; //统计数据表总长度 } /* * 经过该函数得到 哈希表 哈希地址 */ var indexFor = function (hash, length) {return hash & (length - 1); } /* * 通过hashCode函数,将key转化成整型 */ var hashCode = function (key) {var h = 0, off = 0; var length = key.length; for (var i = 0; i < length; i++) {var temp = key.charCodeAt(off++); h = 31 * h + temp; if (h > 0x7fffffff || h < 0x80000000) {h = h & 0xffffffff; } } h ^= (h >>> 20) ^ (h >>> 12); return h ^ (h >>> 7) ^ (h >>> 4); }; }

写在最后

码代码不容易,需要的同学可以参考学习,全部代码不能都贴出,如果需要可以he博主V交流获取(Code2Life2)

最后,别忘了一键三连哦

Echart实现的数据可视化统计人口流动效果(功能:饼状图 条形图 叠加条形图 流入流出动态图)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。