echartsマップカルーセルハイライトを解決するための記事

<テンプレート>
    <div ref="myChart" id="myChart" class="gzMap"></div>
</テンプレート>
...
    データ （） {
        戻る {
                チャート: ''、
                オプション：{
                    ...
                }
        };
    },
...
    マウントされた（）{
        this.$echarts.registerMap('Guangdong', gzData);//マップデータを取得 this.setMyEchart(); //ページがマウントされた後に実行},
    方法:{
        setMyEchart() {
            const myChart = this.$refs.myChart; // refif (myChart) を通じて DOM ノードを取得します {
                const thisChart = this.$echarts.init(myChart); // プロトタイプ Echarts を使用して初期化します this.charts = thisChart; // インスタンスを保存します thisChart.setOption(this.option); // 記述された構成項目を Echarts にマウントします }
        },
    }
...

...
    データ （） {
        戻る {
                時間: ''、
                チャート: ''、
                インデックス: -1,
                オプション：{
                    ...
                }
        };
    },
...
    方法:{
        マイチャートを設定する() {
            ...
            this.mapActive();
            ...
        },
        マップアクティブ() {
            定数データ長 = gzData.features.length;
            // タイマーを使用してハイライトを制御します this.mTime = setInterval(() => {
                // 前のハイライトをクリアする this.charts.dispatchAction({
                    タイプ: '軽視'、
                    シリーズインデックス: 0,
                    データインデックス: this.index
                });
                this.index++;
                // 現在の下付き文字が強調表示されます this.charts.dispatchAction({
                    タイプ: 'ハイライト'、
                    シリーズインデックス: 0,
                    データインデックス: this.index
                });
                this.charts.dispatchAction({
                    タイプ: 'showTip',
                    シリーズインデックス: 0,
                    データインデックス: this.index
                });
                if (this.index > データ長) {
                    this.index = 0;
                }
            }, 2000);
        },
    }

    方法:{
        マイチャートを設定する() {
            ...
            this.mapActive();
            ...
        },
        マウスイベント() {
            // マウスが入る this.charts.on('mouseover', () => {
                // タイマーを停止し、前のハイライトをクリアします。clearInterval(this.mTime);
                this.mTime = '';
                コンソールにログ出力します。
                this.charts.dispatchAction({
                        タイプ: '軽視'、
                        シリーズインデックス: 0,
                        データインデックス: this.index
                });
            });
            // マウスアウトでリタイマーが開始します this.charts.on('mouseout', () => {
                this.mapActive();
            });
        },
      }