Partagez les modifications de style de six graphiques statistiques echarts

La création de graphiques echarts est relativement simple, il suffit de citer directement Javascript. Il y a trois raisons principales pour utiliser cette bibliothèque. La première est que cette bibliothèque est un projet Baidu et a été mise à jour. La seconde est que la documentation du projet de cette bibliothèque est relativement détaillée, chaque point est expliqué clairement, et elle est en chinois, ce qui la rend plus facile à comprendre. Le troisième point est que cette bibliothèque prend en charge une large gamme de graphiques et que les graphiques peuvent être commutés directement, ce qui la rend très pratique à utiliser.

1 : Modifier la couleur du graphique linéaire

series : [ {
name : ‘SBP(收缩压)’,
type : ‘line’,
itemStyle : {
normal : {
lineStyle:{
color:’#f73d31’
}
}
},
data : y_data
},

2 : Modifier l'attribut de couleur du titre

Pour changer la couleur principale du titre de l'icône en rouge, il suffit ajoutez-le dans le titre : Ajoutez textStyle : {color: 'red' } à
picture.png

title: {
text: ‘平均耗时（分钟）’,
textStyle: {
color: ‘red’
},
},

3 : Définition de la couleur d'arrière-plan

var option={
backgroundColor:‘rgba(128, 128, 128, 0.1)’ //rgba设置透明度0.1
}

4 : Modification de la affichage de la page vierge

Lorsque toutes les données sont normales et qu'aucune erreur n'est signalée dans la console, mais que les données ne sont pas affichées sur la page, à ce moment, une largeur fixe peut être ajoutée.

5 : Problèmes d'adaptation mobile, adaptation aux différents écrans de téléphone mobile

Lorsqu'il y a plusieurs graphiques, ajoutez simplement un morceau de code comme celui-ci après var option = {}, l'icône changera au fur et à mesure la taille de l’écran d’affichage change.

window.onresize = function () {
myChart1.resize();
       myChart2.resize();      
        myChart3.resize();        
        }

6 : Modification de la couleur de l'axe de coordonnées de l'axe xy

Coordonnée de l'axe x :

xAxis: {
type: ‘value’,
boundaryGap: [0, 0.01],
axisLine:{
lineStyle:{
color:’#e33b38’,
width:1,//这里是为了突出显示加上的
}
}
},

Coordonnée de l'axe y :

yAxis: {
type: ‘category’,
data: [‘SA服务’, ‘洗车’, ‘总检’, ‘喷漆’, ‘钣金’, ‘机修’, ‘等号’],
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: [’#e33b38’]
}
},
nameTextStyle: {
color: [’#e33b38’]
},
axisLine:{
lineStyle:{
color:’#e33b38’,
width:1,//这里是为了突出显示加上的
}
}
},

Ce qui précède est la modification de la valeur d'attribut du graphique, bienvenue pour le lire et en tirer des leçons !

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!