Diagramme circulaire ECharts : comment afficher les proportions des données

Avec l'application généralisée de la visualisation de données, ECharts, une excellente bibliothèque de visualisation, a également reçu de plus en plus d'attention. Parmi eux, les diagrammes circulaires sont largement utilisés pour afficher la proportion de données. Cet article explique comment utiliser les diagrammes circulaires ECharts pour afficher les proportions de données et fournit des exemples de code spécifiques.

1. Concepts de base des diagrammes circulaires ECharts

Tout d'abord, nous devons comprendre les concepts de base des diagrammes circulaires. Les diagrammes circulaires sont souvent utilisés pour représenter la proportion de données. Des valeurs spécifiques sont converties en tailles d'angle, puis représentées par la taille de la zone du secteur. La taille de chaque secteur est proportionnelle à leur valeur numérique.

2. Comment implémenter le diagramme circulaire ECharts

Pour utiliser ECharts pour dessiner un diagramme circulaire, vous devez d'abord introduire la bibliothèque ECharts et créer une balise div avec une taille spécifiée pour afficher le diagramme circulaire. Le code spécifique est le suivant :

<style type="text/css">
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>

Parmi eux, la balise style permet de préciser la taille de la balise div où se trouve le camembert. La balise script introduit la version min de la bibliothèque ECharts.

Ensuite, nous devons implémenter le diagramme circulaire via du code JavaScript. Le code spécifique est le suivant :

var myChart = echarts.init(document.getElementById('myChart'));

var option = {
  title: {
    text: '饼图示例',
    left: 'center'
  },
  tooltip: {},
  legend: {
    data:['数据1', '数据2', '数据3']
  },
  series: [
    {
      name:'数据占比',
      type:'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data:[
        {value:335, name:'数据1'},
        {value:310, name:'数据2'},
        {value:234, name:'数据3'}
      ],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

myChart.setOption(option);

Dans le code ci-dessus, nous utilisons d'abord la méthode echarts.init() pour initialiser l'instance ECharts. Ensuite, nous définissons une option d'objet JavaScript, qui définit diverses propriétés et données nécessaires dans le diagramme circulaire. Enfin, nous utilisons la méthode setOption() pour appliquer cet objet option à l'instance ECharts afin de générer un diagramme circulaire.

Plus précisément, l'objet option contient les attributs suivants :

1. title : utilisé pour définir le titre du graphique à secteurs ;
2. tooltip : utilisé pour définir les informations d'invite lorsque la souris flotte
3. legend : utilisé pour définir le Graphique à secteurs Étiquettes pour chaque zone de secteur du graphique ;
4. série : utilisée pour définir des séries de données spécifiques dans le graphique à secteurs, y compris le rayon, les données, le style, etc.

3. Paramètre de style du diagramme circulaire ECharts

En plus de l'affichage des données de base, le diagramme circulaire ECharts fournit également une variété d'options de réglage de style, et différents styles de diagrammes circulaires peuvent être obtenus en modifiant les attributs correspondants.

1. Rayon intérieur et extérieur

Ajustez le rayon intérieur et extérieur du diagramme circulaire en définissant l'attribut rayon pour contrôler la taille de la zone du secteur. Le code suivant :

series: [
  {
    type: 'pie',
    radius: ['50%', '70%'],
    data: [
      {value: 335, name: '数据1'},
      {value: 310, name: '数据2'},
      {value: 234, name: '数据3'},
      {value: 135, name: '数据4'},
      {value: 1548, name: '数据5'}
    ]
  }
]

Dans le code ci-dessus, l'attribut radius contient un tableau, et les deux valeurs du tableau représentent respectivement le pourcentage du rayon intérieur et extérieur. Dans cet exemple, le rayon intérieur est de 50 % et le rayon extérieur est de 70 %.

2. Position de la légende

Ajustez la position et la direction de la légende en définissant les attributs x, y et orient dans l'attribut légende. Le code suivant :

legend: {
  x: 'left',
  y: 'center',
  orient: 'vertical',
  data: ['数据1', '数据2', '数据3', '数据4', '数据5']
}

Dans le code ci-dessus, l'attribut x définit la position horizontale de la légende à gauche, l'attribut y définit la position verticale de la légende au centre et l'attribut orient définit la direction de la légende. vers la direction verticale.

3. Effet d'ombre

En définissant l'attribut d'accentuation dans l'attribut itemStyle, vous pouvez ajouter une ombre et d'autres effets à la zone en forme d'éventail pour améliorer l'effet visuel du diagramme circulaire. Le code suivant :

itemStyle: {
  emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
  }
}

Dans le code ci-dessus, shadowBlur représente le degré de flou de l'ombre, shadowOffsetX et shadowOffsetY représentent le décalage horizontal et vertical de l'ombre et shadowColor représente la couleur de l'ombre.

4. Exemple de diagramme circulaire ECharts

Ci-dessous, nous donnons un exemple de diagramme circulaire ECharts spécifique, qui contient les données de base et les paramètres de style mentionnés ci-dessus. Le code est le suivant :

<style type="text/css">
  #myChart {
    width: 400px;
    height: 400px;
  }
</style>
<div id="myChart"></div>
<script src="echarts.min.js"></script>
<script>
  var myChart = echarts.init(document.getElementById('myChart'));
  var option = {
    title: {
      text: '饼图示例',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      top: 20,
      data:['数据1', '数据2', '数据3', '数据4', '数据5']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data:[
          {value:335, name:'数据1'},
          {value:310, name:'数据2'},
          {value:234, name:'数据3'},
          {value:135, name:'数据4'},
          {value:1548, name:'数据5'}
        ]
      }
    ]
  };
  myChart.setOption(option);
</script>

Ce diagramme circulaire comprend les fonctionnalités suivantes :

1. Ajouter une légende et ajuster la position de la légende dans le coin supérieur gauche
2. Ajouter une fenêtre contextuelle lorsque la souris survole et afficher ; le pourcentage ;
3. Ajout d'effets d'ombre et définition d'effets de surbrillance lorsque la souris survole.

Ce qui précède est une introduction à la mise en œuvre de base des diagrammes circulaires ECharts et quelques exemples de définition de style. J'espère que les lecteurs pourront avoir une certaine compréhension des diagrammes circulaires ECharts grâce à cet article et être capables de les appliquer correctement dans le développement réel.

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!