Круговая диаграмма ECharts
В предыдущих главах мы научились использовать ECharts для построения простой столбчатой диаграммы. В этой главе мы построим круговую диаграмму.
Круговая диаграмма в основном использует дуги секторов, чтобы показать долю данных разных категорий в общей сумме. Формат её данных проще, чем у столбчатой диаграммы: только одномерные значения, и категории не нужны. Поскольку она не находится в декартовой системе координат, xAxis и yAxis также не требуются.
Пример
myChart.setOption({
series : [
{
name: 'Источник трафика',
type: 'pie', //Установить тип диаграммы как круговую
radius: '55%', //Радиус круговой диаграммы: внешний радиус равен 55% размера видимой области (меньшей из высоты и ширины контейнера).
data:[ //Массив данных, где name — имя элемента данных, а value — значение элемента данных.
{value:235, name:'Видеореклама'},
{value:274, name:'Партнёрская реклама'},
{value:310, name:'Email-маркетинг'},
{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:'Email-маркетинг'},
{value:335, name:'Прямой доступ'},
{value:400, name:'Поисковая система'}
]
}
]
};
Попробуйте сами »
Настройка тени
Параметр itemStyle может задавать такие вещи, как тень, прозрачность, цвет, цвет границы, ширину границы и т. д.:
Пример
option = {
series : [
{
name: 'Источник трафика',
type: 'pie',
radius: '55%',
data:[
{value:235, name:'Видеореклама'},
{value:274, name:'Партнёрская реклама'},
{value:310, name:'Email-маркетинг'},
{value:335, name:'Прямой доступ'},
{value:400, name:'Поисковая система'}
],
roseType: 'angle',
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
Попробуйте сами »