效果图:
需求点:
1. x轴是时间
2. 折线区域是渐变色
3. 显示折线小圆点
option: {
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: '#d8d8d8'
},
axisLabel: {
textStyle: '#cccccc'
},
splitLine: {
show: true,
lineStyle: '#d8d8d8' // x轴内容线颜色(横线)
},
data: ['07:00', '07:30', '08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30']
}
],
yAxis: [
{
type: 'value',
name: '人数',
axisTick: {
show: false
},
axisLine: {
show: true,
lineStyle: '#d8d8d8' // Y轴坐标颜色
},
axisLabel: {
margin: 10,
textStyle: '#cccccc'
},
splitLine: {
//网格线
lineStyle: {
color: '#d8d8d8' // Y轴内容线颜色(横线)
}
},
nameTextStyle: { color: '#ffffff', fontSize: 16, padding: [0, 50, 0, 0] }
}
],
series: [
{
name: '时间',
type: 'line',
symbolSize: 8,
label: {
show: true, //开启显示
textStyle: {
color: '#fff'
}
},
lineStyle: {
normal: {
color: 'rgba(34, 251, 183, 1)', // 折线颜色
width: 2,
shadowColor: 'rgba(34,150,243, 0.3)' // 折线阴影颜色
}
},
itemStyle: {
normal: {
color: 'rgba(34, 251, 183, 1)' // 折线小圆点颜色
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(13, 253, 178, 1)' // 折线底下区域渐变色
},
{
offset: 0.8,
color: 'rgba(5, 80, 57, 1)' // 折线底下区域渐变色
}
],
false
)
}
},
data: [0, 200, 167, 142, 85, 121, 186, 243, 162, 137, 0, 0]
}
]
}