echarts|Echarts空气质量地图效果
我们要先把空气质量数据和地图数据结合起来：
地图数据有name这个属性
文章图片
我们的不同城市空气质量也有name这个属性，这两个属性是一样的，都叫name，所以我们可以把他们关联起来：
var airData = https://www.it610.com/article/[
{
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 }
]
【echarts|Echarts空气质量地图效果】接着我们要把空气质量数据配置到series中去：
文章图片
最后再做一些效果配置：
文章图片
文章图片
完整代码：
地图-不同城市空气质量 - 锐客网
src="https://www.it610.com/article/lib/echarts.js">
src="https://www.it610.com/article/lib/axios.js">
>
var airData = https://www.it610.com/article/[
{
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)
})
推荐阅读
- 开始你的第一个Echarts图表（分享自知乎网）
- echarts插件-从后台请求的数据在页面显示空白的问题
- Pyecharts|Pyecharts 猎聘招聘数据可视化
- 可视化图形制作之关系图
- pyecharts可视化大屏
- Echarts 学习
- 我是如何控制1000|我是如何控制1000 个 Echarts 实例同时渲染 最大并发的
- 数据转pdf（包含echarts图表）
- Vue传数据到ECharts时，数据响应式更新了，但地图没渲染（？？）
- 【JS 逆向百例】某空气质量监测平台无限 debugger 以及数据动态加密