Javascript Echarts空气质量地图效果详解

我们要先把空气质量数据和地图数据结合起来:

地图数据有name这个属性

我们的不同城市空气质量也有name这个属性,这两个属性是一样的,都叫name,所以我们可以把他们关联起来:

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 }
    ]

接着我们要把空气质量数据配置到series中去:

最后再做一些效果配置:

完整代码:

<!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.js"></script>
  <script src="./lib/axios.js"></script>
</head>
<body>
  <div style="width: 600px; height: 400px;border: 1px solid lightblue;"></div>
  <script>
    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'))

    axios.get('./json/map/china.json').then(res => {
      console.log(res.data)
      echarts.registerMap('china', res.data)
      var option = {
        geo: {
          type: 'map',
          map: 'china',
          roam: true,
          label: {
            show: true
          }
        },
        series: [
          {
            data: airData, // 空气质量数据
            geoIndex: 0, // 将空气质量数据和第0个geo配置关联在一起
            type: 'map'
          }
        ],
        visualMap: {
          min: 0, // 最小值
          max: 300, // 最大值
          inRange: {
            color: ['pink', 'blue'] // 控制左下角和地图渐变颜色
          },
          calculable: true // 控制左下角滑块
        }
      }
      myCharts.setOption(option)
    })
  </script>
</body>
</html>

总结

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

时间: 2021-10-10

vue+echarts实现中国地图流动效果(步骤详解)

@vue+echarts实现中国地图流动效果 #话不多说看效果图 操作步骤: 执行命令:npm run echarts -s 并回车 看到这样的提示代表安装成功 PS:网络不好的情况建议用cnpm淘宝镜像(全局终端执行命令:npm i -g cnpm --registry=https://registry.npm.taobao.org) 下载china.js 链接: https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q 提取码: gjz4 引入 impo

vue中echarts引入中国地图的案例

如下所示: <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div> mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = document.getElementById('myChartChina'); var resizeM

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

目录 概述 注意事项 一. 使用方式 二. 实现步骤 初步实现代码 效果: geo常见配置 添加上面配置之后的效果图: 显示某一个省份(河南省) 效果 不同区域显示不同颜色 地图和散点图的结合 总结 概述 地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气.尤其是在大屏展示中更是扮演着必不可缺的角色 注意事项 一. 使用方式 1.百度地图API(高德地图API) 需要申请百度API 2.矢量地图 需要准备矢量地图数据 二. 实现步骤 1.ECharts最基本的代码结构 引

python用pyecharts实现地图数据可视化

有的时候,我们需要对不同国家或地区的某项指标进行比较,可简单通过直方图加以比较.但直方图在视觉上并不能很好突出地区间的差异,因此考虑地理可视化,通过地图上位置(地理位置)和颜色(颜色深浅代表数值差异)两个元素加以体现.在本文案例中,基于第三方库pyecharts,对中国各省2010-2019年的GDP进行绘制. 我们先来看看最终效果: 关于绘图数据 基于时间和截面两个维度,可把数据分为截面数据.时间序列及面板数据.在本文案例中,某一年各省的GDP属于截面数据,多年各省的GDP属于面板数据.因此,

vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总,也会有一些实时数据刷新,信息预警之类的.笔者在之前也做过一些大屏类的数据展示,但是由于都是一些图表类的,觉得没什么可说的,加之数据也都牵扯到公司,所以没有沉淀下来什么. 最近有朋友要做一个大屏,问了自己一个问题,自己也刚好做了一个简单的大屏数据展示

一篇文章搞定echarts地图轮播高亮

目录 前言 toDoList just do it 准备一个地图 保存实例备用 设置定时器轮播 加入鼠标事件 总结 前言 这两天忙着做公司的超级数据大屏,实在挤不出时间连续更文. 但是更文活动都坚持这么久了也不想停止更新,那我就分享一下在工作中经常用到的echarts地图轮播高亮吧. 技术栈用的是vue2.x 相信效果大家已经清楚了那我们就开干吧. toDoList 简单的准备一个地图 保存实例备用 设置定时器 设置鼠标移入移出事件 just do it 准备一个地图 首先准备一个简简单单的地图

一篇文章搞定JavaScript类型转换(面试常见)

为啥要说这个东西?一道面试题就给我去说它的动机. 题如下: var bool = new Boolean(false); if (bool) { alert('true'); } else { alert('false'); } 运行结果是true!!! 其实啥类型转换啊,操作符优先级啊,这些东西都是最最基本的.犀牛书上有详细的介绍.但我很少去翻犀牛书的前5章... 比如说优先级那块儿,很多书都教育我们,"不用去背诵优先级顺序,不确定的话,加括号就行了."平常我们写代码时也确实这么做的

一篇文章搞定Struts2的类型转换

前言 我们知道通过HTTP提交到后台的数据,都是字符串的形式,而我们需要的数据类型当然不只字符串类型一种.所以,我们需要类型转换!下面来看看详细的介绍吧. 一.类型转换的意义 所有的MVC框架,解决的都是表现层的解决方案,都需要收集用户请求参数,并把参数提供给控制器.但是,在Web应用中所有的请求参数都是字符串类型的,Java是强类型的语言,如何将字符串转换为Java类型,这是框架要解决的一个问题. 例如,一个注册页需要输入年龄.日期等.这时候就需要将日期.年龄字符串转换为相应类型. 二.Str

一篇文章搞定iOS的Cookie存取

Cookie简介 Cookie是在客户端存储服务器状态的一种机制,Web服务器可以通过Set-Cookie或者Set-Cookie2 HTTP头部设置Cookie. Cookie可以分为两类,会话Cookie和持久Cookie,会话Cookie是临时Cookie,当前会话结束(浏览器退出)时Cookie会被删除.持久Cookie会存储在用户的硬盘上,浏览器退出,然后重新启动后Cookie仍然存在.会话Cookie和持久Cookie的区别在于过期时间,如果设置了Discard参数(Cookie 版

一篇文章搞定Python操作文件与目录

前言 文件和目录操作是很常见的功能,这里做个简单的总结,包括注意事项和实际的实现代码,基本日常开发都够用了 目录操作 判断目录或是文件是否存在 os.path.exists(path) 判断是否是文件或是目录 # 如果文件或是目录不存在也会返回False os.path.isfile(path) os.path.isdir(path) 创建/删除目录 os.mkdir(path) os.rmdir(path) 得到当前的目录名称 os.path.split(dir_path)[1] 这个方法既简

一篇文章搞懂JavaScript正则表达式之方法

咱们来看看JavaScript中都有哪些操作正则的方法. RegExp RegExp 是正则表达式的构造函数. 使用构造函数创建正则表达式有多种写法: new RegExp('abc'); // /abc/ new RegExp('abc', 'gi'); // /abc/gi new RegExp(/abc/gi); // /abc/gi new RegExp(/abc/m, 'gi'); // /abc/gi 它接受两个参数:第一个参数是匹配模式,可以是字符串也可以是正则表达式:第二个参数是

一篇文章搞懂python的转义字符及用法

什么是转义字符 转义字符是一个计算机专业词汇.在计算机当中,我们可以写出123 ,也可以写出字母abcd,但有些字符我们无法手动书写,比如我们需要对字符进行换行处理,但不能写出来换行符,当然我们也看不见换行符.像这种情况,我们需要在字符中使用特殊字符时,就需要用到转义字符,在python里用反斜杠\转义字符. 在交互式解释器中,输出的字符串用引号引起来,特殊字符用反斜杠\转义.虽然可能和输入看上去不太一样,但是两个字符串是相等的. 在python里,转义字符\可以转义很多字符,比如\n表示换行,

一篇文章搞懂:词法作用域、动态作用域、回调函数及闭包

前言 把以前一直只限于知道,却不清晰理解的这几个概念完完整整地梳理了一番.内容参考自wiki页面,然后加上自己一些理解. 词法作用域和动态作用域 不管什么语言,我们总要学习作用域(或生命周期)的概念,比如常见的称呼:全局变量.包变量.模块变量.本地变量.局部变量等等.不管如何称呼这些作用域的范围,实现它们的目的都一样: (1)为了避免名称冲突; (2)为了限定变量的生命周期(本文以变量名说事,其它的名称在规则上是一样的). 但是不同语言的作用域规则不一样,虽然学个简单的基础就足够应用,因为我们有

python 一篇文章搞懂装饰器所有用法(建议收藏)

01. 装饰器语法糖 如果你接触 Python 有一段时间了的话,想必你对 @ 符号一定不陌生了,没错 @ 符号就是装饰器的语法糖. 它放在一个函数开始定义的地方,它就像一顶帽子一样戴在这个函数的头上.和这个函数绑定在一起.在我们调用这个函数的时候,第一件事并不是执行这个函数,而是将这个函数做为参数传入它头顶上这顶帽子,这顶帽子我们称之为装饰函数 或 装饰器. 你要问我装饰器可以实现什么功能?我只能说你的脑洞有多大,装饰器就有多强大. 装饰器的使用方法很固定: 先定义一个装饰函数(帽子)(也可以

一篇文章搞懂Python的类与对象名称空间

代码块的分类 python中分几种代码块类型,它们都有自己的作用域,或者说名称空间: 文件或模块整体是一个代码块,名称空间为全局范围 函数代码块,名称空间为函数自身范围,是本地作用域,在全局范围的内层 函数内部可嵌套函数,嵌套函数有更内一层的名称空间 类代码块,名称空间为类自身 类中可定义函数,类中的函数有自己的名称空间,在类的内层 类的实例对象有自己的名称空间,和类的名称空间独立 类可继承父类,可以链接至父类名称空间 正是这一层层隔离又连接的名称空间将变量.类.对象.函数等等都组织起来,使得它

一篇文章带你搞定SpringBoot中的热部署devtools方法

一.前期配置 创建项目时,需要加入 DevTools 依赖 二.测试使用 (1)建立 HelloController @RestController public class HelloController { @GetMapping("/hello") public String hello(){ return "hello devtools"; } } 对其进行修改:然后不用重新运行,重新构建即可:只加载变化的类 三.热部署的原理 Spring Boot 中热部