Vue+EChartsは、中国の地図の描画と省の自動回転と強調表示を実現します。

<テンプレート>
  <div class="echart">
    <div class="content">
      <div id="map_cn"></div>
    </div>
  </div>
</テンプレート>
 
<スクリプト>
  「echarts」からechartsをインポートします。
  import 'echarts/map/js/china.js' //このステップは導入する必要があります export default {
    データ（） {
      戻る {
        //マップ内のデータデータリスト: [
          {
            名称：「南シナ海諸島」
            値: 25,
          },
          {
            名前:「北京」、
            値: 71,
          },
          {
            名前:「天津」、
            値: 52,
          },
          {
            名前:「上海」、
            値: 14,
          },
          {
            名前:「重慶」、
            値: 50,
          },
          {
            名前:「河北」、
            値: 20,
          },
          {
            名前:「河南」、
            値: 30,
          },
          {
            名前:「雲南」、
            値: 55,
          },
          {
            名前:「遼寧省」、
            値: 50,
          },
          {
            名前：「黒龍江省」
            値: 40,
          },
          {
            名前: 「湖南」、
            値: 6,
          },
          {
            名前:「安徽」、
            値: 96,
          },
          {
            名前:「山東」、
            値: 75,
          },
          {
            名前:「新疆」、
            値: 45,
          },
          {
            名前:「江蘇」、
            値: 15,
          },
          {
            名前:「浙江省」、
            値: 8,
          },
          {
            名前:「江西」、
            値: 78,
          },
          {
            名前:「湖北省」、
            値: 78,
          },
          {
            名前:「広西」、
            値: 36,
          },
          {
            名前:「甘粛」
            値: 25,
          },
          {
            名前:「山西」、
            値: 140,
          },
          {
            名前：「内モンゴル」、
            値: 85,
          },
          {
            名前:「陝西省」、
            値: 85,
          },
          {
            名前: 「吉林」、
            値: 74,
          },
          {
            名前: 「福建省」、
            値: 20,
          },
          {
            名前:「貴州省」
            値: 74,
          },
          {
            名前:「広東」、
            値: 47,
          },
          {
            名前:「青海」、
            値: 45,
          },
          {
            名前:「チベット」
            値: 41,
          },
          {
            名前:「四川」、
            値: 3,
          },
          {
            名前:「寧夏」、
            値: 7,
          },
          {
            名前:「海南」、
            値: 7,
          },
          {
            名前:「台湾」、
            値: 200、
          },
          {
            名前:「香港」、
            値: 2,
          },
          {
            名前:「マカオ」
            値: 5,
          }
        ]、
        //チャートの設定項目とデータオプションを指定します: {
          //タイトルコンポーネント title: {
            表示: true、
            テキスト: 「国内各州の観光名所の数（評価）」
            サブテキスト:「2021年12月現在」
            左：「中央」、
            トップ: 16,
          },
          //プロンプトボックスコンポーネントのツールチップ: {
            表示: true、
            //トリガータイプ: データ項目グラフィックトリガートリガー: 'item',
            パディング: 10,
            境界線の幅: 1,
            境界線の色: '#409eff',
            背景色: 'rgba(255,255,255,0.4)',
            テキストスタイル: {
              色: '#000000',
              フォントサイズ: 12
            },
            //プロンプトボックスコンテンツフォーマッタ: (e) => {
              データ = e.data; とします。
              //ここでは、各レベルのアトラクションの数は 0 から 10 までのランダムな整数として表現されます。data.five = Math.random() * 10 | 0;
              data.four = Math.random() * 10 | 0;
              data.three = Math.random() * 10 | 0;
              data.two = Math.random() * 10 | 0;
              data.one = Math.random() * 10 | 0;
              //アトラクションの数 - 5 つのレベルの合計 data.number = data.five + data.four + data.three + data.two + data.one;
              // 文字列テンプレート let context = `
               <div>
                   <p style="line-height: 30px; font-weight: 600">${data.name}</p>
                   <p><span>アトラクションの数: </span><span>${data.number}</span></p>
                   <p><span>レベル 5A: </span><span>${data.five}</span></p>
                   <p><span>4A レベル: </span><span>${data.four}</span></p>
                   <p><span>レベル 3A: </span><span>${data.three}</span></p>
                   <p><span>レベル 2A: </span><span>${data.two}</span></p>
                   <p><span>レベル 1A: </span><span>${data.one}</span></p>
               </div>
            `;
              コンテキストを返します。
            }
          },
          //ビジュアル マッピング コンポーネント (左下隅)
          ビジュアルマップ:
            表示: true、
            左: 26,
            下: 40,
            表示ラベル: true、
            // ドラッグハンドルを表示するかどうか（ハンドルをドラッグして選択範囲を調整できます）
            計算可能: false、
            //ドラッグ時にリアルタイムで更新するかどうか realtime: true,
            配置: '左'、
            //各色のピースが表す領域: [
              {
                100,
                ラベル: "> 100",
                色: "#FDB669"
              },
              {
                50,
                lt: 99,
                ラベル: "50 - 99",
                色: "#FECA7B"
              },
              {
                年齢: 30,
                lt: 49,
                ラベル: "30 - 49",
                色: "#FEE191"
              },
              {
                10,
                lt: 29,
                ラベル: "10 - 29",
                色: "#FFF0A8"
              },
              {
                lt: 9,
                ラベル: '< 10',
                色: "#FFFFBF"
              }
            ]
          },
          //地理座標系コンポーネント geo: {
            //registerMap を使用して登録されたマップ名 map: "china",
            //マウスズームとパンローミングを有効にするかどうか: true、
            //現在の視点のズーム比 zoom: 1,
            //ローラーズーム制限コントロール scaleLimit: {
              min: 1, //最小1倍 max: 3 //最大3倍},
            //マップコンポーネントとコンテナ上部の間の距離: 90,
            左:「中央」、
            //グラフィックラベル上のテキストラベル: {
              表示: true、
              フォントサイズ: "11"
            },
            //マップ領域の多角形グラフィックスタイル itemStyle: {
              境界線の色: "rgba(0, 0, 0, 0.2)",
              影の色: 'rgba(0, 0, 0, 0.2)',
              影ぼかし: 10,
              // 強調表示された状態のポリゴンとラベルのスタイル (マウスが移動した後) 強調: {
                エリアカラー: "#f98333",
                影オフセットX: 2,
                影オフセットY: 2,
              },
            }
          },
          シリーズ： [
            {
              タイプ: "マップ"、
              ローミング: 本当、
              地理インデックス: 0,
              データ： ''、
              ラベル: {
                表示: true、
              }
            }
          ]
        },
      };
    },
 
    メソッド: {
      //中国の地図を描画するためのメソッドdraw_mapを定義するdraw_map() {
        myChart を this.$echarts.init(document.getElementById('map_cn')); とします。
        // ハイライトカルーセル表示 var hourIndex = 0;
        var カルーセル時間 = null;
        //setInterval() は、clearInterval がクリアするまで、指定されたミリ秒数ごとにループ内で関数または式を呼び出すことができます。//setInterval メソッドを使用した後は、function を記述する代わりに矢印関数を使用する必要があります。そうしないと、後でメソッド内で data 内のデータを呼び出すことができません。//carouselTime = setInterval(function(){ // 間違った書き方 carouselTime = setInterval(() => {
          //dispatchAction echarts API: チャートの動作をトリガーする myChart.dispatchAction({
            type: "downplay", //downplay は強調表示されたデータ グラフをキャンセルします seriesIndex: 0
          });
          myChart.dispatchAction({
            type: "highlight", //指定されたデータグラフィックを強調表示 seriesIndex: 0, //シリーズインデックス
            dataIndex: hourIndex //データインデックス
          });
          myChart.dispatchAction({
            type: "showTip", //showTipはプロンプトボックスを表示します seriesIndex: 0,
            データインデックス: 時間インデックス
          });
          時間インデックス++;
          //配列の最後のデータまでループした後、再度ループします。if (hourIndex > this.dataList.length) {
            時間インデックス = 0;
          }
        }, 3000);
        //マウスがコンポーネント内に移動したらカルーセルを停止しますmyChart.on("mousemove", (e) => {
          clearInterval(carouselTime); //ループをクリア myChart.dispatchAction({
            タイプ: "軽視"、
            シリーズインデックス: 0,
          });
          myChart.dispatchAction({
            タイプ: "ハイライト"、
            シリーズインデックス: 0,
            データインデックス: e.dataIndex
          });
          myChart.dispatchAction({
            タイプ: "showTip",
            シリーズインデックス: 0,
            データインデックス: e.dataIndex
          });
        });
        //マウスがコンポーネントから外れたらカルーセルを再開しますmyChart.on("mouseout", () => {
          カルーセル時間 = setInterval(() => {
            myChart.dispatchAction({
              タイプ:「軽視」、
              シリーズインデックス: 0,
 
            });
            myChart.dispatchAction({
              タイプ: "ハイライト"、
              シリーズインデックス: 0,
              データインデックス: 時間インデックス
            });
            myChart.dispatchAction({
              タイプ: "showTip",
              シリーズインデックス: 0,
              データインデックス: 時間インデックス
            });
            時間インデックス++;
            時間インデックス > this.dataList.length の場合 {
              時間インデックス = 0;
            }
          }, 3000);
        });
 
        //マップを表示します。myChart.setOption(this.option);
      },
 
      //echart設定を変更する setEchartOption() {
        this.option.series[0].data = this.dataList;
      },
    },
    作成された() {
      this.setEchartOption();
    },
    マウント() {
      this.$nextTick(() => {
        このメソッドは、マップを描画します。
      });
    }
  };
</スクリプト>
 
<style スコープ lang="less">
  .echart{
    幅: 100%;
 
    。コンテンツ {
      幅: 95.8%;
      高さ: 100px;
      マージン: 自動;
 
      #map_cn {
        幅: 65%;
        高さ：7rem;
        背景色: #eaeaea;
        マージン: 自動;
      }
    }
  }
</スタイル>