Echarts line chart sets gradient background color

In the process of predicting the fault probability of the line, the line chart of Echarts is designed to display the predicted value of the probability. According to the prediction results, the background color of the line chart is divided into three layers. From bottom to top, the probability value is from low to high, and the color becomes darker in turn. The effect is as follows:

## Mainly uses markArea to layer colors. The main code is as follows:

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]
},


], 
}

This article explains the relevant knowledge of setting the gradient background color of Echarts line chart. For more information, please pay attention to the PHP Chinese website.

Related recommendations:

Simple PHP MySQL paging class

Two tree array constructors without recursion

Convert HTML to Excel, and realize printing and downloading functions

The above is the detailed content of Echarts line chart sets gradient background color. For more information, please follow other related articles on the PHP Chinese website!