Javascript Echarts 空気質マップ効果の詳細な説明

まず、空気質データと地図データを組み合わせる必要があります。

マップデータには属性名がある

ここに画像の説明を挿入

さまざまな都市の空気の質にも、名前属性があります。これら 2 つの属性は同じで、どちらも名前と呼ばれているため、関連付けることができます。

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 }
    ]

次に、空気質データをシリーズに設定する必要があります。

ここに画像の説明を挿入

最後に、エフェクトの設定を行います。

ここに画像の説明を挿入

完全なコード:

<!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.js"></script>
  <script src="./lib/axios.js"></script>
</head>
<本文>
  <div style="width: 600px; height: 400px;border: 1px solid lightblue;"></div>
  <スクリプト>
    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'))
    
    axios.get('./json/map/china.json').then(res => {
      コンソールログ(res.data)
      echarts.registerMap('中国', res.data)
      var オプション = {
        地理: {
          タイプ: 'マップ'、
          地図: '中国',
          ローミング: 本当、
          ラベル: {
            表示: 真
          }
        },
        シリーズ： [
          {
            data: airData, // 空気質データ geoIndex: 0, // 空気質データを 0 番目の地理構成に関連付けます type: 'map'
          }
        ]、
        ビジュアルマップ:
          min: 0, // 最小値 max: 300, // 最大値 inRange: {
            color: ['pink', 'blue'] // 左下隅とマップのグラデーションカラーを制御します},
          calculable: true // 左下のスライダーを制御する}
      }
      myCharts.setOption(オプション)
    })
  </スクリプト>
</本文>
</html>