先看效果图：
代码如下：
chart.setOption({
tooltip: {
trigger: 'axis',
show: true,
backgroundColor: 'rgba(6,19,40,0.8)',
borderColor: 'transparent',
padding: [8, 20, 8, 8],
textStyle: {
color: '#fff',
opacity: 1,
fontSize: 15,
},
axisPointer: {
type: 'line'
}
},
grid: {
left: '11%',
top: '14%',
width: '86%',
height: '75%',
},
legend: {
show: false,
},
xAxis: {
type: 'category',
data: ["6/1", "6/2", "6/3", "6/4", "6/5", "6/6"],
boundaryGap: true,
splitLine: {
lineStyle: {
type: 'solid',
},
alignWithLabel: true,
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#BAE7FF'
},
},
axisTick: {
show: false,
},
axisLabel: {
fontSize: 16,
fontFamily: 'Source Han Sans CN',
fontWeight: 400,
lineHeight: 30,
color: '#cccccc',
margin: 3,
interval: 0,
},
},
yAxis: {
name: '单位: %',
type: 'value',
max: 100,
interval: 20,
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(105, 119, 135, 0.6)'
}
},
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#BAE7FF'
},
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 16,
fontFamily: 'Source Han Sans CN',
fontWeight: 400,
color: '#cccccc',
margin: 5
},
nameGap: 0,
nameTextStyle: {
fontSize: 16,
fontFamily: 'Source Han Sans CN',
fontWeight: 400,
lineHeight: 50,
color: '#cccccc'
}
},
series: [
{
name: '占比',
data: [43, 54, 42, 41, 27, 45],
type: 'line',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(184,255,1,0.50)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(184,255,1,0.00)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
},
lineStyle: {
color: '#B8FF01',
width: 1,
},
symbol: 'circle',
symbolSize: 8,
itemStyle: {
color: '#B8FF01',
borderColor: 'rgba(184,255,1,0.4)',
borderType: 'solid',
borderWidth: 8
},
emphasis: {
scale: false,
lineStyle: {
width: 1
}
}
}
]
})
标签：false,show,color,lineStyle,渐变,rgba,折线图,实心,type From： https://www.cnblogs.com/a973692898/p/17568716.html