Echarts实现全国数据统计，并可以点击省份查看城市数据

ゝ一世哀愁。 2021-11-09 17:54 360阅读 0赞

## Echarts实现全国数据统计，并可以点击省份查看城市数据 ##

# 准备: #

1.所需js

<script type="text/javascript" data-th-src="@{/echarts/4.2.0-rc.2/echarts.min.js}"></script>
    <script type="text/javascript" data-th-src="@{/js/china.js}"></script>

2.前端代码

<div class="box">
    	
    	<div class="box-header">
    		<h3 class="box-title">全国数据统计</h3>
    	</div>
    	<div id="china_div" class="col-md-12" style="height:600px;"></div>
    	
    </div>

3.js代码

function initChina(){ 
    	var splitList = [{ start: 400, end:500},
    	                 { start: 300, end: 400},
    	                 { start: 200, end: 300},
    	                 { start: 100, end: 200},
    	                 { start: 0, end: 100}];
    	
    		var mydata = [  
                 { name: '北京',value: '100' },{ name: '天津',value: randomData() },  
                 { name: '上海',value: randomData() },{ name: '重庆',value: randomData() },  
                 { name: '河北',value: randomData() },{ name: '河南',value: randomData() },  
                 { name: '云南',value: randomData() },{ name: '辽宁',value: randomData() },  
                 { name: '黑龙江',value: randomData() },{ name: '湖南',value: randomData() },  
                 { name: '安徽',value: randomData() },{ name: '山东',value: randomData() },  
                 { name: '新疆',value: randomData() },{ name: '江苏',value: randomData() },  
                 { name: '浙江',value: randomData() },{ name: '江西',value: randomData() },  
                 { name: '湖北',value: randomData() },{ name: '广西',value: randomData() },  
                 { name: '甘肃',value: randomData() },{ name: '山西',value: randomData() },  
                 { name: '内蒙古',value: randomData() },{ name: '陕西',value: randomData() },  
                 { name: '吉林',value: randomData() },{ name: '福建',value: randomData() },  
                 { name: '贵州',value: randomData() },{ name: '广东',value: randomData() },  
                 { name: '青海',value: randomData() },{ name: '西藏',value: randomData() },  
                 { name: '四川',value: randomData() },{ name: '宁夏',value: randomData() },  
                 { name: '海南',value: randomData() },{ name: '台湾',value: randomData() },  
                 { name: '香港',value: randomData() },{ name: '澳门',value: randomData() }  
             ]; 
    		var mydata1 = [
    						{ name: '珠海市',value:randomData()},
    						{ name: '广州市',value: randomData()},
    						{ name: '中山市',value:randomData()},
    						{ name: '佛山市',value: randomData()},
    						{ name: '清远市',value:randomData()},
    						{ name: '梅州市',value: randomData()},
    						{ name: '汕头市',value:randomData()},
    						{ name: '东莞市',value: randomData()},
    						{ name: '惠州市',value:randomData()},
    						{ name: '深圳市',value: randomData()}
    		              ];
    		var optionMap = {   
    	            backgroundColor: '#FFFFFF',  
    	            tooltip : { 
    	                trigger: 'item'  
    	            },  
    	            //左侧小导航图标
    	            visualMap: { 
    	                left: 'left',
    	                top: 'top',
    	                splitList:splitList,
    	                color: ['red', '#9feaa5', '#85daef','#74e2ca', '#e6ac53'],
    	                show:true
    	            },
    	            //配置属性
    	            series: [{   
    	                name: '量级',  
    	                type: 'map',  
    	                mapType: 'china', // 地图类型，支持world，china及全国34个省市自治区 
    	                roam: false,  // 是否开启滚轮缩放和拖拽漫游,默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
    	                label: {   
    	                    normal: {   
    	                        show: true  //省份名称 
    	                    },  
    	                    emphasis: {   
    	                        show: false  
    	                    }  
    	                },
    	                data:mydata  //数据
    	            }] 
    	        }; 
    		
    		//初始化echarts实例
    	    var myChart = echarts.init(document.getElementById('china_div'));
    // //使用制定的配置项和数据显示图表
    	    myChart.setOption(optionMap);
    	    
    	    myChart.on('click', function (params) { 
    	    	goProvince(myChart,params,splitList,mydata1,optionMap);
    	    });
    	  	
    }
    
    //渲染城市地图
    function goProvince(myChart,params,splitList,mydata1,optionMap){ 
    	$.getJSON('js/Province/' + (params.name) + '.js', function (geoJson) { 
    		myChart.hideLoading();
    		echarts.registerMap((params.name), geoJson);
    		var option = { 
    	            backgroundColor: '#FFFFFF',  
    	            tooltip : { 
    	                trigger: 'item'  
    	            },  
    	            //左侧小导航图标
    	            visualMap: { 
    	                left: 'left',
    	                top: 'top',
    	                splitList:splitList,
    	                color: ['red', '#9feaa5', '#85daef','#74e2ca', '#e6ac53'],
    	                show:true
    	            },
    	            //配置属性
    	            series: [{   
    	                name: '量级',  
    	                type: 'map',  
    	                mapType: (params.name), // 地图类型，支持world，china及全国34个省市自治区，例如：河北、北京 
    	                roam: false,  // 是否开启滚轮缩放和拖拽漫游,默认为false（关闭），其他有效输入为true（开启），'scale'（仅开启滚轮缩放），'move'（仅开启拖拽漫游）
    	                label: {   
    	                    normal: {   
    	                        show: true  //省份名称 
    	                    },  
    	                    emphasis: {   
    	                        show: false  
    	                    }  
    	                },
    	                data:mydata1  //数据
    	            }] 
    	        };
    		//使用制定的配置项和数据显示图表
    	    myChart.setOption(option);
    		//点击城市返回全国地图
    	    myChart.on('click', function (params) { 
    	    	myChart.setOption(optionMap);
    	    });
    	});
    }
    	
    	
    function randomData() {   
        return Math.round(Math.random()*500);  
    }

--------------------

### 效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pY2hfb2xhcw_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pY2hfb2xhcw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pY2hfb2xhcw_size_16_color_FFFFFF_t_70]: /images/20211109/5d824d20f4124da0b372d0297ca0d541.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pY2hfb2xhcw_size_16_color_FFFFFF_t_70 1]: /images/20211109/3a09b31b167946da8323717e44e4014f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，360人围观）

还没有评论，来说两句吧...

相关阅读

相关全国各省城市数据带经纬度-共3750 行-全部城市

下载地址： [https://www.wuzhixiang.cn/index.php/2020/02/28/citys/][https_www.wuzhixiang.cn_i

忘是亡心i/ 2023年07月09日 06:29/ 0 赞/ 3 阅读

相关使用echarts制作全国主要城市空气质量图

<!DOCTYPE html> <html style="height: 100%"> <head> <meta chars

浅浅的花香味﹌/ 2022年12月25日 09:55/ 0 赞/ 375 阅读

相关 react hooks（dva） echarts 实现中国地图省份数据分布显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6eE9u

﹏ヽ暗。殇╰゛Y/ 2022年12月13日 14:17/ 0 赞/ 221 阅读

相关 echarts实现省份迁徙图

一、实现效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

深碍√TFBOYSˉ_/ 2022年09月07日 12:09/ 0 赞/ 261 阅读

相关全国省份简称（备用）

北京市京北京浙江省浙杭州天津市津天津安徽省皖合肥上海市沪上海福建省闽福州重庆市渝重庆江西省赣南昌

深碍√TFBOYSˉ_/ 2022年07月12日 15:21/ 0 赞/ 242 阅读

相关 java实现根据城市查出省份

最近做的项目需要统计各省数据情况。但从三方拉去的数据时统计市的，这里就需要将同一个省的市合并在一起。在网上收到个简单的工具类。所有城市（不确定是否有遗漏）：

r囧r小猫/ 2022年04月05日 13:26/ 0 赞/ 288 阅读

相关全国所有城市数据字母排序字符串数组

按照字母先后排序 public static final String[] MyCity = { "A","阿坝","阿拉善","阿里

矫情吗；*/ 2022年01月26日 09:19/ 0 赞/ 278 阅读

相关 js省份城市初始化

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] var provinceObj = docume

我不是女神ヾ/ 2022年01月13日 11:43/ 0 赞/ 280 阅读

相关 Echarts实现全国数据统计，并可以点击省份查看城市数据

Echarts实现全国数据统计，并可以点击省份查看城市数据准备: 1.所需js <script type="text/javascript" data-

ゝ一世哀愁。/ 2021年11月09日 17:54/ 0 赞/ 361 阅读

相关 echarts 地图(区域渐变等)、地图和散点图结合、点击省份进入省份地图(双击切换回来)

(1)地图: 1、下载矢量地图.json文件 2、请求.json文件 var map=await axios.get('.

布满荆棘的人生/ 2021年07月24日 22:22/ 0 赞/ 483 阅读