Le graphique linéaire Echarts définit la couleur d'arrière-plan dégradé-tutoriel php-php.cn

Le graphique linéaire Echarts définit la couleur d'arrière-plan dégradé

jacklove

Libérer： 2023-03-31 17:10:01

original

3370 Les gens l'ont consulté

Dans le processus de prévision de la probabilité de défaillance d'une ligne, nous avons conçu un graphique linéaire à l'aide d'Echarts pour afficher la valeur prédite de la probabilité. Selon les résultats de la prédiction, la couleur d'arrière-plan du graphique linéaire est divisée en trois couches de bas en haut, la valeur de probabilité va de faible à élevée et la couleur devient à son tour plus sombre :
.

Le graphique linéaire Echarts définit la couleur darrière-plan dégradé

Utilise principalement markArea pour superposer les couleurs. Le code principal est le suivant :

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {
text: &#39;线路故障发生概率预测&#39;,
left:&#39;50%&#39;,
top:&#39;5%&#39;
},
tooltip : {
trigger: &#39;axis&#39;,
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : &#39;line&#39; // 默认为直线，可选为：&#39;line&#39; | &#39;shadow&#39;
}

},
legend: {
orient: &#39;vertical&#39;, 
left: &#39;left&#39;, 
data:[{name:&#39;低故障率&#39;,icon : &#39;bar&#39;}, {name:&#39;中等故障率&#39;,icon : &#39;bar&#39;}, {name:&#39;高故障率&#39;,icon : &#39;bar&#39;}],
selected: { 
&#39;低故障率&#39; :true, 
&#39;蒸发量&#39;:true,
&#39;中等故障率&#39; :true,
&#39;高故障率&#39; :true,
//不想显示的都设置成false 
} 
},
color:[&#39;#81b22f&#39;,&#39;#f3d71c&#39;,&#39;#f4b9a9&#39;],
xAxis: {
nameLocation:&#39;center&#39;,
type: &#39;category&#39;,
boundaryGap:true,
data:[&#39;10kV龙双线&#39;,&#39;10kV紫阳线&#39;,&#39;10kV龙堆线&#39;,&#39;10kV龙滩线&#39;],
show:true,
axisTick: {
show: true
},

},
grid: {
top: &#39;15%&#39;,
bottom: &#39;5%&#39;,
containLabel: true
},
yAxis :{
nameGap:35,
name:&#39;故障发生概率(%)&#39;,
min:0,
max:4,
splitNumber:10,
type : &#39;value&#39;,
axisLabel : {
formatter : &#39;{value}&#39;,
},

},

series: [          //就是从这个地方开始的    主要用的是markArea 和legend
{
name:&#39;低故障率&#39;,
type:&#39;line&#39;,
animation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
markArea: {
data: [[{
yAxis: &#39;0&#39;
}, {
yAxis: &#39;1&#39;
}]]
},

},{
name:&#39;中等故障率&#39;,
type:&#39;line&#39;,
animation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
markArea: {
data: [[{
yAxis: &#39;1&#39;
}, {
yAxis: &#39;2&#39;
}]]
}
},{
name:&#39;高故障率&#39;,
type:&#39;line&#39;,
animation: false,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1
}
},
markArea: {
data: [[{
yAxis: &#39;2&#39;
}, {
yAxis: &#39;4&#39;
}]]
}
},
{
    name:&#39;故障发生概率&#39;,
    type:&#39;line&#39;,
    data:[2.3, 0.5, 1.5, 3.44]
},


], 
}

Copier après la connexion

Cet article explique les connaissances pertinentes pour définir la couleur d'arrière-plan dégradé. du graphique linéaire Echarts. Pour plus d'informations, veuillez prêter attention au réseau chinois PHP.

Recommandations associées :

Classe de pagination PHP+MySQL simple

Deux constructeurs de tableaux arborescents sans récursion

HTML vers Excel, et réaliser des fonctions d'impression et de téléchargement

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!