Echarts 折れ線グラフはグラデーションの背景色を設定します

Echarts の折れ線グラフは、線路の故障確率を予測する過程で、確率の予測値を表示するように設計されています。予測結果によると、折れ線グラフの背景色は下から上に向かって、確率値が低いものから高いものへと順番に色が濃くなります。
結果は次のとおりです。

## 主に markArea を使用して色を重ねます。主なコードは次のとおりです。

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

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

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

},

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

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


], 
}

この記事では、Echarts の線のグラデーション背景色の設定に関する関連知識について説明します。詳細については、PHP 中国語 Web サイトを参照してください。

関連する推奨事項:

単純な PHP MySQL ページング クラス

再帰を使用しない 2 つのツリー配列コンストラクター

HTMLをExcelに変換し、印刷・ダウンロード機能を実現

以上がEcharts 折れ線グラフはグラデーションの背景色を設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。