ECharts 實現地圖散點圖（上）

ECharts發表於2017-03-20
Echarts地圖

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

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

一、初始準備

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官網 下載最新完整開發包。

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

<!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：

<!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 。你也可以根據需要選擇其他省份地圖或世界地圖

好了，準備工作完成，現在就開始繪製地圖了~

二、繪製地圖

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);

      });
});複製程式碼

現在就可以在頁面中看到中國地圖了：

ECharts 實現地圖散點圖（上）

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

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

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

換裝後的地圖：

ECharts 實現地圖散點圖（上）

三、繪製散點圖

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資料內容
        }
    ]
}複製程式碼

資料新增完成，就可以在圖表中看到渲染出的散點了：

ECharts 實現地圖散點圖（上）

3.新增視覺對映元件

視覺對映元件是標識某一資料範圍內資料及顏色對應關係的控制元件，視覺對映元件分為連續型和分段型，這裡我們選用連續型 type:continuous 。同時，通過視覺對映元件可以實現 ECharts 值域漫遊功能，即通過拖拽控制元件手柄選擇不同數值範圍，達到對圖表資料的篩選顯示。 在 visualMap 屬性中設定值域控制元件的相關配置：

var option = {
    ...

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

新增了值域控制元件的圖表效果：

ECharts 實現地圖散點圖（上）

這樣一個基於中國地圖的散點圖就基本實現了，如果想要繼續完善圖表，可以為它新增標題，圖例，高亮提示等控制元件，配置方式在這裡檢視（ECharts 配置項手冊），在此不再詳細說明。

歡迎關注我們的官方微博，以及微信公眾號(查詢BaiduECharts或掃描下方二維碼)，以便獲取最新的ECharts諮詢

ECharts 實現地圖散點圖（上）

相關文章