使用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

準備一個繪製圖表的 具備寬高的 容器dommarkdown

<!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實例。echarts

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

建立一個配置項，將配置項經過實例的setOption方法傳入繪製圖表。dom

<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>
複製代碼