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

时间 2019-11-08

标签使用 echarts 实现简单地图标注效果繁體版

原文原文链接

前言

经过一个简单的案例但愿可以帮助像我同样刚接触echarts地图开发面对文档众多配置项不知道从哪下手的同窗。html

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

预览

开始

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

新建html，引入 echarts.min.jsapache

<!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就好，案例使用中国地图。bash

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

<!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实例。dom

<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>
复制代码