Webpack で EChart を使用するにはどうすればよいですか?

この記事では主に webpack で EChart を使用するサンプルコードを紹介します。必要な方は参考にしてください。

Webpack は現在人気のモジュールパッケージ化ツールであり、ここでは webpack を使用して EChart を簡単に導入してパッケージ化することができます。すでに webpack についてある程度の理解があり、それを独自のプロジェクトで使用していることを前提としています。

npm install ECharts

バージョン 3.1.1 より前は、npm 上の ECharts パッケージは非公式に保守されていました。3.1.1 からは、公式 EFE が npm 上に ECharts および zrender パッケージを保守しました。

次のコマンドを使用して、npm 経由で ECharts をインストールできます

npm install echarts --save

ECharts の紹介

npm 経由でインストールされた ECharts と zrender は、node_modules ディレクトリに配置されます。プロジェクト コードで直接 require('echarts') を使用して EChart を取得できます。

var echarts = require('echarts');
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
});

ECharts チャートとコンポーネントをオンデマンドで導入します

デフォルトでは、すべてのチャートとコンポーネントがロードされた ECharts パッケージなので、ボリュームが比較的大きくなります。プロジェクト内のボリュームを変更します。要件がより厳しい場合は、必要に応じて必要なモジュールのみを導入することもできます。

たとえば、上記のサンプル コードでは棒グラフ、プロンプト ボックス、タイトル コンポーネントのみを使用しているため、導入時にこれらのモジュールのみを導入する必要があり、パッケージ サイズを 400 KB 以上から 170 KB 以上に効果的に削減できます。 。

以上が皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

zTreeツリープラグインで全国の5レベル地域のクリックローディングを実装する方法

Koa2のasyncとawaitの用途は何ですか?

vue で静的リソースをパッケージ化する方法

以上がWebpack で EChart を使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。