JavaScript によるデータ視覚化: ECharts マップの作成

概要

地図は、日常的なデータ視覚化分析において非常に一般的な表示手段です。地図は美しいだけでなく、壮大でもあります。特に大画面ディスプレイでは欠かせない役割を果たす

予防

1. 使用方法

1. 百度地図API（オートナビ地図API）

Baidu APIを申請する必要がある

2. ベクターマップ

ベクターマップデータを準備する必要がある

2. 実装手順

1. EChartsの最も基本的なコード構造

js ファイルのインポート – DOM コンテナ – オブジェクトの初期化 – オプションの設定

2. 中国のベクトル地図のjsonファイルを準備し、json/map/ディレクトリに配置します。

3. Ajaxを使用してchina.jsonを取得する

//
$get('json/map/china.json',関数(chinaJson) {})

4. コールバック関数でマップのJSONデータをechartsグローバルオブジェクトに登録します。

echarts.registerMap('chinaMap',chinaJson)

5. ジオの下に設定

{
    タイプ: 'マップ',
    地図:'中国地図'
}

予備実装コード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>マップの実装</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<本文>
    <div スタイル="幅:600px;高さ:400px;"></div>
    <スクリプト>
        var myCharts = echarts.init(document.querySelector('div'))
        $.get('./json/map/china.json', 関数(chinaJson) {
            // chinaJson は中国の各省のベクター マップ データです // console.log(chinaJson);
            // マップデータを登録echarts.registerMap('chinaMap',chinaJson)
            var オプション = {
                地理:{
                    タイプ: 'マップ'、
                    //chinaMap は registerMapmap の最初のパラメータ「chinaMap」と一致している必要があります
                }
            }
            myCharts.setOption(オプション)
        })
    </スクリプト>
</本文>
</html>

返されたデータ chinaJson は、ブラウザの背景にスクリーンショットを出力します。

ここに画像の説明を挿入

省を拡大して見てみましょう（台湾省を例に挙げます）。

ここに画像の説明を挿入

効果：

ここに画像の説明を挿入

Geo共通設定

ズームやドラッグ効果が可能

ローミング: 真

名前の表示

ラベル{
表示:true
}

初期ズーム比

ズーム: 1.2

地図の中心点の座標を設定する

// この座標点は返されるデータから取得できます
中心: [121.509062, 25.044332]

上記の構成を追加した後の効果図:

ここに画像の説明を挿入

省を表示（河南省）

ここでは特に言うことはありません。ベクターマップデータを元の全国から河南省に変更するだけです。

追記：クアン・ゲは河南省出身なので、河南省を例に挙げました

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>特定エリアの地図表示</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<本文>
    <div スタイル="幅:600px;高さ:400px;"></div>
    <スクリプト>
        var myCharts = echarts.init(document.querySelector('div'))
        $.get('json/map/henan.json',(ret) => {
            echarts.registerMap('henanMap', ret)
            コンソールにログ出力します。
            var オプション = {
                地理:{
                    タイプ: 'マップ',
                    マップ:'henanMap',
                    ズーム: 1,
                    ラベル: {
                        表示: 真
                    },
                    中心: [115.650497, 34.437054],
                    ローミング: 真
                }
            }
            myCharts.setOption(オプション)
        })
    </スクリプト>
</本文>
</html>

効果

ここに画像の説明を挿入

エリアによって表示される色が異なる

1. 中国の基本地図を表示する

2. 空気質データをシリーズ下のオブジェクトに設定する

3. シリーズのデータを地理情報に関連付ける

4. visualMapを構成する

注: ここでは、オブジェクトを含む配列を準備する必要があります。各オブジェクトには 2 つのキー値があります。name は州名に対応し、value は色の値に対応します。

まず、効果図を見て、見覚えがあるかどうかを確認します。

ここに画像の説明を挿入

これは当社のCOVID-19データチャートと似ています。流行はまだ終わっていません。誰もが軽視せず、積極的にワクチン接種を受け、日常の予防をしっかり行う必要があります。

コードは以下の通りで、コメントはかなり詳しいので一つ一つ説明はしません。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>マップの実装</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
</head>
<本文>
    <div スタイル="幅:600px;高さ:400px;"></div>
    <スクリプト>
        /**
         * 1. 中国の基本地図を表示する * 2. 空気質データをシリーズ下のオブジェクトに設定する * 3. シリーズ下のデータを地理に関連付ける * 4. visualMap を構成する
         */
        var エアデータ = [
            { 名前: '北京'、値: 39.92 },
            { 名前: '天津'、値: 39.13 },
            { 名前: '上海'、値: 31.22 },
            { 名前: '重慶'、値: 66 },
            { 名前: '河北'、値: 147 },
            { 名前: '河南'、値: 113 },
            { 名前: '雲南'、値: 25.04 },
            { 名前: '遼寧省'、値: 50 },
            { 名前: '黒龍江省'、値: 114 },
            { 名前: '湖南'、値: 175 },
            { 名前: '安徽省'、値: 117 },
            { 名前: '山東'、値: 92 },
            { 名前: '新疆'、値: 84 },
            { 名前: '江蘇省'、値: 67 },
            { 名前: '浙江省'、値: 84 },
            { 名前: '江西'、値: 96 },
            { 名前: '湖北省'、値: 273 },
            { 名前: '広西'、値: 59 },
            { 名前: '甘粛'、値: 99 },
            { 名前: '山西'、値: 39 },
            { 名前: '内モンゴル', 値: 58 },
            { 名前: '陝西省'、値: 61 },
            { 名前: '吉林'、値: 51 },
            { 名前: '福建省'、値: 29 },
            { 名前: '貴州省'、値: 71 },
            { 名前: '広東省'、値: 38 },
            { 名前: '青海'、値: 57 },
            { 名前: 'チベット'、値: 24 },
            { 名前: '四川省'、値: 58 },
            { 名前: '寧夏'、値: 52 },
            { 名前: '海南'、値: 54 },
            { 名前: '台湾'、値: 88 },
            { 名前: '香港'、値: 66 },
            { 名前: 'マカオ'、値: 77 },
            { 名前: '南シナ海諸島'、値: 55 }
        ]
        var myCharts = echarts.init(document.querySelector('div'))
        $.get('./json/map/china.json', 関数(chinaJson) {
            echarts.registerMap('chinaMap',chinaJson)
            var オプション = {
                地理:{
                    タイプ: 'マップ'、
                    //chinaMap は registerMapmap の最初のパラメータ「chinaMap」と一致している必要があります。
                    // ズームとドラッグ効果を許可する roam: true,
                    // 名前表示ラベル:{
                        表示: 真
                    }
                },
                シリーズ： [
                    {
                        タイプ: 'マップ'、
                        データ: airData、
                        geoIndex: 0 // 空気質データを 0 番目の geo の構成に関連付けます}
                ]、
                ビジュアルマップ:
                    最小: 0,
                    最大: 300、
                    範囲内: {
                        // カラーグラデーションの範囲を制御します color: ['#fff', '#f00']
                    },
                    // スライダーが計算可能かどうか: true
                }
            }
            myCharts.setOption(オプション)
        })
    </スクリプト>
</本文>
</html>

地図と散布図の組み合わせ

1. 上記のコードに基づいて、次の設定をシリーズに追加します

{
     data: scatterData, //散布点の座標データを設定します type: 'effectScatter',
     coordinateSystem: 'geo', // 散布点が使用する座標系を指定します。geo の座標系 rippleEffect: {
          scale: 10 //波紋アニメーションのスケールを設定します}
}

効果画像:

ここに画像の説明を挿入