let xLabel = [
"2023-09-05 08:59:35",
"2023-09-05 08:59:36",
"2023-09-05 08:59:37",
"2023-09-05 08:59:38",
"2023-09-05 08:59:39",
"2023-09-05 09:01:10",
"2023-09-05 09:01:12",
"2023-09-05 09:01:13",
"2023-09-05 09:01:14",
"2023-09-05 09:01:15",
];
let goToSchool = [
"40",
"60",
"22",
"85",
"50",
"40",
"20",
"34",
"23",
"30",
];
let goOutSchool = [
"20",
"50",
"12",
"65",
"30",
"60",
"20",
"10",
"20",
"30",
];
option = {
backgroundColor:'#00266b',
tooltip: {
trigger: "axis",
borderWidth: 2,
padding: [5, 10],
},
color: [
"rgba(70,218,55,1)",
"rgba(243,173,89,1)",
"rgba(248,107,109,1)",
"rgba(92,192,228,1)",
"rgba(100,127,205,1)",
],
dataZoom: [
{
type: "slider",
show: true,
zoomLock: true,
// orient: "vertical",
// filterMode: "none",
// right: "2%",
start: 100,
end: 60,
bottom: 15, //居下的距离
// width: 10,
height: 10,
textStyle: {
color: "transparent",
fontSize: 9,
},
fillerColor: "#295cca",
brushSelect: false,
handleIcon:
"path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z", // 画一个圆形
handleSize: "100%",
handleStyle: {
color: "#295cca",
borderWidth: 0,
},
backgroundColor: "#0d2755", //两边未选中的滑动条区域的颜色
borderColor: "transparent",
filterMode: "filter",
},
],
legend: {
align: "left",
left: "14%",
top: "0%",
// type: "plain",
// formatter: ["{name}"].join("\n"),
textStyle: {
// color: "#fff",
// fontSize: 14,
// rick: {
// height: 14,
// a: {
// verticalAlign: "bottom",
// },
// },
// lineHeight: 10,
// align: "right",
inside: true,
color: "#fff",
padding: [14, 0, 10, 0],
align: "left",
verticalAlign: "center",
fontSize: 14,
rich: {},
},
itemStyle: {
borderRadius: 20, // 设置圆角大
},
icon: "rect",
itemGap: 25,
itemWidth: 12,
itemHeight: 12,
// icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
},
grid: {
top: "15%",
left: "4%",
right: "3%",
bottom: "21%",
// containLabel: true
},
xAxis: [
{
type: "category",
// name: '月份',
nameGap: 20,
boundaryGap: true,
nameTextStyle: {
// ---坐标轴名称样式
color: "#E2E8EDE8",
fontSize: 15,
},
axisLabel: {
show: true,
interval: 0, //横轴信息全部显示
// rotate:-30,//-30度角倾斜显示
textStyle: {
color: "#E2E8EDE8", // 更改坐标轴文字颜色
fontSize: this.screenScale * 15, // 更改坐标轴文字大小
},
},
splitLine: {
show: true,
lineStyle: {
// type: [5, 10],
// dashOffset: 10,
color: "rgba(77, 128, 254, 0.2)",
},
},
axisLine: {
show: true,
lineStyle: {
color: "rgba(77, 128, 254, 0.2)",
},
},
axisTick: {
show: false,
},
data: xLabel,
},
],
yAxis: [
{
axisLine: {
//y轴线的颜色以及宽度
show: true,
lineStyle: {
color: "rgba(77, 128, 254, 0.2)",
width: 1,
type: "solid",
},
},
axisLabel: {
textStyle: {
color: "#fff",
},
},
splitLine: {
show: true,
lineStyle: {
// type: [5, 10],
// dashOffset: 10,
color: "rgba(77, 128, 254, 0.2)",
},
},
},
],
series: [
{
name: "0003#F1",
type: "line",
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 2,
},
},
tooltip: {
show: true,
},
data: goToSchool,
},
{
name: "0003#F2",
type: "line",
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 2,
},
},
tooltip: {
show: true,
},
data: goOutSchool,
},
{
name: "0003#F3",
type: "line",
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 2,
},
},
tooltip: {
show: true,
},
data: ["10", "20", "42", "25", "30", "10", "20", "42", "25", "30"],
},
{
name: "0003#F4",
type: "line",
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 2,
},
},
tooltip: {
show: true,
},
data: ["22", "51", "14", "25", "30", "20", "51", "14", "25", "30"],
},
{
name: "0003#F5",
type: "line",
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbolSize: 0,
smooth: true,
lineStyle: {
normal: {
width: 2,
},
},
tooltip: {
show: true,
},
data: ["24", "52", "32", "25", "30", "46", "52", "32", "25", "30"],
},
],
};