要件の説明
Echartsは直感的でインタラクティブなリッチ、高度にパーソナライズカスタムデータの可視化グラフを提供し、可視化ライブラリのオープンソースのJavaScript実装です。ユーザーは、echarts後に公式サイトの更新バージョンを使用することを選択するためにEcharts新バージョンは、いくつかの新機能が追加され、どのようにレポートechartsそれにツールの更新バージョンを同期するには?
分析
導入されたサードパーティのチャートランドライステートメントとしてechartsは、そうちょうどそれに対応するディレクトリにechartsコアファイルにする必要があります。
具体操作
1、ファイルをダウンロードして公式サイトをecharts
アクセスhttps://www.echartsjs.com/zh/download.html
方法IIに従って、GitHubのから完全echartsにコンパイルされたファイルをダウンロードし、以下のように、例えば、4.4.0バージョンをダウンロードするには:
以下のインタフェースに入ります4.4.0バックディストクリックしてください:
そして、親ディレクトリをクリックし、ホームディレクトリechartsに移動します。
最後に、クローンをクリックするか、完全echarts用のファイルをダウンロードしてください。
2、ファイル名を指定して実行ドライReporting設定
バージョンを区別するためにecharts4.4:フォルダに名前を変更することができますraqsoft下のデモ\、へのアンパックアーカイブとインキュベーター-echarts-4.4.0フォルダ全体以降に取得しました。
注:あなたがecharts2バージョンを使用する必要がある場合は、内蔵のecharts2フォルダ以下にその内容を削除しないでください。
試験を示す3、
テストechartsレポートのさまざまなバージョンが通常表示すると、アップグレードが成功したことを示します。
以下に、試験の各バージョンの説明です。
1)echarts2テストバージョン
<1> echarts2テンプレート:
<DIV ID = '$ {ID}'スタイル= "幅:$ {} PX幅;高さ:高さ$ {} PX"> </ div> <スクリプトタイプ= "テキスト/ JavaScriptを"> //データは5月を前処理ここで完了 (必要 [ 'echarts'を、 'echarts /チャート/ライン' //ロード・モジュールに必要な ]、 機能(EC){ VAR myChart = ec.init(のdocument.getElementById( '$ {ID}')); オプション= {VAR の公式ウェブサイトのHTMLオプション部分が配置されたからダウンロード//コピー }; myChart.setOption(オプション); } ); </ SCRIPT>
<2> echarts2模範的なレポートファイル
試験上記2)echarts3
<1> echarts3テンプレート上で:
<DIV ID = '$ {ID}'スタイル= "幅:$ {} PX幅;高さ:高さ$ {} PX"> </ div> <スクリプトタイプ= "テキスト/ JavaScriptを"> //データは5月を前処理ここで行わ 変数$ {} _domのID =のdocument.getElementById( '$ {ID}'); VAR = myChart echarts.init($ {ID} _dom); VARオプション= { //公式ウェブ部分からダウンロードしたコピーのhtml設定オプション }; myChart.setOption(オプション) </ SCRIPT>
<2> echarts3模範的なレポートファイル
<3> echarts4模範的なレポートファイル