Echarts空气质量地图效果

该博客展示了一段使用ECharts库结合地图数据,以可视化方式呈现中国各城市空气质量的代码示例。通过获取并注册地图数据,配置ECharts选项,包括设置地图类型、数据关联、视觉映射等,实现了地图上各城市的空气质量指数显示,并提供了视觉效果配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

地图数据有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: '山西',
Echarts是一个基于JavaScript的开源可视化库,支持多种图表类型的展示,包括地图。下面是一个简单的echarts+地图的例子: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <!-- 为 echarts 准备一个具备大小(宽高)的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '全国主要城市空气质量 - ECharts 入门示例' }, tooltip: { trigger: 'item' }, legend: { orient: 'vertical', left: 'left', data:['空气质量'] }, visualMap: { min: 0, max: 300, left: 'left', top: 'bottom', text: ['高','低'], // 文本,默认为数值文本 calculable: true }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, series: [ { name: '空气质量', type: 'map', mapType: 'china', roam: false, label: { normal: { show: true }, emphasis: { show: true } }, data:[ {name: '北京', value: 100}, {name: '天津', value: 80}, {name: '上海', value: 120}, {name: '重庆', value: 90}, {name: '河北', value: 50}, {name: '河南', value: 70}, {name: '云南', value: 80}, {name: '辽宁', value: 60}, {name: '黑龙江', value: 40}, {name: '湖南', value: 90}, {name: '安徽', value: 50}, {name: '山东', value: 80}, {name: '新疆', value: 70}, {name: '江苏', value: 90}, {name: '浙江', value: 100}, {name: '江西', value: 50}, {name: '湖北', value: 80}, {name: '广西', value: 70}, {name: '甘肃', value: 60}, {name: '山西', value: 50}, {name: '内蒙古', value: 60}, {name: '陕西', value: 80}, {name: '吉林', value: 50}, {name: '福建', value: 90}, {name: '贵州', value: 70}, {name: '广东', value: 100}, {name: '青海', value: 40}, {name: '西藏', value: 30}, {name: '四川', value: 90}, {name: '宁夏', value: 50}, {name: '海南', value: 80}, {name: '台湾', value: 1}, {name: '香港', value: 1}, {name: '澳门', value: 1} ] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 这个例子展示了如何使用echarts绘制一个中国地图,并在地图上展示各个城市的空气质量。你可以根据自己的需求修改数据和配置项,来实现自己的地图可视化效果
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值