Maison > Article > interface Web > Comment utiliser un graphique en rose pour afficher la proportion de données dans ECharts
Comment utiliser le graphique en roses pour afficher la proportion des données dans ECharts
Résumé : Le graphique en roses est un outil d'analyse visuelle des données qui peut être utilisé pour afficher la proportion des données. Cet article explique comment utiliser la bibliothèque ECharts pour dessiner un graphique en rose sur une page Web et fournit des exemples de code spécifiques.
Introduction : Dans l'analyse et la visualisation des données, le graphique en rose est un type de graphique couramment utilisé. Sa caractéristique est que le centre du cercle est l'origine et la proportion de données est affichée sous différents angles de secteur. Grâce au graphique en roses, nous pouvons comparer visuellement les proportions de différentes catégories de données. ECharts est une puissante bibliothèque de visualisation de données qui prend en charge plusieurs types de graphiques, y compris les graphiques en roses.
Cet article sera divisé en parties suivantes :
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
var data = [ {name: '地区1', value: 50}, {name: '地区2', value: 30}, {name: '地区3', value: 80}, {name: '地区4', value: 60}, {name: '地区5', value: 40} ];
Parmi eux, le nom représente le nom de la région, et la valeur représente le volume des ventes dans la région.
<div id="chart" style="width: 800px; height: 600px;"></div>
var option = { title: { text: '产品销售占比', left: 'center' }, legend: { orient: 'vertical', left: 'left', data: ['地区1', '地区2', '地区3', '地区4', '地区5'] }, color: ['#2378e1', '#60a1bc', '#87d9ef', '#de742f', '#7dbb94'] };
Parmi eux, le titre représente le titre du graphique, la légende représente la légende, les données représentent le nom de la légende et la couleur représente la couleur du secteur.
var chart = echarts.init(document.getElementById('chart')); chart.setOption(option);
Grâce aux étapes ci-dessus, nous pouvons dessiner un diagramme de rose sur la page Web.
Résumé : cet article explique comment utiliser la bibliothèque ECharts pour dessiner un graphique en rose dans une page Web et fournit des exemples de code spécifiques. Grâce au graphique en roses, nous pouvons afficher visuellement la proportion de données et nous aider à effectuer l'analyse des données et à prendre des décisions. J'espère que cet article pourra aider les lecteurs à comprendre et à utiliser les graphiques en roses.
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!