代码如下:
var orderNumChart;
function loaOrderNumChart() {
var option = {
grid: {
left: '3%',
right: '3%',
bottom: '15%',
top: '5%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,//0刻度开始
axisTick: {
show: false//隐藏x坐标轴刻度
},
//x轴字体样式
axisLabel: {
show: true,
textStyle: {
color: '#42436A',
fontSize:'12',
}
},
//x轴颜色
axisLine: {
lineStyle: {
color: "#e4e4e4",
}
},
data: ['5月', '6月', '7月', '8月', '9月', '10月']
},
yAxis: {
type: 'value',
axisLine: {
show: false//隐藏y坐标轴
},
//y轴字体样式
axisLabel: {
show: true,
textStyle: {
color: '#9495ab',
fontSize:'12'
}
},
//网格样式
splitLine: {
show: true,
lineStyle:{
color: '#e4e4e4',
width: 1,
type: 'solid'
}
},
axisTick: {
show: false//隐藏y坐标轴刻度
},
},
//axisPointer: { //坐标轴指示器,坐标轴触发有效,
//type: 'line', //默认为line,line直线,cross十字准星,shadow阴影
//lineStyle: {
//color: 'rgba(101,163,255,0.4)'
//}
//},
//指示器
tooltip: {
trigger: 'axis',
formatter: "{b}时 : {c}条告警",
axisPointer:{
lineStyle: {
color: '#125160'
}
}
},
series: [{
data: [2, 4, 5, 8, 6, 2],
type: 'line',
symbolSize: 6,//拐点大小
color:'#5F94FF',//拐点颜色
//smooth:true,//拐点平滑
//折线样式
itemStyle: {
normal: {
lineStyle: {
width: 2,
color: '#5F94FF'
}
}
},
//折线下填充渐变颜色
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: 'rgba(1,189,213,.6)'
}, {
offset: 0.7, color: 'rgba(1,189,213,.2)'
}, {
offset: 1, color: 'rgba(1,189,213,.05)'
}]
),
}
},
}]
};
orderNumChart = echarts.init(document.getElementById('order-num-chart'));
orderNumChart.setOption(option);
}
loaOrderNumChart();
效果图:
折线下填充渐变颜色: