どのように動的に複数のechart要約チャートを描画します

ニーズ:ダイナミックの必要性がリストによりechartチャートをレンダリングします。

前提:私はVUEのフレームワークを使用しています

分析:

1、VUEフレーム構造は正式に指定された参考文献をDOM得るために使用される、または(ここでIはIDに従って取得する第二の方法を使用して)取得するIDのdocument.getElementById()方法を作成することができます

図2は、IDも動的に取得し、その後、図1のように、動的JSのIDで単一の項目に見られるDOMをループ。

PS:次のようにここで私は、ID・チャートで構成される各echartに「アイテム+インデックス」を使用しています、そして最終的にはHTML構造を生成します:

 

下に示すように図3に示すように、各サイクルの方法は、各グラフのレンダリングJSおよび動的にアイテムIDを取得します。

 

PS:私は上記のステップ1,2,3、それぞれの手段マーク:
このチャートは、多重ポップすることである私のために、私はキットの形をしたので、(1)、およびメインページに入る、ちょうど上のクリック(データは動的背景を取得しているため)このコンポーネントは、DOMの更新はポップ、その後、非同期更新を演奏関与する時期

:このエラーは、ここでは具体的に突く、このフックでレンダリング専門治療、echartを提供するために、VUEフック$ nextTickを使用する必要があるhttps://cn.vuejs.org/v2/api/#Vue-nextTick

(2):これは、私がバックグラウンドから得られた配列データのリストであり、アレイ処理を必要とし、各項目を取得し、その後echartの各項目を初期化します

(3):これは、ここで個々eachrtグラフ生成スキームの名前の値は、動的レンダリングを実装し、各項目のIDであるとされています。

これは、達成するための多様な方法であり、私たちはメッセージを歓迎し、各レンダリングechartの一つの方法よりダイナミックな、もちろん、他の方法があります。

最終的に整形は次の通り:

すべての試験データ笑

おすすめ

転載: www.cnblogs.com/gong-ping/p/12524282.html