Visualização de dados----ECharts-Pie Chart (6)
Enciclopédia Baidu - Gráfico de pizza
série de artigos Echarts
| título | endereço |
|---|---|
| Primeira experiência de Echarts | Portal |
| Configuração geral de Echarts | Portal |
| histograma | Portal |
| gráfico de linha | Portal |
| gráfico de dispersão | Portal |
| Site oficial do Echarts | Portal |
Implementação básica do gráfico de pizza
Etapas de implementação
1. Construa a estrutura de código mais básica de ECharts (este é o primeiro passo necessário para realizar qualquer gráfico)
- Importe o arquivo js (este arquivo js pode ser baixado do site oficial)
- Preparar um contêiner DOM
- Inicializar um objeto echarts
Você pode ver a operação específica ao definir a opção do item de configuração
2. Prepare os dados:
- A camada mais externa do grupo de dados é uma matriz
- Cada elemento do array é um objeto
- Cada objeto contém dois atributos: nome e valor
- Por exemplo: [{nome:'café da manhã',valor:'10'},{nome:'almoço',valor:'30'}]
3. Tipo de gráfico:
- Defina o tipo em série no item de configuração para torta
4. Implementação do código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>饼状图的基本实现</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div id="app" style="width: 600px;height: 400px;"></div>
<script>
// 1.Echarts 基本结构的创建
// 引入js文件---创建容器---初始化对象---配置配置项---
// 2.准备数据[{name;???, value:???},{}]
// 运动与健康：1100，餐饮：2800，外出与旅行：4500，衣物：2202，电子游戏：2421，医药：800
// 3.将type设置为pie
var myCharts = echarts.init(document.querySelector('#app'))
// 需要设置给饼图的数据
var pieData = [
{
name: '运动与健康',
value: '1100'
},
{
name: '餐饮',
value: '2800'
},
{
name: '外出与旅行',
value: '4500'
},
{
name: '衣物',
value: '2202'
},
{
name: '电子游戏',
value: '2421'
},
{
name: '医药',
value: '800'
}
]
var option = {
// 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了
series: [
{
type: 'pie',
data: pieData
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>
As renderizações são as seguintes:
Configurações de efeitos comuns para gráficos de pizza
1. Exibição de texto (observe que esta configuração não é exclusiva de gráficos de pizza, ela também pode ser usada em gráficos de barras, gráficos de linhas, mapas e outros gráficos), precisamos apenas adicionar a seguinte configuração em série:
label: {
//饼图文字的显示
show: true, //默认 显示文字
formatter: function (arg) {
console.log(arg);
return arg.name + ' 消费 ' + arg.value + " 元" +'\n'+ arg.percent + "%"
}
}
Depois de adicionar esta configuração na série, o diagrama de efeito:
Em relação ao formatador, aqui estão alguns suplementos:
formatador: usado para formatar o texto da legenda, suportando strings comuns, templates de strings e funções de retorno de chamada.
Exemplo:
// 使用普通字符串
formatter: 'Legend'
// 使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {
return 'Legend ' + name;
}
2. Raio e efeito de anel:
Para definir o raio do gráfico de pizza, você precisa adicionar um raio de item de configuração na série e seu valor pode ser
- número exato (unidade: px
- Porcentagem (relativamente calculada aqui é metade da largura do contêiner DOM, ensino médio e pequeno)
- Array (defina dois raios para obter o efeito de um anel)
// 在600x400的DOM容器中下面两个配置的图标大小是相同的
radius: 40 //饼图的半径
radius: '20%' //百分比参照的事宽度和高度中较小的那一部分的一半来进行百分比设置
efeito de anel
//圆环
radius: ['50%','80%']
Imagem do efeito:
3. Imagem do rouxinol:
- Enciclopédia Baidu – Diagrama Nightingale Rose : O principal efeito do diagrama Nightingale é que a exibição do raio do nosso gráfico de pizza será diferente, dependendo do valor correspondente a diferentes regiões
- Para realizar o diagrama Nightingale, você só precisa adicionar esta linha de código na série: roseType: 'radius'
Veja as renderizações:
4. Efeito selecionado:
// selectedMode: 'single' //选中的效果，能够将选中的区域偏离圆点一小段距离
selectedMode: 'multiple',
selectedOffset: 30
A imagem do efeito abaixo é para definir o selectedMode como múltiplo. Se você estiver interessado, pode tentar um único e também pode alterar o valor de selectedOffset para ver qual é o efeito.
Renderizações:
Finalmente, as regras antigas, o código completo está aqui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>饼状图的基本实现</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div id="app" style="width: 600px;height: 400px;"></div>
<script>
// 1.Echarts 基本结构的创建
// 引入js文件---创建容器---初始化对象---配置配置项---
// 2.准备数据[{name;???, value:???},{}]
// 运动与健康：1100，餐饮：2800，外出与旅行：4500，衣物：2202，电子游戏：2421，医药：800
// 3.将type设置为pie
var myCharts = echarts.init(document.querySelector('#app'))
// 需要设置给饼图的数据
var pieData = [
{
name: '运动与健康',
value: '1100'
},
{
name: '餐饮',
value: '2800'
},
{
name: '外出与旅行',
value: '4500'
},
{
name: '衣物',
value: '2202'
},
{
name: '电子游戏',
value: '2421'
},
{
name: '医药',
value: '800'
}
]
var option = {
// 注意：饼图不是直角坐标系图表，就不用配置x轴和y轴了
series: [
{
type: 'pie', // 类型： 饼图
data: pieData,//数据
label: {
//饼图文字的显示
show: true, //默认 显示文字
formatter: function (arg) {
console.log(arg);
return arg.name + ' 消费 ' + arg.value + " 元" +'\n'+ arg.percent + "%"
}
},
// radius: 20 //饼图的半径
// radius: '20%' //百分比参照的事宽度和高度中较小的那一部分的一半来进行百分比设置
// 圆环
// radius: ['50%','80%']
// 南丁格尔图 饼图的每一个部分的半径是不同的
// roseType: 'radius',
// selectedMode: 'single' //选中的效果，能够将选中的区域偏离圆点一小段距离
selectedMode: 'multiple',
selectedOffset: 30
}
]
}
myCharts.setOption(option)
</script>
</body>
</html>