Echarts空气质量地图效果

最新推荐文章于 2025-05-29 09:09:49 发布

原创

最新推荐文章于 2025-05-29 09:09:49 发布 · 3.2k 阅读

45 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #html

该博客展示了一段使用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: '山西', value