La position actuelle:Accueil du site>Réalisation d'un diagramme de zone de ligne brisée - Diagramme Rose - Diagramme à barres
Réalisation d'un diagramme de zone de ligne brisée - Diagramme Rose - Diagramme à barres
2022-07-24 02:24:17【Susu est le petit Susu.】
1.Obtenir des résultats
2.Principe de réalisation
Site officiel:https://echarts.apache.org/zh/index.html
echartsCommunauté:http://www.ppchart.com/#/
Quelques types de diagrammes:
series-line
Les diagrammes linéaires sont des diagrammes qui relient les marqueurs de points de données individuels par des lignes brisées,Utilisé pour montrer l'évolution des données.Disponible en coordonnées rectangulaires et polaires.
Tip: Paramètres areaStyle Vous pouvez ensuite tracer une carte de la zone.
Tip: Type de segment d'accouplement visualMap Les composants peuvent être pliés/Les cartes de zone sont divisées par différentes couleurs.
series-bar
Histogramme(Ou barre)C'est une hauteur de colonne(Dans le cas transversal, la largeur)Un type de diagramme couramment utilisé pour représenter la taille des données.
series-pictorialBar
.Les pictogrammes à colonnes sont des éléments graphiques qui peuvent être configurés pour représenter(Comme les photos、SVG PathData Attendez.)Histogramme de.Souvent utilisé dans les infographies.Utilisé dans un système de coordonnées rectangulaires avec au moins un axe de catégorie ou un axe temporel.
series-pie
Les diagrammes à secteurs sont principalement utilisés pour représenter la part des données de différentes catégories dans la somme...Chaque radian représente la proportion du nombre de données.
Pour les scènes avec plusieurs diagrammes à secteurs dans un seul diagramme ,Peut être utilisé left、right、top、bottom、width、height Configurer l'emplacement et la taille du viewport pour chaque série de diagrammes circulaires .radius、label.edgeDistance Et d'autres éléments de configuration qui supportent le pourcentage , Est par rapport à la taille du rectangle déterminée par cet élément de configuration .
Tip: Les diagrammes à secteurs sont plus appropriés pour représenter des relations telles que le pourcentage de données par rapport au total . Si vous ne représentez que la taille des données entre les différentes catégories ,Utilisation recommandée Histogramme, Les gens sont moins sensibles aux petites différences de radians qu'aux petites différences de longueur , Ou en configurant roseType Ça s'affiche comme un dingertu du Sud, Sensible à la taille des données par la taille du rayon .
Certains paramètres signifient :
grid:
Grille de dessin dans un système de coordonnées rectangulaires,Unique grid Jusqu'à deux en haut et en bas peuvent être placés à l'intérieur X Axe,Deux à gauche et deux à droite Y Axe. Vous pouvez dessiner un diagramme linéaire sur une grille ,Histogramme,Diagramme de dispersion(Diagramme à bulles).
Par exemple::
grid: {
// Distance entre le diagramme et la bordure
left: 10,
right:20,
top: 40,
bottom: 10,
containLabel: true,
},
animation
Si l'animation est activée.
animationDuration
Durée de l'animation initiale,Prise en charge des fonctions de rappel, Un effet d'animation initial plus dramatique peut être obtenu en renvoyant une durée différente pour chaque donnée :
showSymbol
En ligne brisée :Est - ce que symbol, Si false Seulement si tooltip hover Afficher quand.
symbol
Dessins marqués.
ECharts Les types d'étiquettes fournis comprennent:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'.
Peut passer 'image://url' Définir comme image,Parmi eux URL Lien vers l'image,Ou dataURI.
eg:
showSymbol: true, //Afficher les points par défaut
symbol: "circle", // La valeur par défaut est un cercle vide(Blanc au milieu),Remplacer par un cercle solide
graphic
graphic Est un composant d'élément graphique natif . Les éléments graphiques qui peuvent être pris en charge sont :image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group.
3.Code de mise en œuvre
<view class="box">
<ec-canvas id="mychart-dom-bar" ec="{
{ ec }}"></ec-canvas>
</view>
<view class="box">
<ec-canvas id="mychart-dom-line" ec="{
{ ec }}"></ec-canvas>
</view>
<view class="box">
<ec-canvas id="mychart-dom-line1" ec="{
{ ec }}"></ec-canvas>
</view>
<view class="box">
<ec-canvas id="mychart-dom-pie" ec="{
{ ec }}"></ec-canvas>
</view>
page {
background: linear-gradient(90deg, #03224e 0%, #011030 100%);
}
.box {
width: 100%;
height: 550rpx;
}
import * as echarts from '../../components/ec-canvas/echarts';
Page({
data: {
ec: {
lazyLoad: true // Chargement différé
}
},
onLoad: function (options) {
this.echartsComponnet = this.selectComponent('#mychart-dom-bar');
this.getData('echartsComponnet', 0); //Obtenir des données
this.echartsComponnetLine = this.selectComponent('#mychart-dom-line');
this.getData('echartsComponnetLine', 1); //Obtenir des données
this.echartsComponnetLine1 = this.selectComponent('#mychart-dom-line1');
this.getData('echartsComponnetLine1', 2); //Obtenir des données
this.echartsComponnetpie = this.selectComponent('#mychart-dom-pie');
this.getData('echartsComponnetpie', 3); //Obtenir des données
},
/** * Obtenir des données graphiques */
getData(type, action) {
this[type].init((canvas, width, height, dpr) => {
const Chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
Chart.setOption(this.getOption(action));
return Chart;
});
},
/** * Graphiqueinit */
getOption(e) {
if (e == 0) {
return this.getBar(["Services1", "Services2", "Services3", "Services4", "Services5"], [2, 5, 1, 8, 1])
}
if (e == 1) {
return this.getLine(["Services1", "Services2", "Services3", "Services4", "Services5"], [2, 5, 1, 8, 1], 1)
}
if (e == 2) {
return this.getLine(["Services1", "Services2", "Services3", "Services4", "Services5"], [2, 22, 55, 22, 44], 2)
}
if (e == 3) {
return this.getPie()
}
},
/** * Obtenir des données */
getBar(xData, yData) {
let colorArr = ["#2886c6", "#50bfda", "#89e3ec"],
color = {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [{
offset: 0,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[0],
},
{
offset: 0.5,
color: colorArr[1],
},
{
offset: 1,
color: colorArr[1],
},
],
},
barWidth = 20,
bottomData = [],
topData = [];
yData.filter((item) => {
if (item) {
bottomData.push(1);
topData.push(item);
} else {
bottomData.push(0);
topData.push({
value: 1,
itemStyle: {
normal: {
borderColor: "rgba(0,0,0,0)",
borderWidth: 2,
color: "rgba(0,0,0,0)",
},
},
});
}
});
let option = {
animation: true, // Contrôle si l'animation est activée
animationDuration: 5000, // Durée de l'animation,C'est en millisecondes
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0,0,0,.5)",
axisPointer: {
type: "cross",
label: {
backgroundColor: "rgba(0,0,0,.5)",
},
},
textStyle: {
color: "#fff",
fontSize: 14,
},
},
grid: {
// Distance entre le diagramme et la bordure
left: 10,
right:20,
top: 40,
bottom: 10,
containLabel: true,
},
xAxis: {
data: xData,
axisTick: {
show: false,
},
axisLabel: {
color: "rgba(255,255,255,.8)", // Couleur de police des coordonnées
fontSize: 12,
},
},
yAxis: {
axisLine: {
show: true,
},
axisLabel: {
show: true,
color: "rgba(255,255,255,.8)", // Couleur de police des coordonnées
fontSize: 12,
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.25)",
type: "dashed",
},
//Couleur de la grille
},
},
series: [{
z: 1,
name: "Données",
type: "bar",
barWidth: barWidth,
barGap: "0%",
data: yData,
itemStyle: {
normal: {
color: color,
},
},
},
{
z: 2,
name: "Données",
type: "pictorialBar",
data: bottomData,
symbol: "diamond",
symbolOffset: ["0%", "50%"],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: color,
},
},
tooltip: {
show: false,
},
},
{
z: 3,
name: "Données",
type: "pictorialBar",
symbolPosition: "end",
data: topData,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
itemStyle: {
normal: {
borderColor: colorArr[2],
borderWidth: 2,
color: colorArr[2],
},
},
tooltip: {
show: false,
},
},
],
};
return option;
},
getLine(xData, yData, type) {
let datacoords = [{
coords: [],
}, ];
for (let i = 0; i < xData.length; i++) {
datacoords[0].coords.push([xData[i], yData[i]]);
}
console.log(datacoords)
let s1 = [{
name: "Susu, petit Susu.",
type: "line",
smooth: type == 2,
smoothMonotone: "x",
lineStyle: {
width: 1.5,
type: "solid",
shadowOffsetX: 0, // Polyline XOffset
shadowOffsetY: 3, // Polyline YOffset
shadowBlur: 4, // Lignes floues
opcity: 1,
shadowColor: "rgba(220,120,40,0.95)", //Couleur polyligne
},
showSymbol: false,
itemStyle: {
color: "#DC7828",
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 1,
color: "rgba(220,120,40,0.3)",
},
{
offset: 0.74,
color: "rgba(220,120,40,0.26)",
},
{
offset: 0,
color: "rgba(220,120,40,0)",
},
]),
},
emphasis: {
focus: "series",
},
data: yData,
}],
s2 = [{
name: "Susu, petit Susu.222",
type: "line",
smooth: type == 2,
lineStyle: {
color: "#00CCA9",
width: 1.5,
type: "solid",
shadowOffsetX: 0, // Polyline XOffset
shadowOffsetY: 3, // Polyline YOffset
shadowBlur: 4, // Lignes floues
shadowColor: "rgba(0,204,169,0.95)", //Couleur polyligne
},
showSymbol: true, //Afficher les points par défaut
symbol: "circle", // La valeur par défaut est un cercle vide(Blanc au milieu),Remplacer par un cercle solide
symbolSize: 7, // Définir la taille des points solides
itemStyle: {
color: "#021E47", // Couleur de fond des points solides ----- Cercle transparent !!!!!!!
borderWidth: 1, // Taille de la bordure du point
borderColor: "#00CCA9", // Couleur solide de la bordure du point
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 1,
color: "rgba(0,204,169,0.3)",
},
{
offset: 0,
color: "rgba(0,204,169,0)",
},
]),
},
emphasis: {
focus: "series",
},
data: yData,
},
];
let option = {
animation: true, // Contrôle si l'animation est activée
animationDuration: 3000, // Durée de l'animation,C'est en millisecondes
backgroundColor: "transparent",
color: ["#ec5d5f", "#f2cb58", "#64a0c8"],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0,0,0,.5)",
axisPointer: {
type: "cross",
label: {
backgroundColor: "rgba(0,0,0,.5)",
},
},
textStyle: {
color: "#fff",
fontSize: 14,
},
},
grid: {
left: 10,
top: 40,
bottom: 10,
right:20,
containLabel: true,
},
xAxis: [{
nameGap: 3,
nameTextStyle: {
// Unités axiales
color: "rgba(255,255,255,.8)",
fontSize: 12,
},
type: "category",
data: xData,
boundaryGap: false, //De0C'est parti.
axisLine: {
rotate: 30, // Rotation excessive du contenu de l'axe
interval: 0,
lineStyle: {
color: "#636E7C",
},
},
axisLabel: {
color: "rgba(255,255,255,.8)", // Couleur de police des coordonnées
fontSize: 12,
},
axisTick: {
// Couleur de l'échelle de l'axe xEtyNon.
show: false,
},
}, ],
yAxis: [{
name: "Les gens",
min: 0,
max: function (value) {
return Math.ceil(value.max / 5) * 5;
},
splitNumber: 5,
type: "value",
nameTextStyle: {
// Unités axiales
color: "rgba(255,255,255,.89)",
fontSize: 12,
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,.25)",
type: "dashed",
},
//Couleur de la grille
},
axisTick: {
// Couleur de l'échelle de l'axe
show: false,
},
axisLine: {
//Couleur de l'axe des coordonnées
show: true,
lineStyle: {
color: "#636E7C",
},
},
axisLabel: {
color: "rgba(255,255,255,.8)", // Couleur de police des coordonnées
fontSize: 12,
},
}, ],
series: type == 1 ? s2 : s1
}
return option;
},
getPie() {
let option = {
color: [
"#3D75FC",
"#3E46CE",
"#E45C7E",
"#2DB4D1",
"#CBAE2E",
"#5ECAB9",
"#D36640",
],
animation: true, // Contrôle si l'animation est activée
animationDuration: 5000, // Durée de l'animation,C'est en millisecondes
animationEasing: "bounceOut", //Animation lente
animationThreshold: 8, // Seuil de l'élément d'animation
tooltip: {
trigger: "item",
formatter: "Susu.{b} : {c} ({d}%",
position: function (point, params, dom, rect, size) {
let x = 0;
let y = 0;
let pointX = point[0];
let pointY = point[1];
let boxWidth = size.contentSize[0];
let boxHeight = size.contentSize[1];
if (boxWidth > pointX) {
x = 5;
} else {
x = pointX - boxWidth;
}
if (boxHeight > pointY) {
y = 5;
} else {
y = pointY - boxHeight;
}
return [x, y];
},
},
legend: {
type: "scroll",
orient: "vertical",
right: '10%',
top: "center",
icon: "rect",
itemWidth: 10, // Définir la largeur
itemHeight: 10, // Réglage de la hauteur
selectedMode: true,
textStyle: {
color: "#fff",
fontSize: 12,
},
formatter: function (name) {
return name.length > 5 ? name.substr(0, 5) + "..." : name;
},
tooltip: {
show: true,
},
},
series: [{
minAngle: 5, // Angle minimal du secteur (0 ~ 360), Utilisé pour empêcher qu'une valeur trop petite provoque un secteur trop petit pour affecter l'interaction
avoidLabelOverlap: true, //Si la politique de prévention du chevauchement des étiquettes est activée
labelLine: {
minTurnAngle: 0,
},
type: "pie",
radius: [20, 120],
center: ["30%", "50%"],
roseType: "area",
itemStyle: {
borderRadius: 0,
},
label: {
show: false,
},
data: [{
value: 88,
name: "rose 1"
},
],
}, ],
};
return option
}
})
4. Plus d'applets liés à ,Attention au numéro public Suzu.bug,Plus d'appletsdemo,Oui.Le nuage de code de Su Su SuSi ça t'aide,Bienvenue à votrestar+Abonnements!
Mentions de copyright
Auteur de cet article [Susu est le petit Susu.],Réimpression s’il vous plaît apporter le lien vers l’original, merci
https://fra.chowdera.com/2022/205/202207240223467711.html
Recommandé par sidebar
- [Python flask note 5] Blueprint simple à utiliser
- Composants web - cycle de vie des éléments personnalisés
- Entrepôt de données 4.0 Notes - acquisition de données commerciales
- Entrepôt de données 4.0 Notes - acquisition de données sur le comportement de l'utilisateur II
- Affichage itératif des fichiers.h5, opérations de données h5py
- Résumé des connaissances mathématiques communes
- Comment se développe le serveur GPU refroidi à l'eau dans le Centre de données dans le cadre de l'informatique est - Ouest?
- Connaissance du matériel 1 - schéma et type d'interface (basé sur le tutoriel vidéo complet de l'exploitation du matériel de baiman)
- Examen des principes fondamentaux de la structure en acier
- Unity3d: ugui source, Rebuild Optimization
Devinez que vous aimez
Solution rapide: xshell ne peut pas glisser dans un dossier ou un paquet
Rhcsa - - parcourir le contenu du fichier, couper, uniq, trier, utiliser les commandes.tr
Intégrité du signal (si) intégrité de l'alimentation électrique (PI) notes d'apprentissage (32) Réseau de distribution d'énergie (4)
Quelle est la raison pour laquelle la plate - forme easygbs ne peut pas lire l'enregistrement vidéo et a un phénomène de streaming répété rtmp?
Notes du jour 7
【 Visual Dispatching Software】 Shanghai Dow Ning apporte netronic download, Trial, tutoriel pour l'Organisation SMB
2. Les règles quantitatives
Événements courants de la souris et du clavier
C #: in, out, ref Keywords
Connaissance détaillée du GRE, du mgre; Connaissance de la configuration de base de l'OSPF
Recommandé au hasard
- Comment creo 9.0 modifie - t - il rapidement le système de coordonnées Cao?
- Notes du jour 5
- Renforcement de l'apprentissage - points de compréhension du gradient stratégique
- Le shell a besoin de connaître les commandes
- Okrk3399 Development Board Reserved i2c4 Mounting EEPROM
- Optimisation du serveur Cloud Huawei avec connexion clé
- Chapitre 2 requête de base et tri
- 【 langage c】 devinez jeux numériques + applet d'arrêt
- Qu'est - ce que le codage par titre?
- Feignclient utilise un tutoriel détaillé (illustration)
- Kettle implémente une connexion de base de données partagée et insère une instance de composant de mise à jour
- Simulation de modulation et de démodulation du signal CBOC basée sur MATLAB, sortie de corrélation, spectre de puissance et suivi de décalage de fréquence
- Les raccourcis clavier liés à l'onglet ne peuvent pas être utilisés après la mise à jour du vscode
- Expression du suffixe (une question par jour pendant les vacances d'été 4)
- Idées de conception sur l'initialisation des paramètres d'entrée de page
- Éléments de base de la validation des haricots - 04
- Une solution complète au problème du sac à dos dans la programmation dynamique
- Récursion des bosses 1: formule récursive
- Explication détaillée de l'injection aveugle d'erreur SQL
- Données chronologiques dans l'Internet industriel des objets
- Une erreur s'est produite lors de la configuration du login du moteur Gom: aucun correctif requis n'a été trouvé!
- [215] Gin Framework connection to MySQL Database
- Explication détaillée du principe de co - intégration en go
- [jzoof] 13 plage de mouvement du robot
- PCL: ajustement multiligne (RANSAC)
- 1259. Programmation dynamique de poignée de main disjointe
- Conception de l'interface UART basée sur la FPGA
- Elk note 25 - expérience rapide APM
- Analyse de l'industrie | interphone logistique
- Principe de l'énergie et méthode variationnelle note 19: principe de l'énergie résiduelle minimale + principe du travail possible
- Atelier macoll - notes de développement de la secte de l'ours 2
- Comment présenter votre expérience de projet lors d'une entrevue
- Scala Programming (Junior)
- Synchro esp32c3 Hardware Configuration Information serial port Print Output
- Serveur de chat de Cluster: conception de la table de base de données
- Apprentissage Lambda (utilisation du comparateur après tri, regroupement après collecte avec collectors.groupingby)
- Comment forcer complètement le meurtre de processus indépendants de l'arrière - plan?
- Programmation JDBC pour MySQL
- Utilisation des fonctions fléchées es6
- Lu Xia action | Source Kai Digital: Existing Mode or open source innovation?