設計圖：
目的：
實現折線圖曲線區域顏色漸變、修改座標指示器線條寬度和顏色
實現：
直接介紹重點：
曲線區域顏色漸變
座標指示器線條寬度和顏色
最終代碼：
<!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>