JavaScript数据可视化:ECharts制作地图

2024-12-08 15:34:36

概述

地图在我们日常的数据可视化分析中是很常见的一种展示手段，不仅美观而且很大气。尤其是在大屏展示中更是扮演着必不可缺的角色

注意事项

一. 使用方式

1.百度地图API（高德地图API）

需要申请百度API

2.矢量地图

需要准备矢量地图数据

二. 实现步骤

1.ECharts最基本的代码结构

引入js文件–DOM容器–初始化对象–设置option

2.准备中国的矢量地图json文件，放到json/map/的目录下

3.使用Ajax获取china.json

//
$get('json/map/china.json',function (chinaJson) {})

4.在回调函数中往echarts全局对象注册地图的json数据

echarts.registerMap('chinaMap',chinaJson)

5.在geo下设置

{
    type:'map',
    map:'chinaMap'
}

初步实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图的实现</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<body>
    <div style="width:600px;height:400px;"></div>
    <script>
        var myCharts = echarts.init(document.querySelector('div'))
        $.get('./json/map/china.json', function (chinaJson) {
            // chinaJson 就是中国的各个省份的矢量地图数据
            // console.log(chinaJson);
            // 注册地图数据
            echarts.registerMap('chinaMap',chinaJson)
            var option = {
                geo:{
                    type: 'map',
                    //chinaMap需要和registerMap中的第一个参数保持一致
                    map: 'chinaMap'
                }
            }
            myCharts.setOption(option)
        })
    </script>
</body>
</html>

返回数据chinaJson在浏览器后台输出截图：

我们展开某一省份看一下（以台湾省为例）：

效果：

geo常见配置

允许缩放和拖拽效果

roam: true

名称显示

label{
show:true
}

初始缩放比例

zoom: 1.2

设置地图中心点的坐标

// 这个坐标点在我们返回的数据里是可以拿到的
center: [121.509062, 25.044332]

添加上面配置之后的效果图：

显示某一个省份（河南省）

这里没什么好说的，就是把矢量地图数据由原来的全国换成河南就好

PS：款哥是河南的，所以用了河南省举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图-某一区域的展示</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<body>
    <div style="width:600px;height:400px;"></div>
    <script>
        var myCharts = echarts.init(document.querySelector('div'))
        $.get('json/map/henan.json',(ret) => {
            echarts.registerMap('henanMap', ret)
            console.log(ret);
            var option = {
                geo:{
                    type:'map',
                    map:'henanMap',
                    zoom: 1,
                    label: {
                        show: true
                    },
                    center: [115.650497, 34.437054],
                    roam: true
                }
            }
            myCharts.setOption(option)
        })
    </script>
</body>
</html>

效果

不同区域显示不同颜色

1.显示基本的中国地图

2.将空气质量的数据设置给series下的对象

3.将series下的数据和geo关联起来

4.配置visualMap

注意：这里我们需要准备一个数组，这个数组里面是一个一个对象，每个对象有两个key值name对应省份名称，value对应的是颜色值

先看下效果图是不是很熟悉：

类似于我们的新冠数据图就是大致这个效果，疫情远没有结束，大家一定不要掉以轻心，积极接种疫苗，做好日常防护

代码如下，注释也比较详细，就不一一解读了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图的实现</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<body>
    <div style="width:600px;height:400px;"></div>
    <script>
        /**
         * 1.显示基本的中国地图
         * 2.将空气质量的数据设置给series下的对象
         * 3.将series下的数据和geo关联起来
         * 4.配置visualMap
         */
        var airData = [
            { name: '北京', value: 39.92 },
            { name: '天津', value: 39.13 },
            { name: '上海', value: 31.22 },
            { name: '重庆', value: 66 },
            { name: '河北', value: 147 },
            { name: '河南', value: 113 },
            { name: '云南', value: 25.04 },
            { name: '辽宁', value: 50 },
            { name: '黑龙江', value: 114 },
            { name: '湖南', value: 175 },
            { name: '安徽', value: 117 },
            { name: '山东', value: 92 },
            { name: '新疆', value: 84 },
            { name: '江苏', value: 67 },
            { name: '浙江', value: 84 },
            { name: '江西', value: 96 },
            { name: '湖北', value: 273 },
            { name: '广西', value: 59 },
            { name: '甘肃', value: 99 },
            { name: '山西', value: 39 },
            { name: '内蒙古', value: 58 },
            { name: '陕西', value: 61 },
            { name: '吉林', value: 51 },
            { name: '福建', value: 29 },
            { name: '贵州', value: 71 },
            { name: '广东', value: 38 },
            { name: '青海', value: 57 },
            { name: '西藏', value: 24 },
            { name: '四川', value: 58 },
            { name: '宁夏', value: 52 },
            { name: '海南', value: 54 },
            { name: '台湾', value: 88 },
            { name: '香港', value: 66 },
            { name: '澳门', value: 77 },
            { name: '南海诸岛', value: 55 }
        ]
        var myCharts = echarts.init(document.querySelector('div'))
        $.get('./json/map/china.json', function (chinaJson) {
            echarts.registerMap('chinaMap',chinaJson)
            var option = {
                geo:{
                    type: 'map',
                    //chinaMap需要和registerMap中的第一个参数保持一致
                    map: 'chinaMap',
                    // 允许缩放和拖拽效果
                    roam: true,
                    // 名称显示
                    label:{
                        show: true
                    }
                },
                series: [
                    {
                        type: 'map',
                        data: airData,
                        geoIndex: 0 //将空气质量的数据与第0个geo的配置关联起来
                    }
                ],
                visualMap: {
                    min: 0,
                    max: 300,
                    inRange: {
                        // 控制颜色渐变的范围
                        color: ['#fff', '#f00']
                    },
                    // 出现滑块
                    calculable: true
                }
            }
            myCharts.setOption(option)
        })
    </script>
</body>
</html>

地图和散点图的结合

1.就是给上面的代码基础上，series添加下面这段配置

{
     data: scatterData,  //配置散点的坐标数据
     type: 'effectScatter',
     coordinateSystem: 'geo', //指明散点使用的坐标系统  geo的坐标系统
     rippleEffect: {
          scale: 10  //设置涟漪动画的缩放比例
     }
}

效果图：

总结

本片文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

JavaScript中类型的强制转换与隐式转换详解

目录一.隐式转换双等号里的转换 Boolean 类型转换 "+" 与 "-" 二.强制类型转换 new String 与 ' ' 总结一.隐式转换以下语句的执行结果是什么? A. undefined == null B. isNaN("100") C. parseInt("1a") === 1 D. [ ] instanceof Array 答案: A. undefined == null 为 true: undefi
详解JavaScript中Arguments对象用途

目录前言 Arguments 的基本概念 Arguments 的作用获取实参和形参的个数修改实参值改变实参的个数检测参数合法性函数的参数个数不确定时,用于访问调用函数的实参值遍历或访问实参的值总结在实际开发中,Arguments 对象非常有用.灵活使用 Arguments 对象,可以提升使用函数的灵活性,增强函数在抽象编程中的适应能力和纠错能力. JavaScript 中 Arguments 对象的用途总结. 前言相信我们很多人在代码开发的过程中都使用到过一个特殊的对象 --
JavaScript CollectGarbage函数案例详解

首先看一个内存释放的实例: <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> CollectGarbage,是IE的一个特有属性,用
超详细的JavaScript基本语法规则

目录 01 JavaScript (简称:js) js分三个部分: JavaScript是什么? js的代码可以分三个地方写: 02 操作符操作符:一些符号-----用来计算关系运算符: 关系运算表达式: 逻辑运算符: 逻辑运算表达式: 03 JS变量变量名的注意问题-变量名的命名: 04 JS变量作用 05 JS变量的交换使用第三方的变量进行交换第二种方式交换:一般适用于数字的交换 06 注释注释的方式: 07 JS的数据类型值类型(基本类型): 引用数据类型: 08 JS的数字
JavaScript es6中var、let以及const三者区别案例详解

首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展. 2011 年,ECMAScript 5.1 版发布.之前我们大部分人用的也就是ES5 2015 年 6 月,ECM
JavaScript setTimeout与setTimeinterval使用案例详解

这两个方法都可以用来在固定的时间段后去执行一段javascirpt代码,不过两者各有各的应用场景. 实际上,setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码. 不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码. 虽然表面上看来setTimeout只能应用在on-
JavaScript实现通过滑块改变网页颜色

大家好,今天我在看web前端的HTML时,看到input标签的type属性是range时在页面上显示的是一个滑块,我突发奇想能不能通过滑来改变网页的颜色.现在我和大家分享一下通过滑块来改变网页的颜色. 首先要知道怎么样来表示颜色,颜色的表示有四种方式: 1.用颜色的名称来表示颜色:red,green...等 2.用#加16进制数表示:#FF0000/#F00 红色.#00FF00/#0F0 绿色 ...等 3.用rgb值:rgb(0,0,0) 黑色.rgb(255,255,255) 白色....
JavaScript定时器实现限时秒杀功能

本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码,供大家参考,具体内容如下文件index.html 代码: <!DOCTYPE html> <html> <head> <meta charset="GBK" /> <title>show</title> <link rel="stylesheet" href="css/index.css" type=
JavaScript中BOM和DOM详解

目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作鼠标事件键盘事件触屏事件特殊事件表单事件浏览器兼容处理兼容性写法,封装工具 BOM(浏览器对象模型)
JavaScript 中this指向问题案例详解

总结全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数全局环境无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window
JavaScript对象(详细)

目录 JavaScript对象 1.定义 2.对象的分类 3.定义对象 4.访问对象中的属性 5.给对象添加属性 6.删除对象属性 7.Object根构造函数 8.对象属性的检测 9.引用传递和值传递 10.对象的序列化(把对象变为字符串) 11.增强for循环(for in) JavaScript对象 1.定义对象是引用数据类型,是保存复杂数据类型的容器,它是多个属性(数据)和方法(功能)的集合它允许动态的添加和删除属性 2.对象的分类 (1)内建对象由ES标准中定义的对象,在任何的ES
JavaScript函数之call、apply以及bind方法案例详解

总结 1.相同点都能够改变目标函数执行时内部 this 的指向方法的第一个参数用于指定函数执行时内部的 this 值支持向目标函数传递任意个参数若不向方法的第一个参数传值或者传递 undefined.null,则在 JavaScript 正常模式下,目标函数内部的 this 指向 window 对象,严格模式下,分别指向 undefined.null. 2.区别 apply() 方法可接收两个参数,而 call() 和 bind() 方法则可接收多个参数. apply() 方法向目标函数
JavaScript实现限时秒杀功能

本文实例为大家分享了JavaScript实现限时秒杀功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="box"> <div id="d"><