Webpack での ECharts の使用の詳細な説明

今回は、Webpack で EChart を使用する場合の注意事項について詳しく説明します。実際のケースを見てみましょう。

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

npm ECharts をインストールする バージョン 3.1.1 より前では、npm 上の ECharts パッケージは非公式に保守されていました。3.1.1 以降、公式の EFE は npm 上に ECharts および zrender パッケージを保守します。

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

npm install echarts --save

ECharts の紹介npm 経由でインストールされた ECharts と zrender は、node_

module

s ディレクトリに配置されます。 EChart はプロジェクト コード require('echarts') で直接取得できます。

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 以上に効果的に削減できます。 。

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
// 基于准备好的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]
  }]
});

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

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

JSでパブリックサブシーケンスを作成する方法

NavigatorIOSコンポーネントの使用方法の詳細な説明

以上がWebpack での ECharts の使用の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。