Vue.JS で echart を使用する方法

今回は、Vue.JS で echart を使用する方法と、Vue.JS で echart を使用する際の 注意事項 を​​説明します。実際のケースを見てみましょう。

前の記事では、Webpack で ECharts を使用する詳細な例を紹介しました。クリックして表示できます。

1. NPM インストール (グローバル インポート) を使用します。

次のコマンドを実行します。

npm install echarts--save

echarts モジュールを導入します

echarts モジュールを Vue プロジェクトの main.js に導入します。次のコード:

import echarts from 'echarts'
Vue.prototype.$echarts = echarts；

2. オンデマンドでインポート

上記のグローバルインポートはすべての echarts チャートをパッケージ化するため、サイズが大きすぎます。この問題を解決するには、

requireオンデマンドで導入します。必要なものをインポートします:

は:

let echarts = require('echarts/lib/echarts')

3.

を直接引用し、index.htmlファイル内でグローバルに導入します。スクリプトタグを使用して

<script src="/static/js/echarts/echarts.js"></script>

を導入します。 注: srcにechartsのパスを記述します。 ;

次に、vue プロジェクトをビルドします。ディレクトリ内で webpack.base.conf.js、

設定ファイル を見つけ、module.exports オブジェクトに externals 属性を追加して、echarts が配置されているパスを設定します。

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。よりエキサイティングな内容については、php 中国語 Web サイトの他の関連記事にご注意ください。

推奨読書:

ファイルアップロードの進行状況をサーバーから直接取得する

datepickerの使用方法

Vue.jsでのejsExcelテンプレートの使用

以上がVue.JS で echart を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。