const captions = [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
];
const values = [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34];
const axisLabel = {
fontSize: 28,
color: "rgba(203, 221, 242, 0.60)",
};
const option = {
backgroundColor: "#092348",
tooltip: {
trigger: "axis",
axisPointer: {
snap: true,
type: "line",
lineStyle: {
color: "rgba(247, 249, 252, 0.30)", // 线的颜色
width: 4, // 线宽
type: "solid", // 线型
},
},
formatter: "{c0}",
backgroundColor: "rgba(255,255,255,0)",
borderWidth: 0,
padding: 0,
textStyle: {
color: "#fff",
},
position: (point) => [point[0] + 20, point[1] - 10],
},
grid: {
left: 0,
bottom: 0,
containLabel: true,
right: 0,
top: "20%",
},
xAxis: {
type: "category",
data: captions,
axisTick: {
show: false, //隐藏X轴刻度
},
axisLabel,
},
yAxis: {
type: "value",
name: "次",
nameTextStyle: {
fontSize: 28,
color: "rgba(203, 221, 242, 0.60)",
align: "center",
padding: [0, 50, 10, 0],
},
axisLabel,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "rgba(223, 223, 223, 1)",
},
},
},
series: [
{
type: "line",
data: values,
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 0.6,
colorStops: [
{
offset: 0,
color: "rgba(102, 146, 255, 0.5)", // 0% 处的颜色
},
{
offset: 1,
color: "rgba(102, 146, 255, 0)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
lineStyle: {
color: "#6692FFFF",
},
// symbol: "none",
symbol: "circle",
symbolSize: 10,
showSymbol: false,
smooth: true,
itemStyle: {
color: "rgba(161, 173, 183, 0.8)",
shadowColor: "rgba(255, 255, 255, 1)",
shadowBlur: 10,
},
},
],
};