Echarts Line chart set gradient background color

In the process of fault probability prediction, a line chart using Echarts is designed to display the predicted value of probability. According to the predicted results, the background color of the line chart is divided into 3 layers, from lower to upper the value of the probability from low to high, the color in turn becomes deeper, the effect is as follows:

Mainly uses the Markarea to the color stratification, the main code is as follows:

var dom = document.getElementById ("container"), var mychart = Echarts.init (DOM), var app = {};option = Null;option = {title: {text: ' line failure probability prediction ', left: ' 50% ', Top: ' 5% '},tooltip: {trigger: ' axis ', Axispointer: {//Axis indicator, axis trigger valid type: ' lines '//default is Lines, Optional: ' Line ' | ' Shadow '}},legend: {orient: ' vertical ', left: ' Left ', Data:[{name: ' Low failure rate ', Icon: ' Bar '}, {name: ' Medium failure rate ', Icon: ' Bar '}, {Nam E: ' High failure rate ', Icon: ' Bar '}],selected: {' Low failure rate ': true, ' evaporation ': true, ' Medium failure rate ': true, ' high failure rate ': true,//do not want to display set to False}},color:[' # 81b22f ', ' #f3d71c ', ' #f4b9a9 '],xaxis: {namelocation: ' center ', type: ' Category ', boundarygap:true,data:[' 10kV Dragon double Line ', ' 10kV Ziyang line ', ' 10kV dragon Heap line ', ' 10kV Longtan line '],show:true,axistick: {show:true},},grid: {top: ' 15% ', bottom: ' 5% ', containlabel:true}, YAxis: {namegap:35,name: ' fault occurrence probability (%) ', Min:0,max:4,splitnumber:10,type: ' Value ', AxisLabel: {formatter: ' {value} ',},}, Series: [//The main use from this place is Markarea and legend{name: ' Low failure rate ', type: ' line ', Animation:false,areastyle: {normal: {}}, LineStyle: {normal: {Width:1}},markArea: {data: [{yaxis: ' 0 '}, {yaxis: ' 1 '}]]},},{name: ' Medium failure rate ', type: ' line ', Animation:false,areastyle: {normal: {}}, LineStyle: {normal: {width:1}},markarea: {data: [{yaxis: ' 1 '}, {yaxis: ' 2 '}]]}},{name: ' High failure rate ', type: ' line ', animation: False,areastyle: {normal: {}},linestyle: {normal: {width:1}},markarea: {data: [{yaxis: ' 2 '}, {yaxis: ' 4 '}]]}},{name: ' Fault occurrence probability ', type: ' line ', data:[2.3, 0.5, 1.5, 3.44]},],}

This article explains the Echarts line chart set gradient background color of knowledge, more information please focus on the PHP Chinese web.