2019独角兽企业重金招聘Python工程师标准>>>

1.效果

2. 功能

2.1 准备环境

（1） 搭建完整的ssm项目

（2） 导入juery.js 及echarts.js

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
          <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
          <script type="text/javascript" src="js/echarts.js"></script>
    </head>
    <body>
         <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 2000px;height:1000px;"  align="right"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
      //--------------------------------------------开始---------------------------------------------------------------------------
                          var uploadedDataURL = "json/shanxi.json";//陕西省地图json 使用下面的方法进行下载相关地区的json  然后调用

//这地图还是有很多不完整的，只能算个简单的地图demo,适合刚接触地图的萌新吧~需要就看看吧
                        //下面是各个省份的地址 需要的话可以下载，用法是http://gallery.echartsjs.com/+后面的url,就可以下载了
                        //我一开也不知道的，乱搞就弄出来了，哈哈请叫我雷锋,就这样啦
                        /*
                        '上海': '/asset/get/s/data-1482909900836-H1BC_1WHg.json',
                        '河北': '/asset/get/s/data-1482909799572-Hkgu_yWSg.json',
                        '山西': '/asset/get/s/data-1482909909703-SyCA_JbSg.json',
                        '内蒙古': '/asset/get/s/data-1482909841923-rkqqdyZSe.json',
                        '辽宁': '/asset/get/s/data-1482909836074-rJV9O1-Hg.json',
                        '吉林': '/asset/get/s/data-1482909832739-rJ-cdy-Hx.json',
                        '黑龙江': '/asset/get/s/data-1482909803892-Hy4__J-Sx.json',
                        '江苏': '/asset/get/s/data-1482909823260-HkDtOJZBx.json',
                        '浙江': '/asset/get/s/data-1482909960637-rkZMYkZBx.json',
                        '安徽': 'http://gallery.echartsjs.com/asset/get/s/data-1482909768458-HJlU_yWBe.json',
                        '福建': '/asset/get/s/data-1478782908884-B1H6yezWe.json',
                        '江西': '/asset/get/s/data-1482909827542-r12YOJWHe.json',
                        '山东': '/asset/get/s/data-1482909892121-BJ3auk-Se.json',
                        '河南': '/asset/get/s/data-1482909807135-SJPudkWre.json',
                        '湖北': '/asset/get/s/data-1482909813213-Hy6u_kbrl.json',
                        '湖南': '/asset/get/s/data-1482909818685-H17FOkZSl.json',
                        '广东': '/asset/get/s/data-1482909784051-BJgwuy-Sl.json',
                        '广西': '/asset/get/s/data-1482909787648-SyEPuJbSg.json',
                        '海南': '/asset/get/s/data-1482909796480-H12P_J-Bg.json',
                        '四川': '/asset/get/s/data-1482909931094-H17eKk-rg.json',
                        '贵州': '/asset/get/s/data-1482909791334-Bkwvd1bBe.json',
                        '云南': '/asset/get/s/data-1482909957601-HkA-FyWSx.json',
                        '西藏': '/asset/get/s/data-1482927407942-SkOV6Qbrl.json',
                        '陕西': '/asset/get/s/data-1508990012125-SyVBnCCab.json',
                        '甘肃': '/asset/get/s/data-1482909780863-r1aIdyWHl.json',
                        '青海': '/asset/get/s/data-1482909853618-B1IiOyZSl.json',
                        '宁夏': '/asset/get/s/data-1482909848690-HJWiuy-Bg.json',
                        '新疆': '/asset/get/s/data-1482909952731-B1YZKkbBx.json',
                        '北京': '/asset/get/s/data-1482818963027-Hko9SKJrg.json',
                        '天津': '/asset/get/s/data-1482909944620-r1-WKyWHg.json',
                        '重庆': '/asset/get/s/data-1482909775470-HJDIdk-Se.json',
                        '香港': '/asset/get/s/data-1461584707906-r1hSmtsx.json',
                        '澳门': '/asset/get/s/data-1482909771696-ByVIdJWBx.json'
                        */
                        //这个地图区域字体位置设置无效，不知道什么缘故，有大佬的话可以设置下哈哈哈
                        function city_hlj(){
                            var name = 'hlj';
                            myChart.showLoading();//数据没加载前加个loading状态
                            $.get(uploadedDataURL, function(geoJson) {
                                
                                myChart.hideLoading();//关闭loading
                                 echarts.registerMap(name, geoJson);//注册地图插件
                                 //发送ajax加载需要展示的数据
                                   var url="${pageContext.request.contextPath }/queryShanXiEveryAreaIncome.action";    
                                    var data="";//无参数的写法
                                    //var flag="1";
                                    //var flag2="16";
                                    //var data={"flag":flag,"flag2":flag2}//多参数 用逗号隔开
                                    $.post(url,data,function(result){
                                            console.log(result)
                                            
                                            myChart.setOption(
                                                    option = {
                                                        title: {
                                                            text: "陕西省地图",
                                                            left: 'center',
                                                             top: '5%',//设置文字举例上面的举例
                                                            textStyle: {
                                                                color: '#fff'
                                                            }
                                                        },
                                                        
                                                        backgroundColor: '#0c1564',
                                                        tooltip: {//显示每个地区数据
                                                            trigger: 'item',
                                                            formatter: function(params){
                                                                if(typeof(params.value)[2] == 'undefined'){
                                                                    return params.name + ' : ' + params.value;
                                                                }else{
                                                                    return params.name + ' : ' + params.value[2];
                                                                }
                                                            }
                                                        },
                                                        series: [
                                                            {
                                                                type: 'map',
                                                                mapType: name,
                                                                left:"30%",
                                                                top:"10%",
                                                                selectedMode: 'single',//单选地图
                                                                roam: false,//禁止缩放
                                                                mapLocation: {//地图位置
                                                                    width: '19%'//地图的宽度
                                                                },
                                                                itemStyle: {
                                                                    normal: {
                                                                        label: {
                                                                            show: true,
                                                                            textStyle: {
                                                                                color: '#f4e925'
                                                                            }
                                                                        },
                                                                        borderColor: '#3fdaff',//边界线颜色
                                                                        borderWidth: 2,//边界线大小
                                                                        shadowColor: 'rgba(63,218,255,0.5)',
                                                                        shadowBlur: 30,
                                                                        areaColor: 'transparent'//地区背景颜色
                                                                    },
                                                                    emphasis: {//选中或者悬浮状态
                                                                        label: {
                                                                            show: true,
                                                                            textStyle: {
                                                                                color: '#fff'//选中或者悬浮字体颜色
                                                                            }
                                                                        },
                                                                        areaColor: '#2b91b7'//选中或者悬浮区域颜色
                                                                    }
                                                                },
                                                                data: result,
                                                                animation: false
                                                            }
                                                        ]
                                                    }
                                                );
                                    },"json");
                                 
                            });
                        };
                        city_hlj();
          
                //--------------------------------------------结束---------------------------------------------------------------------------

// 使用刚指定的配置项和数据显示图表。
       // myChart.setOption(option);
    </script>

</body>
</html>

后台返回的数据格式是：

3.代码

码云：

https://gitee.com/Luck_Me/echarts_map/tree/master

百度云：

链接：https://pan.baidu.com/s/16q1PsntAgLqDLbwZtq2fFw 
提取码：4fys

转载于:https://my.oschina.net/springMVCAndspring/blog/2995103

206. echarts的map地图入门案例相关推荐

  1. vue 引入json地图_vue中echarts引入中国地图的案例

    如下所示: mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = d ...

  2. 使用Echarts绘制geo地图（案例）

    使用Echarts绘制geo地图(案例) 项目使用@vue/cli 4.5.13以及echarts版本为5.1.2. 需求:在省份地图上,将数据进行分段映射.如图: 首先下载geojson数据 链接: ...

  3. Echarts在map地图上添加散点图

    Echarts在map地图上添加散点图 一.需求: 我们使用map地图画出区域后,有时需要标注一些点,就需要用到散点图了,而在series属性中,只能有一个type参数,这时该怎么办呢? 二.实现 我 ...

  4. vue echarts使用map地图 引入china.js报错Cannot read property ‘echarts’ of undefined

    下载china.js导入项目中引入,会报错Cannot read property 'echarts' of undefined import Echarts from "echarts&q ...

  5. Echarts之map地图隐藏港澳台等区域

    只是提供一种思路: china.js中找到echarts.registerMap('china', {中的"features"KEY值 形如: {"id": & ...

  6. uni-app 微信小程序中关于 map 地图使用案例分享

    这篇文章,我将带领大家使用微信内置地图详细讲解关于如何配置地图.打开地图和使用地图. 目录 1.配置地图 2.先写页面内,这里我创建了一个 map示例页面 mapDemo.vue 2.1 关于 map ...

  7. Java 百度地图入门 案例一

    实现效果: 随输入文字而变化进行智能搜索 以及 下方显示路线 代码: <html> <head><meta http-equiv="Content-Type&q ...

  8. echarts map地图数据Json制作教程

    首先来一个echarts map地图使用的教程(对应地图的数据包我的下载里有 echarts地图离线数据包 有需要的可以自行下载或在博客下留言我会单独发你) <!DOCTYPE html> ...

  9. echarts map 地图做出立体效果

    echarts map 地图做出立体效果 最近做项目,需要用到立体地图,但是立体地图上还需要很多其他效果,所以用了 map 平面地图 做出了立体效果. 想知道怎么弄的,扣1,欢迎来交流.

最新文章

  1. Java 增强型的for循环 for each
  2. C# 版本设计模式（Design Pattern）---------------总序
  3. win7系统锁定计算机设置方法
  4. linux-gzip压缩
  5. python实践作业_实践-python实现假设检验
  6. Java和线性代数的关系_高等数学，线性代数与计算机的关系？
  7. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了
  8. 文字处理技术：布局绘制的方向有哪些？
  9. 可视化在线编辑器架构设计
  10. 超级简单的自动刷新_输入名字，自动生成情侣头像~
  11. Verilog数字钟
  12. 学生综合素质评价系统c语言,学生综合素质评价表自我评价范文(2)
  13. 苹果或将采用高通屏下指纹方案，5GiPhone基带由三星、高通共同提供...
  14. 迪克斯特拉（Dijkstra）算法之MATLAB实现
  15. spring security 3配置ACL时报java.lang.NoSuchMethodError: net.sf.ehcache.Cache.init
  16. 计算机术语表达因果,因果推断简介之五：因果图 (Causal Diagram)
  17. 钉钉webview配合uni-app无法通信，或找不到方法
  18. 若依RuoYi框架浅析——导读
  19. fluent meshing 和mesh模块案例分析对比
  20. 带你深度剖析《数据在内存中的存储》——C语言

热门文章

  1. 如何在css文件中使用本地ttf/woff/woff2字体？
  2. 马云称自己的成就无关科技与钱；任正非：外籍员工可当华为 CEO，但有条件；雅虎宣布逐步关闭雅虎群组网站 | EA周报...
  3. 红蓝对抗之常见网络安全事件研判、了解网络安全设备、Webshell入侵检测
  4. 【美】罗伯特•帕利亚里尼——《另外8小时》
  5. 基于百度AI和QT的景物识别系统
  6. android 自动唤醒解锁,Android-唤醒并解锁Devi
  7. ssm+vue学生网络作业管理系统java maven
  8. 大数据告诉你哪部电影最有影响力
  9. 滴滴社招三面（已拿offer）
  10. Git撤销对远程仓库的push 或 Git撤销对远程仓库的commit提交