ECharts学習ノート02、餅図と南丁格爾図
2034 ワード
ターゲット
環境の構築新規フォルダ である.
作成 を するために した. を する があります. は、 を する がある.
、
echartsを使用して円グラフを描画し、これに基づいてナンディンゲル円グラフを描画します.例は次のとおりです.環境の構築
note02、ディレクトリ構造は以下の./note02/
|---index.html
|---index.js
|---index.css
|---echarts.js作成
index.html
echarts note01
cssファイルの articleとasideを にするには、floatスタイルmain{
width: 800px;
height: 400px;
}
main > article{
width: 50%;
height: 100%;
float: left;
}
main > aside{
width: 50%;
height: 100%;
float: right;
}jsファイルの option.series[0].type = 'pie'を する があります. では、 に づいてroseType: 'angle' 'use strict';
//
var myPie = echarts.init(document.getElementsByTagName('article')[0]);
var option = {
title:{
text: ' '
},
series:[{
name: ' ',
type: 'pie',
// radius min(width, heigh) 60%
radius: '60%',
//
data: [
{value: 11, name: 'video'},
{value: 12, name: 'audio'},
{value: 13, name: 'mail'},
{value: 14, name: 'website'},
{value: 15, name: 'app'},
]
}],
};
myPie.setOption(option);
//
var myRosePie = echarts.init(document.getElementsByTagName('aside')[0]);
option.title.text = ' ';
option.series[0].roseType = 'angle';
option.series[0].radius = '75%';
myRosePie.setOption(option);、
EChartを いて と を いた である. みして、 の ~