主要是在 series.itemStyle 里面设置 areaStyle 属性
areaStyle:{ //有这个属性代表是波浪图
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#737373'},
{offset: 0.5, color: '#252525'},
{offset: 1, color: '#252525'}
]
)
},
全部代码如下
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<title>广州市每日确诊人数</title>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/echarts-gl.min.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
//广州市每日累计确诊总人数
dataGD01 = [2,5,7,14,14,39,51,63,79,106,137,175,189,216,237,
255,284,298,304,313,317,323,327,328,335,338,339,339,339,339];
//广州市每日累计出院人数
dataGD02 = [0,0,0,0,0,0,0,0,0,1,3,3,3,3,7,
13,20,27,36,42,49,70,78,93,106,121,131,142,148,157];
data_name = ['1/21','1/22','1/23','1/24','1/25','1/26',
'1/27', '1/28', '1/29', '1/30', '1/31', '2/1',
'2/2', '2/3', '2/4', '2/5', '2/6', '2/7', '2/8',
'2/9', '2/10','2/11','2/12','2/13','2/14','2/15','2/16','2/17','2/18','2/19'];
option = {
tooltip: {
trigger: 'axis'
},
title: {
text: '广州市每日累计确诊和累计出院人数变化趋势',
top:12,
left: 'center',
textStyle:{
fontSize: 25
}
},
legend: {
orient: 'vertical',
itemWidth: 20,
itemHeight:10,
left: 30,
top:10,
data: [ '广州市每日累计确诊人数', '广州市每日累计出院人数']
},
grid: {
left: '3%',
right: '4%',
bottom: '9%',
containLabel: true
},
toolbox: {
feature: {
// saveAsImage: {}//将统计图保存为
}
,right:100
,top:0
},
xAxis: {
//'name':'时间',
type: 'category',
axisLabel: {
show: true,
interval:0,
rotate:0,
axisLabel:{'interval':0},
// formatter:function(params) {
// var newParamsName = "";
// var paramsNameNumber = params.length;
// var provideNumber = 3; //一行显示几个字
// var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
// if (paramsNameNumber > provideNumber) {
// for (var p = 0; p < rowNumber; p++) {
// var tempStr = "";
// var start = p * provideNumber;
// var end = start + provideNumber;
// if (p == rowNumber - 1) {
// tempStr = params.substring(start, paramsNameNumber);
// } else {
// tempStr = params.substring(start, end) + "\n";
// }
// newParamsName += tempStr;
// }
//
// } else {
// newParamsName = params;
// }
// return newParamsName
// },
textStyle: {
fontWeight:'bold',
fontSize: 9, //横轴文字大小
color: '#0712a6' //文字颜色
}
},
boundaryGap:false,
data:data_name
},
yAxis: {
type: 'value',
splitNumber:10, //设置纵轴刻度
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
}
},
series: [
{
name:'广州市每日累计确诊人数',
type:'line',
stack: '总量1', //要这个变量相同才能堆积起来
smooth:true,
symbolSize:14,
data:dataGD01,
//itemStyle : {normal : {color:'#ffc400'}},
itemStyle: {
normal: {
label : {
show:true,
position:'bottom',
formatter:'{c}'
},
areaStyle:{ //有这个属性代表是波浪图
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#737373'},
{offset: 0.5, color: '#252525'},
{offset: 1, color: '#252525'}
]
)
},
color:'#08306B'
}
}
},
{
name:'广州市每日累计出院人数',
type:'line',
stack: '总量1',
smooth:true,
symbolSize:14,
data:dataGD02,
//itemStyle : {normal : {color:'#ffc400'}},
itemStyle: {
normal: {
label : {
show:true,
position:'top',
formatter:'{c}'
},
areaStyle:{
color:new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#99D8C9'},
{offset: 0.5, color: '#238B45'},
{offset: 1, color: '#238B45'}
]
)
},
color:'#238B45'
}
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>