使用echarts实现简单的地图标注效果

21,152 阅读8分钟

前言

通过一个简单的案例希望能够帮助像我一样刚接触echarts地图开发面对文档众多配置项不知道从哪下手的同学。

案例包括使用charts地理坐标系组件(geo)绘制地图,通过带有涟漪特效动画的散点图(effectScatter)进行标注,进行简单的样式修改,并且实现根据数据的值显示不同的颜色,鼠标移动触发提示框,自定义提示框,点击跳转等常见需求。

预览

开始

下载echarts:github地址
复制dist目录下的 echarts.min.js 文件

新建html,引入 echarts.min.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>地图标注</title>
</head>
<body>


  <script src="./echarts.min.js"></script>
</body>
</html>

如果是绘制一般的柱状图,折线图,只要引入echarts就够了,绘制地图还需要引入一个地图文件。

到/map/js/ 目录下复制 china.js 并引入,可以看到这个目录下还有世界地图,各省地图的js,需要画哪个地图从这里引入相应js就好,案例使用中国地图。


准备一个绘制图表的 具有宽高的 容器dom

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>地图标注</title>
</head>
<body>
  <div id="china" style="width: 900px; height: 600px">

  </div>

  <script src="./echarts.min.js"></script>
  <script src="./china.js"></script>
</body>
</html>

获取dom,将dom传入echarts的init方法初始化echarts实例。

  <script>
    var china = document.getElementById('china');
    var chinaMap = echarts.init(china);
  </script>

创建一个配置项,将配置项通过实例的setOption方法传入绘制图表。

  <script>
    var china = document.getElementById('china');
    var chinaMap = echarts.init(china);

    var option = {

    }

    chinaMap.setOption(option);
  </script>

这时候已经可以绘制图表了,当然配置项还是个空对象,所以页面上也不会显示任何内容,下面只要添加需要的配置项就行了。

配置标题并居中,这里遇到一个小坑一开始查看文档我以为居中是textAlign这个属性,试了以后才知道是left控制

var option = {
  title: {
    text: '中国空气质量',
    left: 'center'
  },
}

通过geo地理坐标系组件绘制地图。这里可以类比折现图,柱状图,画这些图需要一个载体就是直角坐标系,那在地图上展示数据的话geo就是这个长成地图模样的坐标系。所以要展示数据,先画载体坐标系。

var option = {
  title: {
    text: '中国空气质量',
    left: 'center'
  },
  
  geo: {
    map: 'china', // 地图选择china,对应引入的china.js
  },
}

此时地图已经出现,并且带有一些默认的效果

稍微对默认的样式做一点修改,取消鼠标滑过时的效果,改变区域的背景颜色和边框颜色

var option = {
  title: {
    text: '中国空气质量',
    left: 'center'
  },
  
  geo: {
    map: 'china',       
    silent: true,       // 禁止图形响应鼠标事件
    itemStyle: {
    color: '#004981',   // 背景颜色
    borderColor: 'rgb(54,192,118)'   // 边框颜色
    }
  },
}

接下来就可以在地图上进行标注,图表都是根据数据来绘制。直角坐标系中绘制图表需要x轴和y轴的值,在地图上就是经纬度了。
echarts数据的配置也就是图表的绘制,都在 series 这个配置项下,文档中详细的列出了每种图表的配置项,在这里地图上的标注点选用带涟漪效果的散点图(effectScatter)。

series 是一个数组,因为一个坐标系中可以展示好几组不同的数据绘制不同的图表,每一组通过一个对象,我们这里只有一组散点图。

var option = {
  title: {
    text: '中国空气质量',
    left: 'center'
  },
  
  geo: {
    map: 'china',       
    silent: true,       
    itemStyle: {
    color: '#004981',  
    borderColor: 'rgb(54,192,118)'   
    }
  },
  
  series: [
    {
      type: 'effectScatter',   //  指明图表类型:带涟漪效果的散点图
      coordinateSystem: 'geo', //  指明绘制在geo坐标系上
    }
  ]
}

图表的核心当然是要展示的数据,数据配置在series每一项的data属性中、在地图上,默认value的前两项为经纬度,第三项为其他数据,数据可以写成一个简单的数组形式,也可以是一个对象。

// 这种形式的data默认每一项经纬度
data: [
  [12,32],
  [43,23],
  [123,43]
]

我们这里除了经纬度还需要城市的名称和城市污染度情况,所以可以写成对象的形式,随便从网上找了三个城市的坐标。
图表会默认读取value的前两项作为经纬度坐标,所以可以看到小点已经出现在地图上。

var option = {
  title: {
    text: '中国空气质量',
    left: 'center'
  },
  
  geo: {
    map: 'china',       
    silent: true,      
    itemStyle: {
    color: '#004981',   
    borderColor: 'rgb(54,192,118)'   
    }
  },
  
  series: [
    {
      type: 'effectScatter',   
      coordinateSystem: 'geo',
      data: [
        {
          name: '上海',
          value: [121.47,31.23, 55]
        },
        {
          name: '北京',
          value: [116.40,39.90, 110]
        },
        {
          name: '重庆',
          value: [106.55,29.56, 32]    // value的前两项是经纬度坐标,第三项为污染度数据
        }
      ]
    }
  ]
}

添加提示框组件,实现鼠标移到标注点上时显示数据详情,通过tooltip配置项配置。

var option = {
  title: {
    text: '中国空气质量',
    left: 'center'
  },
  
  tooltip: {},  // 配置提示框
  
  geo: {
    map: 'china',       
    silent: true,       
    itemStyle: {
    color: '#004981',  
    borderColor: 'rgb(54,192,118)'  
    }
  },
  
  series: [
    {
      type: 'effectScatter',   
      coordinateSystem: 'geo',
      data: [
        {
          name: '上海',
          value: [121.47,31.23, 55]
        },
        {
          name: '北京',
          value: [116.40,39.90, 110]
        },
        {
          name: '重庆',
          value: [106.55,29.56, 32]   
        }
      ]
    }
  ]
}

可以看到只添加一个tooltip的空对象提示框已经生效了,但是显然数据显示的有问题,默认显示的是value中的第二项(纬度),不是我们真正需要的显示的第三项污染程度,同时提示框中还想添加一个自定义的跳转链接。 (这里有个小坑是,在echarts官网的两个类似的地图示例中,标注点的数据显示也为纬度而不是真正要显示的数据)

可以通过tooltip下的formatter来自定义提示框的内容,当formatter为函数时可以接收一个参数,从参数中可以拿到当前坐标点的信息

var option = {
  title: {
    text: '中国空气质量',
    left: 'center'
  },
  
  // 自定义提示框内容
  tooltip: {
    formatter: function(params) {
      var value = params.value;
      var a = '<br> <a href="http://www.baidu.com" style="color: red">查看详情</a>'
      return params.name + ': ' + value[2] + a;
    }  
  },
  
  geo: {
    map: 'china',       
    silent: true,       
    itemStyle: {
    color: '#004981',   
    borderColor: 'rgb(54,192,118)'   
    }
  },
  
  series: [
    {
      type: 'effectScatter',   
      coordinateSystem: 'geo',
      data: [
        {
          name: '上海',
          value: [121.47,31.23, 55]
        },
        {
          name: '北京',
          value: [116.40,39.90, 110]
        },
        {
          name: '重庆',
          value: [106.55,29.56, 32] 
        }
      ]
    }
  ]
}

此时提示框中就变成我们自定义的内容,不过尝试点击按钮会发现根本点不到,所以还需要给tooltip添加两项配置

var option = {
  title: {
    text: '中国空气质量',
    left: 'center'
  },
  
  tooltip: {
    alwaysShowContent: true,     // 提示框总是显示(不再是鼠标离开就消失)
    enterable: true,             // 允许提示框被点击
    formatter: function(params) {
      var value = params.value;
      var a = '<br> <a href="http://www.baidu.com" style="color: red">查看详情</a>'
      return params.name + ': ' + value[2] + a;
    }  
  },
  
  geo: {
    map: 'china',       
    silent: true,  
    itemStyle: {
    color: '#004981',   
    borderColor: 'rgb(54,192,118)'   
    }
  },
  
  series: [
    {
      type: 'effectScatter',   
      coordinateSystem: 'geo', 
      data: [
        {
          name: '上海',
          value: [121.47,31.23, 55]
        },
        {
          name: '北京',
          value: [116.40,39.90, 110]
        },
        {
          name: '重庆',
          value: [106.55,29.56, 32]   
        }
      ]
    }
  ]
}

此时数据显示正确,点击跳转功能也实现了,还差根据污染程度不同显示不同颜色的标注点,所以要再回到series对数据的配置项下。
itemStyle 可以配置每个数据的显示样式,color代表点的颜色,他类似上面提示框的formatter也可以写成一个函数,拿到每个数据的内容,只要根据不同的值返回不同的颜色值就可以了。

var option = {
  title: {
    text: '中国空气质量',
    left: 'center'
  },
  
  tooltip: {
    alwaysShowContent: true,
    enterable: true,             
    formatter: function(params) {
      var value = params.value;
      var a = '<br> <a href="http://www.baidu.com" style="color: red">查看详情</a>'
      return params.name + ': ' + value[2] + a;
    }  
  },
  
  geo: {
    map: 'china',       
    silent: true,  
    itemStyle: {
    color: '#004981',   
    borderColor: 'rgb(54,192,118)'   
    }
  },
  
  series: [
    {
      type: 'effectScatter',   
      coordinateSystem: 'geo',
      itemStyle: {                   // 配置每个数据点的样式
        color: function(params) {
          var color = '';
          var value = params.value;
          if(value[2] < 50) {
            color = 'green'
          }
          if(value[2] >= 50 && value[2] < 100) {
            color = 'yellow'
          }
          if(value[2] >= 100) {
            color = 'red'
          }
          return color;
        }
      },
      data: [
        {
          name: '上海',
          value: [121.47,31.23, 55]
        },
        {
          name: '北京',
          value: [116.40,39.90, 110]
        },
        {
          name: '重庆',
          value: [106.55,29.56, 32]   
        }
      ]
    }
  ]
}

完成

搞定,我也是刚使用echarts不久,如果有什么错误还望指出,最后附上完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>地图标注</title>
</head>

<body>
  <div id="china" style="width: 900px; height: 600px">

  </div>

  <script src="./echarts.min.js"></script>
  <script src="./china.js"></script>
  <script>
    var china = document.getElementById('china');
    var chinaMap = echarts.init(china);

    var option = {
      title: {
        text: '中国空气质量',
        left: 'center'
      },

      tooltip: {
        alwaysShowContent: true,
        enterable: true,
        formatter: function (params) {
          var value = params.value;
          var a = '<br> <a href="http://www.baidu.com" style="color: red">查看详情</a>'
          return params.name + ': ' + value[2] + a;
        }
      },

      geo: {
        map: 'china',
        silent: true,
        itemStyle: {
          color: '#004981',
          borderColor: 'rgb(54,192,118)'
        }
      },

      series: [{
        type: 'effectScatter',
        coordinateSystem: 'geo',
        itemStyle: {
          color: function (params) {
            var color = '';
            var value = params.value;
            if (value[2] < 50) {
              color = 'green'
            }
            if (value[2] >= 50 && value[2] < 100) {
              color = 'yellow'
            }
            if (value[2] >= 100) {
              color = 'red'
            }
            return color;
          }
        },
        data: [{
            name: '上海',
            value: [121.47, 31.23, 55]
          },
          {
            name: '北京',
            value: [116.40, 39.90, 110]
          },
          {
            name: '重庆',
            value: [106.55, 29.56, 32]
          }
        ]
      }]
    }

    chinaMap.setOption(option);
  </script>
</body>

</html>