echarts と vue.js を統合する際に発生するいくつかの問題の概要

序文

現在、私は Beetlex のデータ分析プラットフォームに取り組んでいます。この製品の開発では、多数のデータチャート表示機能が関わってきます。製品のフロントエンドは vuejs を使用して開発されているため、echarts を統合する際には多かれ少なかれ問題が発生します。ここでは主に遭遇した問題とその解決策について説明します。

説明の前に、実際の使用効果をシェアさせてください。詳細については、http://data.beetlex.io をご覧ください。

コントロールID

vuejs では、よく使用される関数はコンポーネントにカプセル化されることがよくあります。同様に、さまざまなチャートを再利用するために、それらもコンポーネントにカプセル化されて使用されます。このカプセル化プロセスには、チャート要素 DIV の ID の問題という問題があるため、コンポーネントによって構築されるチャート DIV の ID も一意性を確保する必要があります。簡単な関数をカプセル化することでIDを生成できる

Vue.prototype.$getID = 関数 () {
    ページ.コントロールID = ページ.コントロールID + 1;
    page.controlid を返します。
};

このメソッドを使用して動的要素IDを取得します

マウントされた(){
     this.ChatID = "chat_" + this.$getID();
}
<div :id="チャットID">

</div>

初期化の問題

Vuejs を使用する場合、mounted() メソッド内で何らかの初期化が行われることが多いのですが、ここで echarts を初期化する場合は注意が必要です。結局、mounted はすべての要素が構築されていることを意味するわけではありません。これにより、要素の取得に失敗し、echarts の初期化に失敗します。そのため、echarts をメソッドに入れて状況に応じて手動で呼び出すか、初期化のために呼び出しを遅らせる必要があります。便宜上、初期化には setTimeout が使用されます。

タイムアウトを設定する(() => {
    var dom = document.getElementById(this.ChatID);
    this.Chat = echarts.init(dom, 'マカロン');
    this.Chat.setOption(this.ChatOption, true);
}, 300);

表示切り替えの問題

チャートの表示を切り替える必要がある場合は、v-if などの構文を使用しないことをお勧めします。このような構文では、DOM に関連要素が構築されず、echarts によって Canvas 要素が作成され、正しく動作しなくなるためです。構築された DOM 要素の内容が変更されないように、CSS を切り替えて表示を切り替えるのが最善の方法です。

適応レイアウト

多くの場合、フォームやコンポーネントの切り替えに大きな変更があると、echarts が現在のレイアウトに適応できなくなります。この場合、echarts の resize メソッドを手動で呼び出して、表示レイアウトをリセットする必要があります。実際、SPA アプリケーションの状況ははるかに複雑です。全画面表示があり、フォームを変更する必要があり、コンポーネント化後に多階層にネストされているため、echarts がどこで使用されているかを判断するのは困難です。さまざまな状況のニーズを満たすには、これらの変更をトリガーする共通の動作が必要です。

var __resizeHandlers = [];
関数__addResizeHandler(ハンドラ) {
    __resizeHandlers.push(ハンドラ);
};
関数__resize() {
    タイムアウトを設定する(() => {
        __resizeHandlers.forEach(v => {
            v();
        });
    }, 100);
}
window.onresize = 関数 () {
    __resizeHandlers.forEach(v => {
        v();
    });
};
Vue.prototype.$addResize = 関数 (ハンドラー) {
    __addResizeHandler(ハンドラ);
};
Vue.prototype.$resize = 関数 () {
    __resize();
};

単純なサイズ変更登録と呼び出しメカニズムを実装し、echartsコンポーネントに次のコードを定義するだけで、完全に解決できます。

this.$addResize(r => {
     if (this.Chat)
            this.Chat.resize();
});

付録: Echarts のダウンロードと使用

EChartsは以下の方法で入手できます。

1. Apache ECharts (incubating) 公式 Web サイトのダウンロードインターフェイスから公式ソースコードパッケージを取得し、ビルドします。

2. ECharts の GitHub から入手します。

3. npm 経由で echarts を取得します。npm install echarts --save、

4. jsDelivrなどのCDN経由でインポートする

以下の図が表示されれば成功です。

導入

（ダウンロードの前提条件）

1. 構築された echarts ファイルをタグを通じて直接インポートします。

<!DOCTYPE html>
<html>
<ヘッド>
    <メタ文字セット="utf-8">
    <!-- ECharts ファイルをインポート-->
    <script src="echarts.min.js"></script>
</head>
</html>

2. グローバルリファレンス

vueのmain.js内

// echarts をインポート
'echarts' から echarts をインポートします
Vue.prototype.$echarts = echarts

3. eChartsをコンポーネントに直接導入する

（他のコンポーネントでechartsを使用する場合は、再導入する必要があります）

「echarts」からechartsをインポートします。

要約する

echarts と vue.js を統合する際に発生する問題についての記事はこれで終わりです。echarts と vue.js を統合する際に発生する問題の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: