示例图
<div id="chart3" style="width:600px; height: 400px;"></div>
<!-- js部分 -->
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script type="text/javascript">
option = {
backgroundColor: '#001848',
xAxis: {
type: 'category',
axisTick:{
show:false,
},
boundaryGap: false,
axisTick:{
show:false,
},
axisLabel:{
color:'#fff'
},
axisLine:{
lineStyle:{
color:'rgba(12,102,173,.5)',
width:2,
}
},
},
yAxis: {
type: 'value',
axisTick:{
show:false,//不显示刻度线
},
axisLabel:{
color:'#fff' //y轴上的字体颜色
},
axisLine:{
lineStyle:{
width:2,
color:'rgba(12,102,173,.5)',//y轴的轴线的宽度和颜色
}
},
splitLine: {
show: false
}
},
series: [
{
type:'line',
symbol: 'none',
smooth:true,
itemStyle: {
normal: {
color: '#09b0f5',
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#09b0f5'
}, {
offset: 1,
color: 'rgba(12,102,173,.5)'
}])
}
},
}
]
};
option.xAxis.data = ['01','02','03','04','05','06','07','08','09','10','11','12 (月)'];
option.series[0].data = [21,25,27,12,22,21,25,27,12,22,42,32];
var chart3 = echarts.init(document.getElementById('chart3'));
chart3.setOption(option);
</script>