ECharts 實現地圖散點圖（上）

時間 2019-11-09

標籤 echarts 實現地圖散點圖简体版

原文原文鏈接

做者介紹：ECharts團隊，歡迎關注ECharts在掘金的專欄，咱們會按期推送ECharts及數據可視化相關的諮詢及文章。ECharts是國內最優秀的前端開源產品之一，在Github上有超過一萬五千的star，在數據可視化領域已經耕耘多年javascript

ECharts 做爲國內應用最普遍的前端可視化生成工具，提供了豐富的圖表展示方式和便捷的圖表操做。 ECharts 支持 geoJson 格式的地圖，而且官網上提供了現成的 world，china 及全國34個省市自治區地圖的下載。這篇文章中咱們將會講解如何使用 ECharts 實現一箇中國地圖上繪製的散點圖。html

1、初始準備

1. 新建html

首先，新建項目目錄 echartsMapDemo，在其中新建一個 html 文件 index.html。
echartsMapDemo/index.html:前端

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>ECharts map Demo</title> </head> <body> </body> </html>複製代碼

2.引入echarts文件

從 echarts官網下載最新完整開發包。java

將下載好的包放置在 echartsMapDemo/dep 目錄下並在 html 中以 script 標籤引入：jquery

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>ECharts map Demo</title> </head> <body> </body> <script src="/dep/echarts.min.js"></script> </html>複製代碼

3.建立圖標容器

在 html 中定義一個 div 做爲地圖的容器，高度設爲 500px 。別忘了，必定要保證容器高度不爲 0：json

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>ECharts map Demo</title> </head> <body> <div id="map-wrap" style="height: 500px;"> <!-- 這裏之後是地圖 --> </div> </body> <script src="/dep/echarts.min.js"></script> </html>複製代碼

而後，咱們還須要一個地圖文件，echart 提供兩種格式的地圖數據，一種是 js 格式，一種是 JSON 格式。下文中咱們會分別使用這兩種方式實現。數組

一樣去官網上下載，這裏選擇下載中國地圖 china.js 或 china.json 。你也能夠根據須要選擇其餘省份地圖或世界地圖微信

好了，準備工做完成，如今就開始繪製地圖了~echarts

2、繪製地圖

echart 提供兩種格式的地圖數據，一種是 js 格式，一種是 JSON 格式。下面分別介紹兩種格式的用法：異步

引用js格式地圖數據：

1.在官網上下載 js 格式中國地圖 china.js，將下載好的 china.js 放在 echartsMapDemo/map/js 目錄下，以 script 標籤引入到 html 中:

<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>ECharts map Demo</title> </head> <body> <div id="map-wrap" style="height: 500px;"> <!-- 這裏之後是地圖 --> </div> </body> <script src="/dep/echarts.min.js"></script> <script src="/map/js/china.js"></script> </html>複製代碼

2.在js中用 echarts.init() 方法初始化一個 ECharts 實例，在 init() 中傳入圖表容器 Dom 對象。

同時定義一個變量 option，做爲圖表的配置項：

// 初始化echarts示例mapChart
var mapChart = echarts.init(document.getElementById('map-wrap'));

// mapChart的配置
var option = {

};複製代碼

3.經過配置 option，新建一個地理座標系 geo ，地圖類型爲中國地圖。

var option = {
    geo: {
          map: 'china'
      }
}複製代碼

geo.map 屬性定義該地理座標系中的地圖數據，這裏咱們要用 china.js ，設置map值爲 ‘china’。

這裏須要注意，中國地圖的map值爲 ‘china’ ，世界地圖的map值爲 ‘world’ ，但若是要引用省市自治區地圖 map 值爲簡體中文，例如 beijing.js，map 值爲’北京’。

4.調用 setOption(option) 爲圖表設置配置項。

mapChart.setOption(option);複製代碼

引用JSON格式地圖數據：

1.一樣在官網下載JSON格式的地圖數據，放在echartsMapDemo/map/json目錄下

2.json數據經過異步方式加載，加載完成後須要手動註冊地圖

這裏咱們使用 jQuery 的 $.get() 方法異步加載 china.json （首先要在html中引用 jquery ，這裏省略操做說明），在回調函數中，以上述一樣的方法初始化一個 mapCharts 、註冊地圖並設置 option：

$.get('map/json/china.json', function (chinaJson) {

        echarts.registerMap('china', chinaJson); // 註冊地圖

        var mapChart = echarts.init(document.getElementById('map-wrap'));

          var option = {
              geo: {
                  map: 'china'
              }
          }

              mapChart.setOption(option);

      });
});複製代碼

如今就能夠在頁面中看到中國地圖了：

爲了突出散點效果，先爲地圖改個顏色

var option = {
    geo: {
        map: 'china',

        itemStyle: {                    // 定義樣式
            normal: {                    // 普通狀態下的樣式
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {                    // 高亮狀態下的樣式
                areaColor: '#2a333d'
            }
        }
    },
    backgroundColor: '#404a59',          // 圖表背景色
}複製代碼

換裝後的地圖：

3、繪製散點圖

1.新建散點圖`series`

在 option 中添加一個 series ， series 的類型爲散點圖 scatter ，座標系爲地理座標系 geo 。

var option = {
    geo: {
          ...
      },
    backgroundColor: '#404a59',

    series: [
        {
            name: '銷量', // series名稱
            type: 'scatter', // series圖表類型
            coordinateSystem: 'geo' // series座標系類型
        }
    ]
}複製代碼

2.添加數據

ECharts 中 series.data 是定義圖表數據內容的數組，其中每一個項數據格式爲：

{
    name: '北京',    // 數據項名稱，在這裏指地區名稱

    value: [        // 數據項值
        116.46,     // 地理座標，經度
        39.92,      // 地理座標，緯度
        340         // 北京地區的數值
    ]
}複製代碼

首先咱們將須要渲染的數據轉換成上述數據格式，存在一個變量中：

var myData = [

    {name: '海門', value: [121.15, 31.89, 90]},
      {name: '鄂爾多斯', value: [109.781327, 39.608266, 120]},
      {name: '招遠', value: [120.38, 37.35, 142]},
    {name: '舟山', value: [122.207216, 29.985295, 123]},
      ...
]複製代碼

而後，將 myData 賦值給 series.data：

var option = {
    geo: {
          ...
      },
      backgroundColor: '#404a59',
    series: [
        {
            name: '銷量',
            type: 'scatter',
            coordinateSystem: 'geo',

            data: myData // series數據內容
        }
    ]
}複製代碼

數據添加完成，就能夠在圖表中看到渲染出的散點了：

3.添加視覺映射組件

視覺映射組件是標識某一數據範圍內數據及顏色對應關係的控件，視覺映射組件分爲連續型和分段型，這裏咱們選用連續型 type:continuous 。同時，經過視覺映射組件能夠實現 ECharts 值域漫遊功能，即經過拖拽控件手柄選擇不一樣數值範圍，達到對圖表數據的篩選顯示。在 visualMap 屬性中設置值域控件的相關配置：

var option = {
    ...

    visualMap: {
        type: 'continuous', // 連續型
        min: 0,               // 值域最小值，必須參數
        max: 200,            // 值域最大值，必須參數
        calculable: true,    // 是否啓用值域漫遊
        inRange: {
                 color: ['#50a3ba','#eac736','#d94e5d']
                             // 指定數值從低到高時的顏色變化
          },
        textStyle: {
            color: '#fff'    // 值域控件的文本顏色
        }
         }
}複製代碼