Echarts笔记：全国主要城市空气质量地图

学习如何利用echarts 绘制地图。

分析echarts官网提供的全国主要城市空气质量地图的笔记。

原图地址

图如下：

代码：

var data = [{name: '海门', value: 9},{name: '鄂尔多斯', value: 12},{name: '舟山', value: 12},{name: '齐齐哈尔', value: 14},…… …… ……
];
var geoCoordMap = {'海门':[121.15,31.89],'鄂尔多斯':[109.781327,39.608266],'招远':[120.38,37.35],'舟山':[122.207216,29.985295],…… …… ……
};var convertData = function (data) {var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)});}}return res;
};option = {title: {text: '全国主要城市空气质量 - 百度地图',subtext: 'data from PM25.in',sublink: 'http://www.pm25.in',left: 'center'},tooltip : {trigger: 'item'},bmap: {center: [104.114129, 37.550339],zoom: 5,roam: true,mapStyle: {styleJson: [{'featureType': 'water','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'land','elementType': 'all','stylers': {'color': '#f3f3f3'}}, {'featureType': 'railway','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'highway','elementType': 'all','stylers': {'color': '#fdfdfd'}}, {'featureType': 'highway','elementType': 'labels','stylers': {'visibility': 'off'}}, {'featureType': 'arterial','elementType': 'geometry','stylers': {'color': '#fefefe'}}, {'featureType': 'arterial','elementType': 'geometry.fill','stylers': {'color': '#fefefe'}}, {'featureType': 'poi','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'green','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'subway','elementType': 'all','stylers': {'visibility': 'off'}}, {'featureType': 'manmade','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'local','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'arterial','elementType': 'labels','stylers': {'visibility': 'off'}}, {'featureType': 'boundary','elementType': 'all','stylers': {'color': '#fefefe'}}, {'featureType': 'building','elementType': 'all','stylers': {'color': '#d1d1d1'}}, {'featureType': 'label','elementType': 'labels.text.fill','stylers': {'color': '#999999'}}]}},series : [{name: 'pm2.5',type: 'scatter',coordinateSystem: 'bmap',data: convertData(data),symbolSize: function (val) {return val[2] / 10;},encode: {value: 2},label: {formatter: '{b}',position: 'right',show: false},emphasis: {label: {show: true}}},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'bmap',data: convertData(data.sort(function (a, b) {return b.value - a.value;}).slice(0, 6)),symbolSize: function (val) {return val[2] / 10;},encode: {value: 2},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {formatter: '{b}',position: 'right',show: true},itemStyle: {shadowBlur: 10,shadowColor: '#333'},zlevel: 1}]
};

分析：

1.data部分

存放数据：各个城市的空气质量。采用【 {name: 'XX', value:X} 】的格式。

2.geoCoordMap部分

存放在data里面出现过的城市的经纬度坐标。采用【' NAME':[XX,XX] 】。

3.convertData部分

功能是：把地点名称转化成为经纬度。对于每一个数据，可以得到“经纬度（新的name）+数据value”的新的data格式。

concat() 方法用于连接两个或多个数组。格式：string.concat(string1, string2, ..., stringX) 。

4.option-bmap部分

看英文基本能理解在干什么。感觉就在配置需要的格式。（而且这个在官网没有找到？）

5.option-series数据部分

这里有2部分①每一个城市的信息，使用 data: convertData(data) 数据。②Top5的城市有加了一层，删除这部分以后效果如图：

6.series-scatter. encode

定义 data 的哪个维度被编码成什么。

https://echarts.apache.org/zh/option.html#series-scatter.encode


// 在任何坐标系和系列中，都支持：
encode: {// 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示tooltip: ['product', 'score']// 使用第一个维度和第三个维度的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）seriesName: [1, 3],// 表示使用第二个维度中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。itemId: 2,// 指定数据项的名称使用第三个维度在饼图等图表中有用，可以使这个名字显示在图例（legend）中。itemName: 3
}// 直角坐标系（grid/cartesian）特有的属性：
encode: {// 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：x: [1, 5, 'score'],// 把“维度0”映射到 Y 轴。y: 0
}// 单轴（singleAxis）特有的属性：
encode: {single: 3
}// 极坐标系（polar）特有的属性：
encode: {radius: 3,angle: 2
}// 地理坐标系（geo）特有的属性：
encode: {lng: 3,lat: 2
}// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
encode: {value: 3
}

总结框架：

补充：

补充1：

想要找的很好的示例，除了官网在【示例】部分提供了一些地图的样式以外，在【资源-gallery】部分也有很多大神上传的成品。

补充2：

看到了一些资料：【百度在原本的经纬度上做了两次加密，这就导致了百度地图的坐标和其他地图的坐标稍微不同。百度api的官网上有解决方案。地址如下http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition&qq-pf-to=pcqq.c2c】

Echarts笔记：全国主要城市空气质量地图相关推荐

全国主要城市空气质量
效果: 代码: <!DOCTYPE html> <head> <meta charset="utf-8"> <title>全国城市空 ...
openlayer4加载echart3的地理位置scatter图-全国主要城市空气质量
在github上下载了ol3-Echarts-master,原数据是加载echart的迁徙图,我对作者的类进行了改造,编写了一个类EchartLayer,加载饼图.代码如下: 说明:没有用到偏移量的计 ...
全国主要城市空气质量热点图
from pyecharts import Geodata = [("海门", 9), ("鄂尔多斯", 12), ("招远", 12), ...
Echarts地图-全国主要城市空气质量
参考: Echarts官网实例效果: JSON数组: {"code":100,"msg":"处理成功!","extend&quo ...
vue整合Echarts 实例PM2.5全国主要城市空气质量百度地图
ECharts 之前提供下载的矢量地图数据来自第三方,由于部分数据不符合国家<测绘法>规定,目前暂时停止下载服务.建议大家使用以百度地图为底图的形式. 首先申请获取百度开发秘钥ak: ht ...
echarts3.8.4实现城市空气质量(结合百度地图bmap.js，小航哥)
(小航哥自己实现的)为了事先地图效果,需要以下准备: 用百度地图作为地图,需要 1.bmap.min.js(下载地址https://github.com/ecomfe/echarts ,GitHub上 ...
基于Python的2013-2018全国城市空气质量分析
基于Python的2013-2018全国城市空气质量分析项目摘要本项目使用pandas/numpy工具包对557424条空气质量数据进行导入及清洗,并使用matplotlib/seaborn/py ...
全国369个城市空气质量月度数据(2013-2021)
1.数据来源:https://www.aqistudy.cn/historydata/ 2.时间跨度:2013-2021年 3.区域范围:全国369个城市 4.指标说明: 该数据指标包括:日期.AQI ...
Echarts空气质量地图效果
我们要先把空气质量数据和地图数据结合起来: 地图数据有name这个属性我们的不同城市空气质量也有name这个属性,这两个属性是一样的,都叫name,所以我们可以把他们关联起来: var airDat ...

Echarts笔记：全国主要城市空气质量地图

代码：

分析：

总结框架：

补充：

Echarts笔记：全国主要城市空气质量地图相关推荐

最新文章

热门文章