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

  • Post author:
  • Post category:其他




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

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



实现功能截图

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

在这里插入图片描述

常规统计图:

在这里插入图片描述

复杂叠加条形图:

在这里插入图片描述



系统功能

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



技术点总结

运行环境:

需要依赖echarts.js

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

https://blog.csdn.net/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:2005,data:[[167354,1004666,1135322,208252,35382,69202,58961,44043,5257],[149349,1012069,1210654,219371,37271,72896,62109,46395,5538  ]]},
			[
			 {year:2005,data:[[2005,129215,43072,17735,15202,12668,10134,7601,7094,5067],[2005,726025,338811,129071,96803,82282,70989,59695,45175,32268],[2005,581802,431659,243982,243982,95716,82578,69441,52550,37536],[2005,51314,129998,41052,42078,20868,18474,10263,9237,8894],[2005,8718,22086,6974,7149,3546,3138,1744,1570,1511],[2005,17052,43198,13642,13982,6934,6138,3410,3070,2956],[2005,9686,14529,19371,29057,9686,4843,2906,1937,1743],[2005,5788,9406,14470,21705,7235,3618,2894,2170,2026],[2005,86,346,2418,1727,1036,864,691,518,432         ]]}, 
			
			],
			[
			 {year:2005,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,72014],[2334,6087,6087,1680,698,240,131,163,153,2182    ]]},

			],
			[
			{year:2005,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,102008,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:2005,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:2014,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:2013,data:[{name:'上海',value:90} ]}];


var qc = [{year:2014,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:2013,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)

最后,别忘了一键三连哦



版权声明:本文为anmu4200原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。