ECharts インストール

1、独立バージョン

echarts.min.js を直接ダウンロードして、<script>タグで導入します。

echarts.min.js(4.7.0)

また、開発環境ではソースコード版の echarts.js を使用して、<script>タグで導入します。ソースコード版には一般的なエラーメッセージと警告が含まれています。

echarts.js(4.7.0)

また、ECharts の公式サイトから、さまざまなテーマと言語を含む、より豊富なバージョンを直接ダウンロードすることもできます。ダウンロードアドレス:https://echarts.apache.org/zh/download.html。

これらのビルド済みの ECharts は、以下のカスタマイズを提供しています:

  • 完全版:echarts/dist/echarts.js、サイズが最も大きく、すべてのチャートとコンポーネントが含まれています。含まれる内容は次を参照してください:echarts/echarts.all.js。
  • 常用版:echarts/dist/echarts.common.js、サイズは中程度で、一般的なチャートとコンポーネントが含まれています。含まれる内容は次を参照してください:echarts/echarts.common.js。
  • 簡易版:echarts/dist/echarts.simple.js、サイズが小さく、最も一般的なチャートとコンポーネントのみが含まれています。含まれる内容は次を参照してください:echarts/echarts.simple.js。

2、CDN を使用する方法

以下に、海外で比較的安定している 2 つの CDN を紹介します。国内ではまだ良いものは見つかっていないため、現時点ではローカルにダウンロードすることをお勧めします。

Staticfile CDN(国内)

<!--ECharts 用にサイズ(幅と高さ)を持つ Dom を準備します。--> <div id="main" style="width: 600px;height:400px;"></div>

試してみる »

jsDelivr

<!--ECharts 用にサイズ(幅と高さ)を持つ Dom を準備します。--> <div id="main" style="width: 600px;height:400px;"></div>

試してみる »

cdnjs

<!--ECharts 用にサイズ(幅と高さ)を持つ Dom を準備します。--> <div id="main" style="width: 600px;height:400px;"></div>

試してみる »


3、NPM 方法

npm のインストール速度が遅いため、このチュートリアルでは淘宝(Taobao)のミラーとそのコマンド cnpm を使用しています。インストールと使用の紹介は次を参照してください:淘宝 NPM ミラーを使用。

npm のバージョンは 3.0 より大きい必要があります。このバージョンより低い場合は、アップグレードする必要があります:

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g


# 升级或安装 cnpm
npm install cnpm -g

cnpm を使用して echarts を取得します:

# 最新稳定版
$ cnpm install echarts --save

インストールが完了すると、ECharts と zrender は node_modules ディレクトリに配置され、プロジェクトコードで直接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] }] });
その他の拡張機能