EChartsをNPMパッケージとして使用する

EChartsをパッケージとして使用する方法は2つあります。最も簡単な方法は、echartsからインポートすることですべての機能をすぐに利用できるようにすることです。ただし、echarts/coreやecharts/chartsなど、必要に応じてのみインポートすることにより、バンドルサイズを大幅に削減することが推奨されます。

NPM経由でEChartsをインストール

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

npm install echarts

すべてのECharts機能をインポート

EChartsのすべてを含めるには、単にechartsをインポートする必要があります。

import * as echarts from 'echarts';

// Create the echarts instance
var myChart = echarts.init(document.getElementById('main'));

// Draw the chart
myChart.setOption({
  title: {
    text: 'ECharts Getting Started Example'
  },
  tooltip: {},
  xAxis: {
    data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks']
  },
  yAxis: {},
  series: [
    {
      name: 'sales',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
});

バンドルサイズの縮小

上記のコードはEChartsのすべてのグラフとコンポーネントをインポートしますが、すべてのコンポーネントをインポートしたくない場合は、EChartsが提供するツリーシェイカブルインターフェイスを使用して、必要なコンポーネントをバンドルし、最小限のバンドルを取得できます。

// Import the echarts core module, which provides the necessary interfaces for using echarts.
import * as echarts from 'echarts/core';

// Import bar charts, all suffixed with Chart
import { BarChart } from 'echarts/charts';

// Import the tooltip, title, rectangular coordinate system, dataset and transform components
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';

// Features like Universal Transition and Label Layout
import { LabelLayout, UniversalTransition } from 'echarts/features';

// Import the Canvas renderer
// Note that including the CanvasRenderer or SVGRenderer is a required step
import { CanvasRenderer } from 'echarts/renderers';

// Register the required components
echarts.use([
  BarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

// The chart is initialized and configured in the same manner as before
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  // ...
});

パッケージのサイズを最小限に抑えるために、EChartsはツリーシェイカブルインターフェイスでレンダラーを提供しないことに注意してください。そのため、レンダラーとしてCanvasRendererまたはSVGRendererをインポートする必要があります。この利点は、SVGレンダリングモードのみを使用する必要がある場合、バンドルには不要なCanvasRendererモジュールが含まれないことです。

サンプルエディターページの「フルコード」タブには、ツリーシェイカブルコードを生成する非常に便利な方法が用意されています。現在のオプションに基づいてツリーシェイカブルコードが動的に生成され、プロジェクトで直接使用できます。

TypeScriptでのOption型の作成

TypeScriptを使用してEChartsを開発している開発者向けに、最小限のEChartsOption型を作成するための型インターフェイスが提供されています。この型は、使用されているコンポーネントを正確に把握するため、提供されるデフォルトの型よりも厳密になります。これにより、欠落しているコンポーネントやグラフをより効果的に確認できます。

import * as echarts from 'echarts/core';
import {
  BarChart,
  LineChart,
} from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  // Dataset
  DatasetComponent,
  // Built-in transform (filter, sort)
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import type {
  // The series option types are defined with the SeriesOption suffix
  BarSeriesOption, 
  LineSeriesOption,
} from 'echarts/charts';
import type {
  // The component option types are defined with the ComponentOption suffix
  TitleComponentOption, 
  TooltipComponentOption,
  GridComponentOption,
  DatasetComponentOption
} from 'echarts/components';
import type { 
  ComposeOption, 
} from 'echarts/core';

// Create an Option type with only the required components and charts via ComposeOption
type ECOption = ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>;

// Register the required components
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

const option: ECOption = {
  // ...
};

コントリビューター GitHubでこのページを編集

zachary-svoboda-accesso

btea