var obj = {
xData: ['2018', '2019', '2020', '2021', '2022'],
yName1: "枯水期",
yName2: "丰水期",
yName3: "平水期",
yData1: [3, 6, 7.5, 7, 4],
yData2: [6, 8, 13.5, 12, 6.5],
yData3: [9, 12, 20, 16, 10],
}
var option= {
backgroundColor: "rgba(5, 46, 44, 0.7)",
legend: {
top: 10,
right: '4%',
textStyle: {
fontSize: 18,
color: '#fff',
padding: [3, 0, 0, 0]
},
data: [obj.yName1, obj.yName2, obj.yName3]
},
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
show: true,
color: 'red',
borderColor: 'rgba(0,0,0,0)',
shadowColor: 'rgba(0,0,0,0)',
shadowOffsetY: 0
},
lineStyle: {
width: 0,
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '4%',
containLabel: true
},
xAxis: {
type: 'category',
axisLabel: {
color: '#fff'
},
fontSize: 18,
axisLine: {
lineStyle: {
color: '#fff'
},
width: 5
},
axisTick: {
show: false,
},
data: obj.xData
},
yAxis: {
type: 'value',
axisLabel: {
formatter: "{value}mg/L",
color: '#fff'
},
axisLine: {
lineStyle: {
color: '#fff'
},
width: 5
},
axisTick: {
show: false,
},
splitLine: {
// show:false,
lineStyle: {
color: 'rgba(150, 164, 244, 0.3)'
},
},
},
series: [{
name: obj.yName1,
type: 'line',
showSymbol: false,
lineStyle: {
normal: {
color: "green",
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(22, 179, 125, 1)',
},
{
offset: 1,
color: 'rgba(15, 112, 161, 1)',
}
],),
},
},
data: obj.yData1,
},
{
name: obj.yName2,
type: 'line',
showSymbol: false,
lineStyle: {
normal: {
color: "orange",
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(107,205,216,0.5)',
},
{
offset: 1,
color: 'rgba(143,192,127,0)',
},
],),
},
},
data: obj.yData2,
},
{
name: obj.yName3,
type: 'line',
showSymbol: false,
lineStyle: {
normal: {
color: "blue",
},
},
// areaStyle:{
// normal:{
// color:new echarts.graphic.LinearGradient(0,0,0,1,[
// {
// offset:0,
// color:'rgba(143,192,127,0)',
// },
// {
// offset:1,
// color:'rgba(107,205,216,0.5)',
// },
// ],),
// },
// },
data: obj.yData3,
},
],
}