ECharts 円グラフ
前の章では、ECharts を使用して簡単な棒グラフを描く方法を学びました。この章では、円グラフを描きます。
円グラフは、主に扇形の弧度を使用して、さまざまなカテゴリのデータが合計に占める割合を表します。データ形式は棒グラフよりも単純で、1次元の数値のみであり、カテゴリを指定する必要はありません。直交座標系上にないため、xAxis、yAxis も必要ありません。
サンプル
myChart.setOption({
series : [
{
name: 'アクセス元',
type: 'pie', //グラフの種類を円グラフに設定
radius: '55%', //円グラフの半径。外側の半径は、表示領域のサイズ（コンテナの高さと幅のうち小さい方）の55%の長さです。
data:[ //データ配列。name はデータ項目の名前、value はデータ項目の値です。
{value:235, name:'動画広告'},
{value:274, name:'アフィリエイト広告'},
{value:310, name:'メールマーケティング'},
{value:335, name:'直接アクセス'},
{value:400, name:'検索エンジン'}
]
}
]
})
試してみる »
パラメータを設定することで、roseType: 'angle'円グラフをナイチンゲール図として表示できます。
サンプル
option = {
series : [
{
name: 'アクセス元',
type: 'pie',
radius: '55%',
roseType: 'angle',
data:[
{value:235, name:'動画広告'},
{value:274, name:'アフィリエイト広告'},
{value:310, name:'メールマーケティング'},
{value:335, name:'直接アクセス'},
{value:400, name:'検索エンジン'}
]
}
]
};
試してみる »
影の設定
itemStyle パラメータでは、影、透明度、色、枠線の色、枠線の幅などを設定できます：
サンプル
option = {
series : [
{
name: 'アクセス元',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'動画広告'},
{value:274, name:'アフィリエイト広告'},
{value:310, name:'メールマーケティング'},
{value:335, name:'直接アクセス'},
{value:400, name:'検索エンジン'}
],
roseType: 'angle',
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
試してみる »