arrière-plan
La possibilité d'afficher des graphiques est la capacité de base que la plate-forme doit avoir.Actuellement, echarts est le meilleur choix.
Dans les versions antérieures des graphiques, différents styles de graphique nécessitaient différents formats de données, ce qui nécessitait une encapsulation complexe pour être facile à utiliser. Les responsables de Baidu sont également conscients de ce problème. Dans la version 4.0 d'echarts, il fournit une prise en charge des attributs de jeu de données et un format de données unifié. Il a également envisagé d'encapsuler les graphiques couramment utilisés sur la base de cette nouvelle fonctionnalité.
Plus tard, j'ai découvert que v-charts, un composant open source produit par l'équipe Ele.me, fournit uniformément un format de données convivial à la fois pour le front et le back-end. Il vous suffit de définir des éléments de configuration simples pour générer facilement des graphiques communs .
Mais v-charts reste dans la version vue2.x et vue3.x n'a aucun mouvement.
La version officielle de vue-echarts Cet article explique comment intégrer la plate-forme d'un point de vue pratique, y compris les solutions d'intégration, les implémentations spécifiques et les précautions.
Pré-recherche technologique
adresse officielle vue-echarts
https://github.com/ecomfe/vue-echarts/blob/HEAD/README.zh-Hans.md
L'explication est trop simple. Si vous ne lisez que les informations ici et ne comprenez pas le concept et la configuration des echarts eux-mêmes, il sera très difficile à intégrer et à utiliser. Il est recommandé de comprendre les connaissances connexes suivantes.
Consultez la documentation du site Web officiel des diagrammes echarts pour comprendre les concepts de base, tels que les axes de coordonnées, les légendes, les ensembles de données, etc.
https://echarts.apache.org/handbook/zh/concepts/chart-size
Voir les instructions de configuration du document du site Web officiel du graphique echarts
https://echarts.apache.org/zh/option.html#legend.top
objectif d'intégration
echarts fournit une grande variété de graphiques, environ 40 catégories, voir https://echarts.apache.org/examples/zh/index.html#chart-type-line pour plus de détails .
Dans les systèmes logiciels réels, les trois types de graphiques sont les plus courants et les plus pratiques : les graphiques linéaires, les histogrammes et les graphiques à secteurs.
L'objectif principal de l'intégration de la plateforme est de réaliser l'intégration de ces trois types de graphiques. Si un besoin métier spécifique utilise d'autres types de styles de graphique, il peut également être réalisé en utilisant directement les composants de graphique natifs echarts.
Remarque : Pour les applications d'entreprise, les echarts ne sont pas le seul moyen de répondre aux exigences en matière de création de graphiques. Pour les exigences de rapport complexes réelles, en particulier le cockpit de gestion, des outils de rapport spéciaux comme Fanruan sont souvent utilisés. Les outils de graphique et les outils de rapport ont un positionnement différent, mais leurs fonctions se chevauchent. L'outil de graphique s'appuie sur l'interface de service back-end, et le front-end effectue un affichage convivial, et la requête et la conversion des données sont toutes terminées dans le back-end de l'application ; tandis que la fonction de rapport est souvent directement connectée à la base de données pour le le développement et le déploiement de modèles de rapport, ainsi que la requête et la conversion des données sont principalement dans le rapport Il est complété côté application puis intégré dans le système d'application Les méthodes et mécanismes réels sont différents.
options de configuration
Pour envisager la solution d'intégration, comprenez d'abord l'état actuel des composants de graphique echarts. Les exigences pour les options de configuration de ces trois types de graphiques sont les suivantes :
diagramme circulaire
option = {
series: [
{
type: 'pie',
data: [
{
value: 335,
name: '直接访问'
},
{
value: 234,
name: '联盟广告'
},
{
value: 1548,
name: '搜索引擎'
}
]
}
]
};
histogramme
option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
},
series: [
{
type: 'bar',
data: [23, 24, 18, 25, 27, 28, 25]
}
]
};
graphique en ligne
option = {
xAxis: {
data: ['A', 'B', 'C']
},
yAxis: {
},
series: [
{
data: [120, 200, 150],
type: 'line'
}
]
};
analyse de configuration
Même remarque
Type de graphique, unifié dans l'attribut series.type
différence
Le graphique à secteurs n'a pas le concept d'axe des X et d'axe des Y. Configurez un tableau d'objets dans series.data, le nom représente la catégorie et la valeur représente la valeur. Le graphique en courbes est identique à l'histogramme, basé sur
le Système de coordonnées cartésiennes, avec axe x et axe y, xAxis La classe .data configure un tableau unidimensionnel comme catégorie, et series.data configure un tableau unidimensionnel comme valeur
Solutions d'intégration
Mode de mise en œuvre - Mode traditionnel VS mode jeu de données
Sur la base de l'analyse ci-dessus, un composant peut être empaqueté pour chacun des graphiques à secteurs, histogrammes et graphiques linéaires. Les paramètres par défaut sont fournis à l'intérieur du composant, et les attributs clés, tels que les données et les options, sont exposés en tant qu'attributs pour que l'appelant utiliser.
Cette approche peut fonctionner, mais n'est pas la meilleure solution. Dans la section de fond initiale, l'évolution des produits echart a été mentionnée. Dans les versions antérieures des graphiques, différents styles de graphique nécessitaient différents formats de données, qui devaient être encapsulés pour en faciliter l'utilisation. L'officiel est également conscient de ce problème et fournit la prise en charge des attributs d'ensemble de données dans la version 4.0 d'echarts, fournissant un format de données unifié.
L'avantage d'utiliser des jeux de données vient principalement de la séparation des données et de la configuration, de sorte que les données peuvent être réutilisées par plusieurs composants. La description officielle est citée ci-dessous :
Le jeu de données (dataset) est un composant spécialement utilisé pour gérer les données. Bien que chaque série puisse définir des données dans series.data, mais comme ECharts4 prend en charge les ensembles de données, il est recommandé d'utiliser des ensembles de données pour gérer les données. De ce fait, les données peuvent être réutilisées par plusieurs composants, et il est également pratique de séparer le style de configuration "données et autres configurations". Après tout, lors de l'exécution, les données sont les plus fréquemment modifiées, tandis que les autres configurations ne changent généralement pas.
Définir des données dans une série
Si les données sont définies dans une série, par exemple :
option = {
xAxis: {
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {
},
series: [
{
type: 'bar',
name: '2015',
data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
name: '2016',
data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
name: '2017',
data: [97.7, 83.1, 92.5, 78.1]
}
]
L'avantage de cette méthode est qu'elle convient à certaines personnalisations de type de données pour certaines structures de données spéciales (telles que "arbre", "graphe" et données très volumineuses). Mais l'inconvénient est que les utilisateurs doivent souvent traiter les données en premier et définir la division des données dans chaque série (et axe des catégories). De plus, il n'est pas propice au partage de plusieurs séries d'une seule donnée, et il n'est pas non plus propice à l'arrangement cartographique des types de graphiques et des séries basés sur les données d'origine.
La définition des données dans le jeu de données
et la définition des données dans le jeu de données (jeu de données) auront ces avantages :
- Être capable de se rapprocher de la manière courante de penser de la visualisation de données : (I) fournir des données, (II) spécifier le mappage des données à la vision, de manière à former un graphique.
- Les données et les autres configurations peuvent être séparées. Les données changent constamment et les autres configurations sont souvent inchangées. La séparation est facile à gérer séparément.
- Les données peuvent être réutilisées par plusieurs séries ou composants. Pour les scénarios comportant une grande quantité de données, il n'est pas nécessaire de créer une donnée pour chaque série.
- Prend en charge les formats de données les plus couramment utilisés, tels que les tableaux bidimensionnels, les tableaux d'objets, etc., évite dans une certaine mesure aux utilisateurs de convertir les formats de données.
Source : https://echarts.apache.org/handbook/zh/concepts/dataset/
Le fonctionnaire a été très clair sur les avantages du jeu de données, je n'entrerai donc pas dans les détails.Les avantages de choisir le mode jeu de données sont évidents.
La nécessité de l'encapsulation des composants
Le vue-echarts officiel a en fait bien encapsulé les echarts, notamment en fournissant des configurations par défaut, en exposant des propriétés et en fournissant des événements et des méthodes.
Parlons ensuite de la nécessité d'un conditionnement secondaire. L'intégration de la plate-forme nécessite-t-elle toujours un conditionnement secondaire ?
Si vous utilisez directement le composant vue-echarts, l'avantage est que la qualité du composant est relativement élevée et qu'il continuera à être mis à jour à l'avenir.L'inconvénient est que vous devez comprendre les concepts de base et les informations de configuration des echarts , suivre les spécifications et les exigences des echarts et avoir un certain coût d'apprentissage.
S'il est encapsulé deux fois, les informations de configuration des echarts peuvent être encapsulées. Par exemple, un composant est spécialement encapsulé pour le graphique à secteurs et une donnée d'attribut est exposée pour recevoir les données. Les autres détails sont ignorés et l'implémentation par défaut est fournie. L'inconvénient est que, il est de peu de valeur et d'importance d'envelopper les propriétés, les événements et les méthodes du composant vue-echarts dans une autre couche.
De plus, parmi les composants de packaging fournis avec le framework vue-element-plus-admin, il existe un packaging secondaire du composant vue-echarts. Lors de son utilisation, il vous suffit de saisir l'option de configuration et la hauteur.
Considérant que le vue-echarts officiel lui-même a une qualité d'emballage élevée, une grande flexibilité et une grande évolutivité, il ne sera pas emballé pour le moment, et l'emballage secondaire sera envisagé à l'avenir lorsqu'il y aura un besoin plus clair d'emballage.
Dans le même temps, étant donné qu'echart lui-même fournit le mode ensemble de données et la fonction de mappage de données, il n'est pas nécessaire d'encapsuler spécifiquement l'objet vo pour l'interaction frontale et dorsale, et la demande de repos existante peut être réutilisée pour renvoyer l'objet de l'entité Array, configurez le mappage des données dans les echarts.
Mise en œuvre
Installer
pnpm install echarts vue-echarts
Notez que ces deux doivent être installés en même temps, pas seulement vue-echarts.
introduire
Modifier le fichier main.js pour ajouter l'introduction et l'initialisation des echarts
// echart图表
import "echarts"
import ECharts from "vue-echarts"
// 创建实例
const setupAll = async () => {
const app = createApp(App)
略
// echart图表
app.component('v-chart', ECharts)
app.mount('#app')
}
Le mode d'importation complet effectivement adopté ici sera optimisé ultérieurement pour ne réaliser que les graphiques utilisés dans les trois grandes catégories de graphiques linéaires, histogrammes et camemberts, réduisant ainsi le volume.
utiliser
Créez un nouveau répertoire echart sous le répertoire modules du projet frontal pour stocker des exemples de graphiques et créez trois graphiques typiques en dessous. Et utilisez la fonction portlet de la plateforme pour définir.
Vous pouvez le configurer comme votre propre bureau directement en faisant glisser, comme indiqué ci-dessous
L'effet final est le suivant :
ce qui suit est l'implémentation du code, faites attention à la manière dont l'ensemble de données est utilisé,
Graphique à secteurs : Sources d'utilisateurs
<template>
<v-chart :option="option" theme="auto" :autoresize="true" style="width: 100%; height: 300px" />
</template>
<script>
export default {
data() {
return {
option: {
dataset: {
source: [
['数量', '来源'],
[335, '直接访问'],
[310, '邮件营销'],
[234, '联盟广告'],
[135, '视频广告'],
[1548, '搜索引擎']
]
},
title: {
show: false
},
grid: {
top: 20,
bottom: 0
},
tooltip: {
trigger: 'item',
formatter: function (params) {
// 只返回第一列数据
return params.data[0] + '(' + params.percent + '%)'
}
},
legend: {
orient: 'horizontal',
top: 'bottom',
left: 'center'
},
series: [
{
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
encode: {
tooltip: [0, 1],
value: 0,
itemName: 1
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
}
},
methods: {}
}
</script>
<style></style>
L'introduction du contenu sur le site officiel basé sur l'ensemble de données et le mappage des données est relativement dispersée.En fait, vous devez toujours essayer de modifier vous-même la configuration pour confirmer la fonction des paramètres et obtenir l'effet final.
A noter qu'il y a deux endroits.
L'un est le mappage des données, comme illustré dans la figure ci-dessous. value : 0 signifie que la colonne 0 du jeu de données est utilisée comme données, et itemName : 1 signifie que la colonne 1 du jeu de données est utilisée comme dimension. Mapper le mauvais graphique risque d'afficher des informations incomplètes ou simplement d'afficher un écran vide.
encode: {
tooltip: [0, 1],
value: 0,
itemName: 1
}
La seconde est que lorsque la souris survole une certaine zone, elle flottera pour afficher plus d'informations. La configuration par défaut est que
si vous souhaitez afficher la proportion, vous devez réécrire vous-même la méthode du formateur, comme indiqué dans la figure ci-dessous
tooltip: {
trigger: 'item',
formatter: function (params) {
// 只返回第一列数据
return params.data[0] + '(' + params.percent + '%)'
}
}
L'effet est le suivant :
l'effet d'affichage n'est en effet pas aussi beau que le défaut officiel, mais il peut être davantage contrôlé. Voici juste une façon de le personnaliser.
Ces contenus ne sont pas mentionnés sur le site officiel. Je l'ai exploré moi-même et j'ai imprimé les informations sur les paramètres avec console.log. J'ai trouvé qu'avec l'attribut pourcentage, je n'ai pas besoin de faire le calcul moi-même.
Utilisateurs actifs hebdomadaires : histogramme
<template>
<v-chart :option="option" theme="auto" :autoresize="true" style="width: 100%; height: 300px" />
</template>
<script>
export default {
data() {
return {
option: {
dataset: {
source: [
['count', 'week'],
[13253, '周一'],
[34235, '周二'],
[26321, '周三'],
[12340, '周四'],
[24643, '周五'],
[1322, '周六'],
[1324, '周日']
]
},
xAxis: { type: 'category' },
yAxis: {},
series: [
{
type: 'bar',
encode: {
x: 'week',
y: 'count'
}
}
]
}
}
},
methods: {}
}
</script>
<style></style>
Notez que les attributs suivants doivent avoir
xAxis : { type : 'category' },
yAxis : {},
sinon une erreur inexplicable sera signalée non détectée (en promesse) Erreur : xAxis "0" introuvable
Volume des ventes mensuel : graphique linéaire
Ce qui suit est en fait un graphique à double ligne
<template>
<v-chart :option="option" theme="auto" :autoresize="true" style="width: 100%; height: 300px" />
</template>
<script>
export default {
data() {
return {
option: {
dataset: {
source: [
['estimate', 'actual', 'month'],
[100, 120, '一月'],
[120, 82, '二月'],
[161, 91, '三月'],
[134, 154, '四月'],
[105, 162, '五月'],
[160, 140, '六月'],
[165, 145, '七月'],
[114, 250, '八月'],
[163, 134, '九月'],
[185, 56, '十月'],
[118, 99, '十一月'],
[123, 123, '十二月']
]
},
xAxis: {
type: 'category'
},
yAxis: {
axisTick: {
show: false
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
legend: {
data: ['预计', '实际'],
top: 20
},
series: [
{
type: 'line',
name: '预计',
smooth: true,
encode: {
x: 'month',
y: 'estimate'
},
animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
type: 'line',
name: '实际',
smooth: true,
encode: {
x: 'month',
y: 'actual'
},
animationDuration: 2800,
animationEasing: 'quadraticOut'
}
]
}
}
},
methods: {}
}
</script>
<style></style>
Résumer
On peut voir à partir de l'utilisation spécifique ci-dessus qu'il est plus pratique d'utiliser directement les composants vue-echarts packagés officiels.L'option de configuration est complexe et changeante, et le packaging secondaire a peu d'importance. Il est également facile d'utiliser d'autres types de graphiques sur cette base.
Le concept et les options de configuration des echarts prendront forcément un certain temps à comprendre et à se familiariser.D'une manière générale, le coût d'apprentissage est bon, attention à l'utilisation du mode jeu de données.
Informations sur la plateforme de développement
Nom de la plate-forme : One Two Three Development Platform
Introduction : plate-forme de développement générale au niveau de l'entreprise
Informations sur la conception : colonne csdn
Adresse open source : Protocole open source Gitee : MIT open source n'est pas facile, bienvenue dans les favoris, comme, commenter.