ECharts スタイル設定

ECharts はスタイル設定を使用して、グラフィック要素やテキストの色、明暗、サイズなどを変更できます。

カラーテーマ

ECharts4 から、デフォルトテーマに加えて、2つのテーマが内蔵されています。それぞれ、lightとdark。

使用方法は次のとおりです：

また、公式のテーマエディター好きなテーマを選択してダウンロードできます。

現在、テーマのダウンロードはJSバージョンとJSONバージョンを提供しています。

JS バージョンを使用する場合は、JSテーマコードをテーマ名.jsファイルとして保存し、HTMLでそのファイルを参照して、最後にコードでそのテーマを使用します。

例えば、上の図でテーマを選択し、JSコードを次のように保存します。wonderland.js。

テーマをJSONファイルとして保存する場合、自分で読み込んで登録することができます。

例えば、上の図でテーマを選択し、JSONコードを次のように保存します。wonderland.json。

注意：$.getJSON を使用しているため、jQuery を導入する必要があります。

カラーパレット

カラーパレットは option で設定できます。

カラーパレットは色のセットを提供し、グラフィックやシリーズは自動的にその中から色を選択します。

グローバルなカラーパレットを設定することも、シリーズ専用のカラーパレットを設定することもできます。

グローバルカラーパレットのサンプル：

シリーズカラーパレットのサンプル：

直接的なスタイル設定 itemStyle, lineStyle, areaStyle, label, ...

直接的なスタイル設定はよく使われる設定方法です。ECharts のoption中では、多くの場所で設定できます。itemStyle、lineStyle、areaStyle、labelなどです。これらの場所では、グラフィック要素の色、線幅、点のサイズ、ラベルのテキスト、ラベルのスタイルなどを直接設定できます。

一般的に、ECharts の各シリーズとコンポーネントはこれらの命名規則に従っていますが、異なるグラフやコンポーネントでは、itemStyle、labelなどが異なる場所に現れる可能性があります。

直接的なスタイル設定の別の説明は、次を参照してください。ECharts 円グラフ。

ハイライトのスタイル：emphasis

マウスをグラフィック要素に重ねると、通常はハイライトスタイルが表示されます。デフォルトでは、ハイライトスタイルは通常のスタイルから自動的に生成されます。

ハイライトスタイルをカスタマイズする場合は、emphasis プロパティを使用してカスタマイズできます：