Je souhaite personnaliser la hauteur et la largeur des informations sur la ligne de repère. Maintenant, je trouve un attribut d'étiquette qui peut être utilisé pour colorer et faire des attriubtes de police. Mais pour la hauteur et la largeur, cela ne fonctionne pas dans mon test.
Je souhaite également ajouter des balises html et des attributs css dans ma fonction de formateur. Mais ça ne marche pas trop.
N'importe qui peut me dire si echart supporte actuellement ces options? (Echat est la version 4.9.0)
Merci
Mon étiquette d'information pour markline:
formatter: function (param) {
return `<div style="display:flex;flex-direction:row;">
<div style="background-color:#03D16D;height:auto;width:10px;margin-right:5px;"></div>
<div style="display:flex;flex-direction:column;">
<span>123</span>
<span>456</span>
</div>
</div>`
}
ma fonction de formateur:
or
formatter: function (param) {
var text = '';
text += '<div style="display:flex;flex-direction:row;">'+
'<div style="background-color:#03D16D;height:auto;width:10px;margin-right:5px;"></div>'+
'<div style="display:flex;flex-direction:column;">'+
'<span>'333'</span>'+
'<span>'333'</span>'
'</div>'
'</div>'
return text;
}
label: {
show:true,
align:'left',
position: 'end',
distance: [0,-90],
color: 'blue',
// backgroundColor: 'green',
backgroundColor: {
image: 'icon/no_disturb.png'
},
padding: 15,
**
width:600,
height:900,
**
// borderRadius: 5,
formatter: function(value) {
return `2012年-10月-21日 5点43分24秒`;
}
}
ces deux fonctions renvoient simplement une chaîne et ne peuvent pas être affichées sous forme de section html. Je ne sais pas comment faire.
Merci.
br
3 Réponses :
Hélas, ce n'est pas un CSS, vous ne pouvez pas appliquer de style aléatoire au composant d'étiquette. Tous les styles possibles décrits dans les documents officiels, mais nous n'avons pas beaucoup d'options. En particulier, le composant d'étiquette ne pourra pas rendre le HTML. Je vous aiderais, mais ce que vous voulez obtenir n'est pas clair: vous avez décrit le processus d'acquisition d'une mauvaise expérience, mais vous n'avez pas décrit le résultat souhaité.
Changez simplement la largeur et la hauteur? Cela peut être réalisé de différentes manières. Par exemple, hier en raison de l'ancienne version de la construction d'Echarts, nous avons dû complètement dessiner et animer markLine avec des étiquettes. Vous pouvez également ajouter une ligne de série, définir de faux points de données et le faire de manière à ce que la ligne soit droite et similaire à markLine comme nous l'avons fait pour la bande de confiance de simulation .
Salut, Sergey Fedorov ， merci beaucoup pour votre aide.
Salut, Sergey Fedorov ， merci beaucoup pour votre aide. Je veux juste afficher les informations dans l'étiquette markLine. (Ces informations se combinent à partir de différentes variables. Le saut de ligne est également nécessaire. Exemple: ababab\n2012-10-21 5:43:24 , les données et ababab sont variables.). Je trouve juste un lien dans github qui permet de personnaliser les informations d'étiquette. (lien: github.com/apache/incubator-echarts/issues/13269 ) À présent, je dois créer une chaîne à l'avance et simplement retourner dans le formateur de fonction, comme ci-dessous: formatter: function (value) {return value.name }. Il est préférable de prendre en charge la variable et le saut de ligne. Merci.
Salut, Sergey Fedorov, je souhaite également ajouter une image de fond pour le label markline. Dans une simple page html, le code ci-dessous peut fonctionner: backgroundColor: {image: 'icon / no_disturb.png'}, icon est un sous-répertoire. Mais dans mon projet vue, je teste plusieurs fois avec un répertoire différent, cela échoue toujours. Je ne sais vraiment pas comment faire. Si vous avez des conseils, aidez-moi aussi. Merci.
Ajouter ma configuration d'étiquette: { show: true, align: "left", position: "end", distance: [0, 4], color: "black", padding: 5, borderWidth: 1, backgroundColor: { image: './images/f1.png' }, shadowColor: srcBorderColor, shadowBlur: 1, shadowOffsetX: 1, shadowOffsetY: 1, backgroundColor: "white", formatter: function (value) { return value.name }, }
@ mmm2006, votre configuration ne peut pas être utilisée, pourriez-vous joindre une image qui apparaît comme votre étiquette ressemble?
J'ajoute une image mais je ne peux pas la voir de mon côté. :(
salut, Sergey Fedorov, pouvez-vous trouver ma piacture?
Oui, voir la réponse
Salut, Sergey Fedorov, pouvez-vous m'aider à ce sujet. Merci. stackoverflow.com/questions/64869684/...
Ça ressemble à ça. Nouvelle étiquette que vous pouvez créer avec la fonction CustomLabel :
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script> <div id="main" style="width: 800px;height:600px;"></div>
#main {
z-index: 10;
position: relative;
}
.label {
font-size: 18px;
font-family: sans-serif;
padding: 6px;
height: 20px;
z-index: 20;
position: absolute;
border: 2px solid #005C53;
background: white;
}var myChart = echarts.init(document.getElementById('main'));
function CustomLabel(opts) {
var {
chart,
title,
x,
y
} = opts;
var template = `<div class='label'>${name}</div>`;
var canvas = document.body.querySelector('#main');
var [chartX, chartY] = chart.convertToPixel({
seriesIndex: 0
}, [x, y]);
var label = document.createElement('div');
label.innerText = title;
label.classList.add('label');
label.style.left = chartX + 'px';
label.style.top = chartY - 16 - 20 + 'px'; // 6 * 2 - paddings, 2 * 2 borders, 20 - height
return canvas.insertAdjacentElement('afterbegin', label);
};
var option = {
xAxis: {
data: ["A1", "A2", "A3", "A4", "A5", "A6"],
splitLine: {
show: true
},
splitArea: {
show: true
},
},
tooltip: {},
yAxis: {},
grid: {
top: 50,
left: 50,
bottom: 50,
right: 50
},
backgroundColor: '#7BE2DB',
animation: false,
series: [{
name: 'Series1',
type: 'bar',
data: [5, 20, 36, 10, 15, 20],
color: '#00B2A1',
}]
};
myChart.setOption(option);
label1 = new CustomLabel({
chart: myChart,
title: 'Label 1',
x: 'A2',
y: 10
});
label2 = new CustomLabel({
chart: myChart,
title: 'Label 2',
x: 'A5',
y: 20
});label1 = new CustomLabel({
chart: myChart, // chart instance
title: 'Label 1', // label title
x: 'A2', y: 10 // coordinates
});
salut, Sergey Fedorov, Merci beaucoup pour votre aide. Je vais essayer.
salut, Sergey Fedorov. C'est un excellent exemple et je ne sais pas que l'étiquette peut être affichée comme votre code. Merci. Je veux afficher l'étiquette de données dans xAxis simplement parce que l'étiquette par défaut ne marque pas au bon endroit. Puis-je utiliser une étiquette personnalisée pour l'afficher? existe-t-il une autre méthode? Merci.
Il s'agit simplement d'un code JavaScript simple qui reçoit par les méthodes API Echarts les coordonnées Axes pour calculer la position de l'étiquette. Vous pouvez l'utiliser comme vous le souhaitez et n'importe où. Les solutions alternatives sont beaucoup plus compliquées.
J'ajoute une image sur l'ajout d'étiquette dans xAxis pour afficher une étiquette d'heure précise à ma position souhaitée.
Merci.
