概要
ECharts は JavaScript ベースのデータ視覚化チャート ライブラリであり、直感的、鮮明、インタラクティブでカスタマイズ可能なデータ視覚化チャートを提供します。ECharts はもともと Baidu チームによってオープンソースでしたが、2018 年初めに Apache Foundation に寄贈され、ASF インキュベーション レベルのプロジェクトになりました。
ECharts は、統計用の通常の折れ線グラフ、ヒストグラム、散布図、円グラフ、ローソク足チャート、統計用のボックス チャート、マップ、ヒート マップ、地理データの視覚化用の折れ線グラフ、およびリレーショナル データの視覚化を提供します。関係図、ツリーマップ、サンバースト ダイアグラム、平行座標多次元データの視覚化、BI 用のファネル ダイアグラム、ダッシュボード、およびダイアグラム間のマッシュアップのサポート用です。
PCやモバイルデバイスでスムーズに動作可能
基本的な考え方
1. eチャートの例:
- 複数の echart インスタンスを Web ページ内に作成できます。
- 各 echarts インスタンスで複数のチャートと座標系を作成できます。
- dom ノードは echart のレンダリング コンテナとして使用され、各 echart は dom ノードを排他的に占有します。
2.シリーズ
シリーズ: 値のセットとそれらにマップされたグラフ。
シリーズの要素: 値のセット、グラフのタイプ、データをグラフにマッピングする方法に関するその他のパラメータなど。
グラフの種類 (series.type) には次のものが含まれます。
- ライン（折れ線グラフ）
- バー（ヒストグラム）
- パイ（円グラフ）
- 散布図 (散布図)
- グラフ（関係グラフ）
- ツリー（樹形図）など。
データ (シリーズ.データ):
インポートされた値。
- ECharts 4 より前は、データは各「シリーズ」でのみ宣言できました。
ECharts 4 では、個別のデータセット宣言のためのデータセット コンポーネントのサポートが開始されました。これにより、データを個別に管理し、複数のコンポーネントで再利用できるようになり、データに基づいてデータからビジョンへのマッピングを指定できるようになります。- データについては後で学習するので、ここでは詳しく説明しません。
一般的なスタイル (series.itemStyle):
影、透明度、色、境界線の色、境界線の幅などが含まれます。
3. コンポーネント:
凡例凡例コンポーネント。対応する凡例を表示するかどうかをクリックするために使用されます。例:
- xAxis (デカルト座標系 X 軸)
- yAxis (デカルト座標系の Y 軸)
- グリッド（直交座標系底板）
- angleAxis (極座標系角度軸)
- radiusAxis (極座標系半径軸)
- Polar (極座標系ベースプレート)
- geo (地理座標系)
- dataZoom (データ領域ズームコンポーネント)
- VisualMap (ビジュアルマップコンポーネント)
- ツールチップ (プロンプト ボックス コンポーネント)
- ツールボックス (ツールバーコンポーネント)
- シリーズ（シリーズ）
など
4. オプション説明表
このオプションでは、データ、データがグラフィックスにマッピングされる方法、およびインタラクティブな動作について説明します。
たとえば、オプションを使用して、どのようなデータが存在するか、どのようなチャートを描画するか、チャートの外観、チャートに含まれるコンポーネント、コンポーネントが動作できる内容など、チャートのさまざまな要件を記述します。
option は、内部に多数のプロパティを含む大きな JavaScript オブジェクトであり、各プロパティはコンポーネントの一種です。同じタイプの複数のコンポーネントで配列を形成できます。
5: コンポーネントの位置決め
コンポーネントやシリーズが異なれば、配置方法も異なることがよくあります。
1) CSS のような絶対配置:
ほとんどのコンポーネントとシリーズは、上/右/下/左/幅/高さに基づいて絶対的に配置できます。この絶対配置方法は、CSS の絶対配置に似ています。
ここで、それぞれの値は次のようになります。
絶対値 (たとえば、bottom: 54 は、echart コンテナーの下端の境界線から 54 ピクセルを意味します)。
echarts コンテナの高さと幅のパーセンテージに基づきます (たとえば、右: '20%' は、echarts コンテナの右の境界線からの距離が echarts コンテナの幅の 20% であることを意味します)。
2) 中心半径の位置決め:
いくつかの円形コンポーネントまたはシリーズの場合は、pie (円グラフ)、sunburst (サンバースト グラフ)、polar (極座標系) などの「中心半径位置決め」を使用できます。
中心半径の位置決めは、多くの場合、中心 (中心) と半径 (半径) に基づいて位置を決定します。
3) その他の位置付け:
少数のコンポーネントやシリーズには、独自の特別な配置方法がある場合があります。ドキュメントに手順が記載されています。
6. 座標系
- 多くのシリーズは「座標系」で動作する必要があります。
例えば、折れ線（折れ線グラフ）や棒（ヒストグラム）などは「座標系」で操作する必要があります。
- 座標系は複数のコンポーネントで構成される場合があります。
最も一般的なデカルト座標系を例に挙げてみましょう。デカルト座標系には、xAxis (デカルト座標系の X 軸)、yAxis (デカルト座標系の Y 軸)、グリッド (デカルト座標系の底板) の 3 つのコンポーネントがあります。xAxis と yAxis はグリッドによって自動的に参照され、連携して動作するように編成されます。
- 多くの場合、シリーズは異なる座標系で実行できます。
たとえば、散布図 (散布図) は、デカルト座標系、極座標系、地理座標系 (GEO) などのさまざまな座標系で実行できます。同様に、座標系でも異なる系列を保持できます。
属性
1. title: タイトルを書きます。属性は次のとおりです。
show:false/true タイトルを表示するかどうか。
text: タイトルの内容; textstyle はタイトルのスタイルを変更します
subtext: コンテンツともみなされるサブタイトル。subtextStyle はサブタイトルのスタイルを変更します。
2. 凡例: 凡例コンポーネントには、さまざまな一連のシンボル、色、名前が表示されます。
show:false/true 表示するかどうか。
データ: 凡例のデータ配列。
3. グリッド: デカルト座標系の描画グリッド。1 つのグリッドに、上下に最大 2 つの X 軸、左右に最大 2 つの Y 軸を配置できます。折れ線グラフ、ヒストグラム、散布図をグリッド上に描画できます。
show:false/true 表示するかどうか。
top、left、right、bottom は、上、左、下のマージンをマークします。
4. xAxis: 直交座標系グリッドの x 軸。単一のグリッド コンポーネントは最大でも上下の x 軸のみを配置できます。
タイプ: 軸タイプ。
「value」値軸。連続データに適しています。
「カテゴリ」カテゴリ軸。個別のカテゴリ データに適しています。カテゴリ データは、このタイプのデータを通じて設定する必要があります。
「時間」時間軸は、連続した時系列データに適しています。値軸と比較して、時間軸には時間の書式設定があり、スケールの計算も異なります。たとえば、月、週、日、またはスケールの使用を決定します。時間範囲の場合。
データ: カテゴリ データ、カテゴリ軸で有効です (タイプ: 'カテゴリ')。
5. y 軸: 直交座標系グリッドの y 軸 1 つのグリッド コンポーネントには最大で左右 2 つの y 軸しか配置できません。
タイプ: 軸タイプ。
「value」値軸。連続データに適しています。
「カテゴリ」カテゴリ軸。個別のカテゴリ データに適しています。カテゴリ データは、このタイプのデータを通じて設定する必要があります。
「時間」時間軸は、連続した時系列データに適しています。値軸と比較して、時間軸には時間の書式設定があり、スケールの計算も異なります。たとえば、月、週、日、またはスケールの使用を決定します。時間範囲の場合。
6. dataZoom: このコンポーネントはデータ領域を拡大するために使用され、詳細なデータ情報に自由に焦点を当てたり、データ全体を概観したりできます。
type:slider; コンポーネントを表示するかどうか。false に設定すると表示されなくなりますが、データ フィルタリングの機能は引き続き存在します。backgroundColor
: コンポーネントの背景色です。
realtime: ドラッグ時にシリーズのビューをリアルタイムで更新するかどうか。false に設定すると、ドラッグが終了したときにのみ更新されます。
top、left、right、bottom は、上、左、下のマージンをマークします。
7. ツールチップ: プロンプト ボックス コンポーネント。
show: false/true 表示するかどうか、
trigger: トリガーの種類、
'item': データ項目のグラフィック トリガー。主に散布図や円グラフなどのカテゴリ軸のないグラフで使用されます。
'axis': 座標軸トリガー。主にヒストグラム、折れ線グラフ、カテゴリ軸を使用するその他のグラフで使用されます。
8. カラー: パレットのカラーリスト。シリーズに色が設定されていない場合は、リストの色がシリーズの色として順番に使用されます。
デフォルト: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', ' # 546570', '#c4ccd3'];
9. シリーズ：シリーズ一覧。各シリーズは、タイプによって独自のグラフ タイプを決定します。
series[i]-line: ポリライン
itemStyle ポリラインの変曲点マークのスタイル;
series[i]-bar: ヒストグラムは列の高さによるデータのサイズを表し、少なくとも 1 つのカテゴリを持つデカルト座標系で使用されます。軸。
series[i]-pie: 円グラフは主に、合計におけるさまざまな種類のデータの割合を示すために使用されます。それぞれのラジアンはデータ量の比率を表します。、
10. itemStyle スタイル:
通常:カラー カラー;
使用
使いやすい
1. echarts.js ファイルを参照する
注: 参照が必要な場合は、公式 Web サイトにアクセスして echarts.js ファイルをダウンロードしてください。
<script type="text/javascript" src="js/echarts.js"></script>
2. ビュー用の div を準備します (カスタム)
<div id="chartmain" style="width:600px; height: 400px;"></div>
3. パラメータの設定とカスタムアイコンの初期化
<script type="text/javascript">
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//var myChart = echarts.init($("#chartmain")[0]); jquery方式
//指定图标的配置和数据
var option = {
title:{
text:'ECharts 数据统计'
},
tooltip:{
},
legend:{
data:['用户来源']
},
xAxis:{
data:["Android","IOS","PC","Ohter"]
},
yAxis:{
},
series:[{
name:'访问量',
type:'line',
data:[500,200,360,100]
}]
};
//使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
こんな簡単な統計表が出てきました 公式サイトで使用されていたヒストグラムを折れ線グラフに置き換えました。
ヒストグラムの中央にデータを表示
位置の値を変更します。
1. 外部位置: 上: ヒストグラムの上部、下: ヒストグラムの下部、右: ヒストグラムの右側、左: ヒストグラムの左側。
2. 内部位置: inside: ヒストグラムの中央、insideRight: ヒストグラムの内側の右側、insideLeft: ヒストグラムの内側の右側、insideTop: ヒストグラムの内側の上部、insideBottom: ヒストグラムの内側の下部。
コードデモ:
series : [
{
name:'机器数量',
type:'bar',
barWidth: '60%',
data:[569, 30],
itemStyle:{
normal:{
label:{
show:true, //表示是否显示
position: 'inside', //改变数字的位置
textStyle: {
//改变字体的颜色和字体大小
color: '#ffff',
fontSize: 13
},
formatter: function(params){
if(params.value == 0){
return '';
}else {
return params.value;
}
}
}
}
}
}
]
ヒストグラムの中央にある inside: を表示する例を取り上げます。
