设计图：
目的：
实现折线图曲线区域颜色渐变、修改坐标指示器线条宽度和颜色
实现：
直接介绍重点：
曲线区域颜色渐变
坐标指示器线条宽度和颜色
最终代码：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
padding: 0;
margin:0 auto;
}
.wrapper{
width: 1100px;
height: auto;
background: #262A36FF;
}
#container{
width: 960px;
height:500px;
margin-top:5%;
/* background:red; */
}
</style>
<body>
<div class="wrapper">
<div id="container"> </div>
</div>
</body>
<script type = "text/javascript" src="./js/jquery.js"></script>
<script type = "text/javascript" src="./js/echarts.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
//实例化echarts对象
var myEcharts = echarts.init(document.getElementById("container"));
//自定义图表配置选项
var option = {
//提示框组件
tooltip:{
//触发类型：坐标轴触发
trigger:'axis',
axisPointer:{
lineStyle:{
width:15,
color:'rgba(240,240,240,0.5)'
}
}
},
xAxis:{
//是否显示x轴
show:true,
//类型：类目轴
type:'category',
//坐标轴刻度设置
axisTick:{
//隐藏刻度线
show:false,
//设置刻度线与标签对齐
alignWithLabel:true
},
axisLabel:{
//x轴刻度标签字体颜色大小
textStyle:{
fontSize: 14,
color:'#F0F0F0'
},
},
axisLine:{
show:true,
lineStyle:{
//轴线颜色
color: '#6A7594',
//线型
type:'dashed'
}
},
data:['2019','2018','2017']
},
yAxis:{
type:'value',
//是否显示y轴
show:true,
//隐藏y轴轴线
axisLine:{
show:false
},
axisTick:{
//隐藏刻度线
show:false
},
splitLine:{
//隐藏网格线
show:false
},
//刻度轴标签
axisLabel:{
textStyle:{
fontSize: 14,
color: '#F0F0F0'
}
}
},
//系列列表
series:[
{
name:'test',
//类型：折线图
type:'line',
//平滑效果
smooth: true,
symbolSize: 5,
lineStyle:{
normal:{
width:3,
color:'#BE0755'
}
},
areaStyle:{
normal:{
//右，下，左，上
color:new echarts.graphic.LinearGradient(0,0,0,1,[
{
offset:0,
color:'#980845'
},
{
offset:1,
color:'#000000'
}
],false)
}
},
data: [5,15,10]
}
]
};
//echarts对象绑定配置选项
myEcharts.setOption(option);
});
</script>
</html>