使用echarts简单制作省份地图

最新推荐文章于 2024-08-05 05:00:00 发布
最新推荐文章于 2024-08-05 05:00:00 发布
阅读量6.6w 收藏 23
点赞数 3
分类专栏： 插件 文章标签： echarts 省份
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012011360/article/details/52913972
版权
本文详细介绍了如何利用Echarts库轻松制作中国省份地图，包括数据加载、地图配置及个性化样式设定，助你快速实现数据可视化的省级分布展示。
摘要由CSDN通过智能技术生成 
引入echarts.min.js文件,http://echarts.baidu.com/download.html下载地址
引入对应省份的js文件   可以在http://echarts.baidu.com/download-map.html?qq-pf-to=pcqq.c2c生成省份的json格式文件,
然后再将其转化成henan.js文件
var  henanJson=下载的json数据:
 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>echarts图形插件使用</title>

</head>

<body>
<div id="main" style="height:800px;"></div>
<script type="text/JavaScript" src="js/echarts.min.js"></script>
<script type="text/JavaScript" src="js/henan.js"></script>
<script type="text/javascript">
        

                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  一天一天积累
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
ECharts3D地图  简单制作省份地图

				
			

			

				

					weixin_42486438的博客
				

				

					06-10
					
					6755
					
				

			

		

		

			
				
效果如下:

<!DOCTYPE html>
<html>
<head>
  <title>广东省3D</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <script src="js/echart...

			
		

	



                

              
                



	

		

			

				
					
echarts实现中国地图、鼠标悬浮、点击跳转对应省市、给省市图标、缩放、拖拽、自适应

				
			

			

				

					weixin_51225684的博客
				

				

					03-09
					
					1万+
					
				

			

		

		

			
				
【代码】echarts实现中国地图、鼠标悬浮、点击跳转对应省市、给省市图标、缩放、拖拽、自适应。

			
		

	



                


  
              

                


	

		

			

				
					
ECharts加载单独省份地图

				
			

			

				

					11-14
				

			

		

		

			
				
这个方法可以加载单个省份地图。ECharts官方不再提供矢量地图数据，详见 http://echarts.baidu.com/download-map.html。使用方法：运行nginx.exe，访问 http://localhost:9005/index.html 即可

			
		

	





	

		

			

				
					
Echarts 绘制地图（中国、省市、区县）

					
最新发布

				
			

			

				

					富朝阳的博客
				

				

					08-05
					
					5482
					
				

			

		

		

			
				
Echarts 绘制地图（中国、省市、区县）

			
		

	



		

			
		



	

		

			

				
					
Echarts — 绘制省级地图

				
			

			

				

					旧梦
				

				

					08-28
					
					3155
					
				

			

		

		

			
				
版本：vue@3.0.5 + echarts@5.1.2
本文将介绍如何使用 echarts 绘制一个省级地图（以江西省为例）

			
		

	





	

		

			

				
					
echarts实现省份地图

				
			

			

				

					weixin_43765747的博客
				

				

					12-21
					
					7551
					
				

			

		

		

			
				
以吉林省为例

1.下载json文件

首先获取文件，将省份对应的json文件下载下来放到项目文件中，建议放到public里，

2.引入echarts


import * as echarts from 'echarts'

3.准备dom容器


<div id="area"></div>

4.本地发起axios,需要npminstallaxios--saveaxios ，然后引入


import axios from 'axios'
import Vue f...

			
		

	





	

		

			

				
					
Echarts 绘制单独省份地图

					
热门推荐

				
			

			

				

					罗胖胖
				

				

					02-07
					
					3万+
					
				

			

		

		

			
				
1、 文档介绍


  采用node端http-server作为服务端，引用第三方插件Echarts


2、阅读对象


  本篇文章要求开发者熟悉 HTML、JavaScript、CSS、Echarts、Nodejs等开发技术


3、开发环境


  node v6.11.0 (win下载、Mac下载) 
  WebStorm 2017.3 (WebStorm )


4、开发实战

1、

			
		

	





	

		

			

				
					
echarts地图json数据，全国个省份主要城市经纬度数据文件

				
			

			

				

					06-21
				

			

		

		

			
				
ECharts 是一个基于 JavaScript 的开源可视化库，广泛用于制作各种数据图表。在 ECharts 中，地图图表（maps）是其重要功能之一，可以用来展示地理数据。本资源包含了一组 ECharts 地图数据文件，专门针对中国各省份...

			
		

	





	

		

			

				
					
下载Echarts地图资源包

				
			

			

				

					07-20
				

			

		

		

			
				
ECharts地图组件支持多种地图类型，包括省份地图、城市地图等，这在描述中的“Echarts全国各省市区地图JS/JSON文件下载”中得到了体现。JS文件通常包含了地图的渲染逻辑，而JSON文件则存储了地图的地理信息，如省份...

			
		

	





	

		

			

				
					
echarts全国和省级地图

				
			

			

				

					12-14
				

			

		

		

			
				
中国echarts地图数据与全国各省级echarts地图数据，包含了.js和.json

			
		

	





	

		

			

				
					
Echarts全国及各省份地图

				
			

			

				

					10-25
				

			

		

		

			
				
共享Echarts全国所有市地图的JSON文件。弥补官网不能下载的问题。

			
		

	





	

		

			

				
					
echarts全国及各省份地图

				
			

			

				

					01-04
				

			

		

		

			
				
echarts改版后的地图不符合标准暂时把地图下载的去掉了，只能支持百度地图结合。这样区域展示没那么好看。这是echarts的以前的图资源。

			
		

	





	

		

			

				
					
echarts数据地图实现省市联动点击

				
			

			

				

					09-21
				

			

		

		

			
				
一个echarts数据地图的案例，展示全国省市的数据，以及点击省份下钻到市级的数据展示效果。

			
		

	





	

		

			

				
					
echarts3中国省份地图json文件

				
			

			

				

					01-02
				

			

		

		

			
				
echarts3中国省份地图json文件,位置已修整，其中海南地图过小，使用时需要放大倍数，其它地图正常使用即可。

			
		

	





	

		

			

				
					
使用echarts制作全国地图实现点击选择其中一个省份获取省份值后点击空白处回到全国地图

				
			

			

				

					m0_53886762的博客
				

				

					11-24
					
					1501
					
				

			

		

		

			
				
echarts点击事件

			
		

	





	

		

			

				
					
npm login 或者 npm adduser 之后 遇见 Public registration is not allowed

				
			

			

				

					富朝阳的博客
				

				

					06-13
					
					1851
					
				

			

		

		

			
				
npm login 或者 npm adduser 之后 遇见 Public registration is not allowed

			
		

	





	

		

			

				
					
使用Echarts绘制省份地图源码

				
			

			

				

					weixin_45351390的博客
				

				

					01-17
					
					1341
					
				

			

		

		

			
				
话不多说先上效果图

地图上的两条线是因为展示需要，按照左边绘制上去了,不要问地图颜色，可以修改…
进入正题，聊一聊实现过程，首先引入echarts.js和省份.js
	<head>
		<meta charset="utf-8" />
		<script src="../js/echarts.js"></script>
		<script s...

			
		

	





	

		

			

				
					
echarts 省份地图

				
			

			

				

					07-25
				

			

		

		

			
				
echarts 省份地图可以通过安装 echarts 包并引入相应的地图数据来实现。首先，你需要安装 echarts 包，可以使用 npm 命令进行安装，例如：npm i echarts --save-dev。然后，你需要引入 echarts 和相应的省份地图数据。你可以使用 import 语句将 echarts 引入你的项目，并使用 import 或 require 语句引入相应的省份地图数据。例如，你可以使用 import * as echarts from "echarts" 来引入 echarts，并使用 import jiangxi from '../assets/jiangxi.json' 来引入江西省的地图数据。接下来，你可以使用 echarts.init() 方法初始化 echarts 实例，并使用 setOption() 方法设置地图的配置选项。最后，你可以将 echarts 实例渲染到你的页面上，以显示省份地图。请注意，你需要自行下载并配置地图数据的路径，你可以在阿里云的数据可视化工具和阿里巴巴矢量图标库中获取相应的地图数据和图标。如果你还有其他问题，请随时私信我。\[1\]\[2\]\[3\]
#### 引用[.reference_title]
-  *1* *2* [Echarts — 绘制省级地图](https://blog.csdn.net/zouhai1/article/details/119972244)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
-  *3* [echarts省份地图制作](https://blog.csdn.net/m0_72603435/article/details/128040012)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 42

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值