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

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 //波紋アニメーションのスケールを設定します}
}

効果画像:

ここに画像の説明を挿入

要約する

この記事はこれで終わりです。この記事が皆さんのお役に立てば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue で echarts を使用してコンポーネントを視覚化する方法
  • Echarts をベースにした Vue でのドラッグデータ可視化機能の実装
  • Vue で Echarts 視覚化ライブラリを使用する完全なステップバイステップの記録
  • vue+echarts をベースにした大画面でデータ可視化を表示する方法の例
  • Vue Echarts は視覚的な世界地図のコード例を実装します
  • JavaScript Echart 視覚化学習

<<:  MySQLステートメントの記述と実行順序を理解するだけです

>>:  DockerでSpringbootプロジェクトを実行する方法

推薦する

MySQL ユーザーのホスト属性を素早く変更する方法

MySQL にリモートでログインする場合、使用するアカウントには特別な要件があります。アカウントのデ...

レスポンシブ Web をデザインするにはどうすればいいですか?レスポンシブウェブデザインのメリットとデメリット

最近レスポンシブ デザインについて学んでいて、これについていくつか整理してみました。写真の一部はイン...

htmlハイパーリンクaのクリックイベントの後、hrefで指定されたアドレスにジャンプします。

場合によっては、ジャンプを完了するために href の代わりにハイパーリンク <a> を...

CSS 極座標のサンプルコード

序文このプロジェクトには、衛星測位用のグラフィックスを含むチャートの要件があり、北半球または南半球の...

UbuntuにMySQLデータベースをインストールする方法

Ubuntu は、Linux をベースにした無料のオープンソース デスクトップ PC オペレーティン...

Mysql 8.0.17 winx64バージョンのインストール中に発生した問題を解決する

1. my.iniファイルを手動で作成して追加する # クライアントセクション # --------...

jQuery+swiper コンポーネントはタイムラインのスライド年タブ切り替え効果を実現します

結果: 実装コード: スワイパーコンポーネントと一緒に使用する必要がありますSwiper 基本デモア...

Dockerバッチコンテナオーケストレーションの実装

導入Dockerfile ビルドの実行は、単一のコンテナの手動操作です。マイクロサービス アーキテク...

Vue の高度な構築プロパティの詳細な説明

目次1. ディレクティブカスタムディレクティブ2. ミックスイン3. 継承を拡張する4. 提供して注...

Docker で Java 8 Spring Boot アプリケーションを開発する方法

この記事では、ローカル マシンに Java 8 をインストールせずに、Java 8 を使用して簡単な...

ウェブページの画像最適化ツールと使用方法のヒントの共有

ウェブページの基本要素として、画像はページの読み込み速度に影響を与える重要な要素の 1 つです。画像...

Hadoop 3.2.0 クラスターの構築に関する一般的な考慮事項

1つのポートの変更バージョン 3.2.0 では、ネームノード ページ ポートは 9870、データノー...

シンプルなカレンダー効果を実現する js

この記事では、シンプルなカレンダー効果を実現するためのjsの具体的なコードを参考までに共有します。具...