Diagramme circulaire ECharts (anneau) : comment afficher la proportion de données et les changements structurels

Graphique circulaire ECharts (anneau) : comment afficher la proportion des données et les changements structurels

ECharts est une bibliothèque de visualisation de données basée sur JavaScript qui fournit une variété de types de graphiques, notamment des graphiques linéaires, des graphiques à barres et des nuages ​​de points, des cartes , etc. Parmi eux, les diagrammes circulaires sont un type de graphique couramment utilisé qui peut être utilisé pour afficher la proportion et les changements structurels des données. Cet article explique comment utiliser les diagrammes circulaires ECharts pour afficher les proportions de données et les changements structurels, et fournit des exemples de code spécifiques.

1. Format des données

Avant d'utiliser le diagramme circulaire ECharts, vous devez préparer les données et convertir le format des données au format requis par ECharts. Dans un diagramme circulaire, le format des données adopte généralement la méthode suivante :

data:[
  {name:'数据1',value:100},
  {name:'数据2',value:200},
  {name:'数据3',value:300},
  {name:'数据4',value:400}
]

où nom représente le nom des données et valeur représente la valeur des données. Il convient de noter que la valeur des données est généralement de type numérique. S'il s'agit d'un type de chaîne, elle doit être convertie à l'aide de parseInt() ou de parseFloat().

2. Diagramme circulaire de base

Ce qui suit montre comment utiliser ECharts pour dessiner un diagramme circulaire de base. Tout d’abord, vous devez présenter la bibliothèque et le thème ECharts, créer un élément DOM pour afficher le graphique et initialiser une instance ECharts. Ensuite, définissez la configuration de base du diagramme circulaire, notamment le titre, la légende, la couleur, etc. Enfin, les données sont transmises au diagramme circulaire pour le rendu.

Code HTML :

<div id="pie1" style="width: 600px;height:400px;"></div>

Code JavaScript :

// 引入ECharts库和主题
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>

// 创建一个DOM元素用于显示图表
var chart1 = echarts.init(document.getElementById('pie1'),'macarons');

// 设置饼图的基本配置
var option1 = {
  title: {
    text: '基本饼图示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:[
        {value:100, name:'数据1'},
        {value:200, name:'数据2'},
        {value:300, name:'数据3'},
        {value:400, name:'数据4'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

// 将数据传入到饼图中进行渲染
chart1.setOption(option1);

Dans le code ci-dessus, le titre du graphique, les astuces sur les données, la légende, le rayon du diagramme circulaire, les données, etc. sont définis. L'effet du diagramme circulaire est le suivant :

3. Le graphique à secteurs est une variante du graphique à secteurs de base dans lequel le centre du graphique à secteurs est creusé pour former une figure en forme de beignet. Dans ECharts, vous pouvez définir la propriété innerRadius du diagramme circulaire pour obtenir cet effet. L'exemple ci-dessous montre comment dessiner un diagramme circulaire en forme de beignet à l'aide d'ECharts.

Code HTML :

<div id="pie2" style="width: 600px;height:400px;"></div>

Code JavaScript :

// 创建一个DOM元素用于显示图表
var chart2 = echarts.init(document.getElementById('pie2'),'macarons');

// 设置饼图的基本配置
var option2 = {
  title: {
    text: '环形饼图示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:[
        {value:100, name:'数据1'},
        {value:200, name:'数据2'},
        {value:300, name:'数据3'},
        {value:400, name:'数据4'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      // 设置内半径
      innerRadius:'50%'
    }
  ]
};

// 将数据传入到饼图中进行渲染
chart2.setOption(option2);

Le code ci-dessus est presque le même que le code du diagramme circulaire de base, sauf que la propriété innerRadius est définie dans la série. L'effet de ce diagramme circulaire est le suivant :

Quatre changements dans la structure des données

. tarte En plus d'afficher la proportion de données, les graphiques peuvent également être utilisés pour montrer les changements dans la structure des données. Dans ECharts, cet effet peut être obtenu en modifiant et en restituant les données. L'exemple suivant montre comment utiliser les données dans un diagramme circulaire pour afficher l'effet des modifications apportées à la structure des données.

Code HTML :

<div id="pie3" style="width: 600px;height:400px;"></div>

Code JavaScript :

// 数据源
var data1 = [
  {value:100, name:'数据1'},
  {value:200, name:'数据2'},
  {value:300, name:'数据3'},
  {value:400, name:'数据4'}
];
var data2 = [
  {value:450, name:'数据5'},
  {value:250, name:'数据6'},
  {value:200, name:'数据7'},
  {value:150, name:'数据8'}
];

// 创建一个DOM元素用于显示图表
var chart3 = echarts.init(document.getElementById('pie3'),'macarons');

// 设置饼图的基本配置
var option3 = {
  title: {
    text: '数据结构变化示例',
    subtext: '数据来自Demo',
    x: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b}: {c} ({d}%)"
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data:['数据1','数据2','数据3','数据4']
  },
  series: [
    {
      name:'饼图',
      type:'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: true,
          textStyle: {
            fontSize: '30',
            fontWeight: 'bold'
          }
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data:data1,
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      innerRadius:'50%'
    }
  ]
};

// 将数据1传入到饼图中进行渲染
chart3.setOption(option3);

// 点击事件
chart3.on('click', function (params) {
  // alert(params.name);
  if(params.name=='数据1'){
    option3.legend.data = ['数据5','数据6','数据7','数据8'];
    option3.series[0].data = data2;
  }else{
    option3.legend.data = ['数据1','数据2','数据3','数据4'];
    option3.series[0].data = data1;
  }
  chart3.setOption(option3);
});

Dans le code ci-dessus, nous définissons deux sources de données data1 et data2, qui représentent respectivement deux structures de données différentes. Un événement de clic est configuré dans le graphique à secteurs. Lorsque le graphique à secteurs est cliqué, il sera jugé en fonction du nom des données cliquées. Si le clic correspond à la donnée 1 dans data1, les données de la légende et de la série seront modifiées en data2. structure de données, sinon modifiez-la en structure de données data1. Enfin, appelez la méthode setOption() pour restituer le graphique modifié. L'effet de ce changement de structure de données est illustré dans la figure ci-dessous :

En résumé, cet article présente comment utiliser ECharts, dessine des diagrammes circulaires et fournit des exemples de code spécifiques. En plus des diagrammes circulaires et des diagrammes circulaires de base, il montre également comment exploiter les données dans les diagrammes circulaires pour afficher les effets des modifications de la structure des données. Les lecteurs peuvent apporter les modifications et optimisations correspondantes en fonction de leurs propres besoins et formats de données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!