数据可视化-echarts地图

矢量地图的实现步骤

echarts最基本的代码结构：
引入js文件，DOM容器，初始化对象，设置option
准备中国的矢量地图json文件，放到json/map/的目录下
china.json
json文件下载地址：DataV.GeoAtlas地理小工具系列 (aliyun.com)
使用Ajax获取china.json

1.$.get('./json/map/china.json',(chinaJson)=>{ })

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

1. echarts.registerMap('chinaMap',chinaJson)

在geo下设置

type:'map',
map:'chinaMap'

常用配置

缩放拖动 roam

roam:true

名称显示 label

label: {show: true
}

初始缩放比例 zoom

zoom: 1.2

地图中心点 center

示例代码：

常见效果

显示某个区域：

加载该区域的矢量地图数据
通过registerMap注册到echarts全局对象中
指明geo配置下的type和map属性
通过zoom放大该区域
通过center定位中心点

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>echarts地图常见效果</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="lib/echarts.js"></script>
</head>
<body><!-- 步骤2：准备一个呈现图标的盒子 --><div style="width: 1000px; height: 600px; border:1px solid red;"></div><script>let mCharts = echarts.init(document.querySelector('div'));$.get('./json/map/shanxi.json',(chinaJson)=>{console.log(chinaJson);echarts.registerMap('chinaMap',chinaJson)let option = {geo: {type: 'map',map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致roam: true, // 设置允许缩放以及拖动的效果label: {show: true  //展示标签},zoom: 1.2, //设置初始化的缩放比例//center: [87.617733,43.792818] //设置地图中心点的坐标 （图为将新疆设置为地图中心点）}}mCharts.setOption(option)})</script>
</body>
</html>

不同城市颜色不同

1.显示基本的中国地图
2.城市的空气质量数据设置给series
3.将series下的数据和geo关联起来
4.结合visualMap配合使用

示例代码如下：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>echarts地图</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="lib/echarts.js"></script>
</head>
<body><!-- 步骤2：准备一个呈现图标的盒子 --><div style="width: 1000px; height: 600px; border:1px solid red;"></div><script>let mCharts = echarts.init(document.querySelector('div'));let airData = [{name:'北京市',value:39.93},{name:'天津市',value:39.13},{name:'河北省',value:147},{name:'山西省',value:39},{name:'内蒙古自治区',value:58},{name:'辽宁省',value:50},{name:'吉林省',value:51},{name:'黑龙江省',value:114},{name:'上海市',value:31.23},{name:'江苏省',value:67},{name:'浙江省',value:84},{name:'安徽省',value:117},{name:'福建省',value:29},{name:'江西省',value:96},{name:'山东省',value:92},{name:'河南省',value:113},{name:'湖北省',value:273},{name:'湖南省',value:175},{name:'广东省',value:38},{name:'广西壮族自治区',value:59},{name:'海南省',value:54},{name:'重庆市',value:66},{name:'四川省',value:58},{name:'贵州省',value:71},{name:'云南省',value:25},{name:'西藏自治区',value:24},{name:'陕西省',value:61},{name:'甘肃省',value:99},{name:'青海省',value:57},{name:'宁夏回族自治区',value:52},{name:'新疆维吾尔自治区',value:84},{name:'台湾省',value:88},{name:'香港特别行政区',value:66},{name:'澳门特别行政区',value:77},]$.get('./json/map/china.json',(chinaJson)=>{console.log(chinaJson);echarts.registerMap('chinaMap',chinaJson)let option = {geo: {type: 'map',map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致roam: true, // 设置允许缩放以及拖动的效果label: {show: true  //展示标签},zoom: 1.2, //设置初始化的缩放比例},series: [{data: airData,geoIndex: 0,  //将空气质量的数据和第0个geo配置关联在一起type:'map',}],visualMap:{min:0,max:300,inRange:{color:['white', 'red'], //控制颜色渐变的范围},calculable: true //出现滑块}}mCharts.setOption(option)})</script>
</body>
</html>

地图和散点图结合

1.给series下增加新的对象
2.准备好散点数据，设置给新对象的data （坐标信息）
3.配置新对象的type
type: effectScatter
4.让散点图使用地图坐标系统
coordinateSystem:'geo'
5.让涟漪的效果增加明显
rippleEffect:{
scale: 10
}

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>echarts地图</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="lib/echarts.js"></script>
</head>
<body><!-- 步骤2：准备一个呈现图标的盒子 --><div style="width: 1000px; height: 600px; border:1px solid red;"></div><script>let mCharts = echarts.init(document.querySelector('div'));let scatterData = [{value: [112.549248, 37.857014]},{value:[117.283042, 31.86119]}]let airData = [{name:'北京市',value:39.93},{name:'天津市',value:39.13},{name:'河北省',value:147},{name:'山西省',value:39},{name:'内蒙古自治区',value:58},{name:'辽宁省',value:50},{name:'吉林省',value:51},{name:'黑龙江省',value:114},{name:'上海市',value:31.23},{name:'江苏省',value:67},{name:'浙江省',value:84},{name:'安徽省',value:117},{name:'福建省',value:29},{name:'江西省',value:96},{name:'山东省',value:92},{name:'河南省',value:113},{name:'湖北省',value:273},{name:'湖南省',value:175},{name:'广东省',value:38},{name:'广西壮族自治区',value:59},{name:'海南省',value:54},{name:'重庆市',value:66},{name:'四川省',value:58},{name:'贵州省',value:71},{name:'云南省',value:25},{name:'西藏自治区',value:24},{name:'陕西省',value:61},{name:'甘肃省',value:99},{name:'青海省',value:57},{name:'宁夏回族自治区',value:52},{name:'新疆维吾尔自治区',value:84},{name:'台湾省',value:88},{name:'香港特别行政区',value:66},{name:'澳门特别行政区',value:77},]$.get('./json/map/china.json',(chinaJson)=>{console.log(chinaJson);echarts.registerMap('chinaMap',chinaJson)let option = {geo: {type: 'map',map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致roam: true, // 设置允许缩放以及拖动的效果label: {show: true  //展示标签},zoom: 1.2, //设置初始化的缩放比例},series: [{data: airData,geoIndex: 0,  //将空气质量的数据和第0个geo配置关联在一起type:'map',},{type: 'effectScatter',data: scatterData, //配置散点的坐标数据coordinateSystem:'geo', //指明散点使用的坐标系统  geo的坐标系统rippleEffect:{scale: 10}}],visualMap:{min:0,max:300,inRange:{color:['white', 'red'], //控制颜色渐变的范围},calculable: true //出现滑块}}mCharts.setOption(option)})</script>
</body>
</html>

地图特点

地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异

数据可视化-echarts地图相关推荐

Echarts数据可视化series-map地图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
Echarts数据可视化echarts实例的相关操作，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...
echarts 折线图设置y轴最小刻度_数据可视化—Echarts图表应用
<错误>郑愁予我打江南走过, 那等在季节里的容颜如莲花的开落,东风不来,三月的柳絮不飞.你的心如小小寂寞的城,恰若青石的街道向晚.蛩音不响,三月的春帷不揭,你的心是小小的窗扉紧掩.我达达 ...
数据可视化Echarts使用
github地址:https://github.com/minmin233/LearnEcharts 学习目的可视化面板布局适配屏幕利用Echarts实现柱状图,折线图,饼状图,地图展示数据可视 ...
Django博客来访人员地域分布大数据可视化---echarts绘图、geoip2获取地理位置
文章目录 Django博客来访人员地域分布大数据可视化---echarts绘图.geoip2获取地理位置效果 echarts作图 geoip2获取地理位置 api接口开发 ajax前后端动态交互 D ...
数据可视化ECharts的七大常用图表，看完就会用(1)
本文的后半部分:数据可视化ECharts的常用图表,看完就会用(2) 文章目录数据可视化什么是数据可视化? 数据可视化的好处数据可视化的实现方式 ECharts ECharts的特性一个ECh ...
数据分析---疫情数据可视化（地图）
数据分析---疫情数据可视化(地图) 安装pyecharts库爬取所需要的数据(网上直接爬取数据) 绘制全国地图绘制省份地图(以湖北省为例) 在全国地图上加入湖北省数据导入数据(本地导入数据) ...
H5数据可视化(高德地图绘制行政区)
1.高德地图可视化项目搭建参考我的上篇文章完成基本搭建:H5数据可视化(高德地图构建项目) 2.使用高德行政区查询该部分主要参照官方教程即可,其中使用行政区划查询服务前要先引入该插件,具体的引入方 ...