Maison > Article > interface Web > Graphique de water-polo ECharts : comment afficher la proportion de données et la réalisation des objectifs
Graphique de water-polo ECharts : Comment afficher la proportion de données et la réalisation des objectifs
Introduction :
Dans le domaine de la visualisation des données, le graphique de water-polo est un type de graphique couramment utilisé qui peut afficher visuellement la proportion de données et la réalisation des objectifs. ECharts est une puissante bibliothèque de visualisation de données qui offre une multitude de types de graphiques parmi lesquels les développeurs peuvent choisir. Cet article présentera en détail comment utiliser ECharts pour créer un graphique de water-polo et afficher les proportions de données et la réalisation des objectifs, et fournira des exemples de code spécifiques.
1. Qu'est-ce qu'un diagramme de water-polo ?
Le graphique de water-polo est un graphique en forme de beignet spécial qui utilise la taille de l'anneau pour représenter la proportion de données, tout en ajoutant un cercle plein à l'intérieur de l'anneau pour représenter l'achèvement de l'objectif. Les graphiques de water-polo sont généralement utilisés pour afficher des données telles que les pourcentages et les progrès. Ils reflètent visuellement l'écart entre les données et les objectifs.
2. Utilisez ECharts pour créer un tableau de water-polo
Introduisez la bibliothèque ECharts
Tout d'abord, introduisez la bibliothèque ECharts dans le projet, qui peut être introduite en téléchargeant directement le code source ou en utilisant un CDN. Par exemple :
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
Créez un conteneur
Créez un conteneur en HTML pour afficher le tableau de water-polo, par exemple :
<div id="waterball-chart" style="width: 400px; height: 400px;"></div>
Écrivez du code JavaScript
Utilisez ECharts pour créer un tableau de water-polo via le code JavaScript et configurez les paramètres. Voici un exemple de code :
// 初始化ECharts实例 var myChart = echarts.init(document.getElementById('waterball-chart')); // 指定图表的配置项和数据 var option = { series: [{ type: 'liquidFill', data: [0.6], // 数据占比,范围为[0,1] shape: 'circle', outline: { show: false }, backgroundStyle: { color: '#FFA500' }, label: { show: true, position: ['50%', '50%'], formatter: function(value) { return Math.round(value * 100) + '%'; // 格式化显示百分比 }, fontSize: 32, fontWeight: 'bold' }, itemStyle: { color: '#FF4500' }, emphasis: { itemStyle: { color: '#FF0000' } } }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option);
Tableau de rendu
Appliquez les éléments de configuration au tableau de water-polo en appelant la méthode setOption
et effectuez le rendu. Par exemple : setOption
方法将配置项应用到水球图中,并渲染出来。例如:
myChart.setOption(option);
三、代码解析
上述示例代码中,我们通过ECharts的liquidFill
类型创建了一个水球图。其中,配置项series
用于配置水球图的样式、数据等信息。
data
字段表示数据占比,取值范围为[0,1],示例中数据占比为0.6,即60%。shape
字段表示水球图的形状,可以设置为circle
(圆形)或rect
(长方形)。outline
字段表示是否显示水球图的轮廓线,这里设置为不显示。backgroundStyle
字段表示水球图的背景样式,示例中颜色为橙色(#FFA500)。label
字段表示水球图中显示的文本标签,通过设置show
、position
、formatter
等参数控制标签的显示位置和格式。itemStyle
字段表示水球图的填充样式,示例中颜色为橙红色(#FF4500)。emphasis
rrreeeDans l'exemple de code ci-dessus, nous avons créé un graphique de water-polo via le type liquidFill
d'ECharts. Parmi eux, l'élément de configuration série
est utilisé pour configurer le style, les données et d'autres informations de la carte de water-polo.
Le champ data
indique la proportion de données et la plage de valeurs est [0,1]. Dans l'exemple, la proportion de données est de 0,6, soit 60 %.
Le champ shape
représente la forme du diagramme de water-polo, qui peut être défini sur circle
(cercle) ou rect
(rectangle).
contour
indique s'il faut afficher le contour du diagramme de water-polo, qui est configuré ici pour ne pas être affiché. backgroundStyle
indique le style d'arrière-plan de l'image de water-polo. Dans l'exemple, la couleur est orange (#FFA500). label
représente l'étiquette de texte affichée dans le tableau de water-polo, en définissant des paramètres tels que show
, position
et formateur
Contrôle la position d'affichage et le format des étiquettes. itemStyle
représente le style de remplissage du diagramme de water-polo. Dans l'exemple, la couleur est orange-rouge (#FF4500). 🎜🎜Le champ emphasis
représente le style de surbrillance du tableau de water-polo. Dans l'exemple, la couleur de surbrillance est le rouge (#FF0000). 🎜🎜🎜En modifiant les valeurs de ces éléments de configuration, vous pouvez créer et personnaliser des cartes de water-polo selon vos propres besoins. 🎜🎜Conclusion : 🎜Cet article présente en détail comment utiliser ECharts pour créer un graphique de water-polo, et montre la proportion de données et l'atteinte des objectifs. Grâce à des exemples de code simples, j'espère que les lecteurs pourront rapidement commencer à utiliser ECharts pour dessiner des diagrammes de water-polo et les personnaliser en fonction des besoins réels. ECharts est une bibliothèque de visualisation de données puissante et facile à utiliser qui peut aider les développeurs à mieux afficher et comprendre les données. Essayez d'utiliser ECharts pour créer un graphique de water-polo afin de rendre la visualisation de vos données plus vivante et intéressante ! 🎜🎜Liens de référence : 🎜🎜🎜Documentation officielle ECharts : https://echarts.apache.org/zh/index.html 🎜🎜Exemples officiels ECharts : https://echarts.apache.org/examples/zh/index.html 🎜🎜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!