339 lines
6.3 KiB
Vue
339 lines
6.3 KiB
Vue
<template>
|
||
<Card title="近7日趋势(次)">
|
||
<div class="top-right-box">
|
||
<div class="history-content">
|
||
<div id="edgeWeekTrend" ref="edgeWeekTrend" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import Card from "@/components/card.vue";
|
||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||
import * as echarts from "echarts";
|
||
// import { getSelectDataListApi } from "@/api/modules/distribution";
|
||
// import Card from "@/components/card.vue";
|
||
import { GlobalStore } from "@/stores";
|
||
import mitts from "@/utils/bus"; //兄弟组件传值
|
||
const store = GlobalStore();
|
||
// x轴
|
||
let twenty_four_time = ref([
|
||
"2023-08-24",
|
||
"2023-08-25",
|
||
"2023-08-26",
|
||
"2023-08-27",
|
||
"2023-08-28",
|
||
"2023-08-29",
|
||
"2023-08-30"
|
||
] as any);
|
||
// Y轴单位
|
||
let unit = ref("单位:V" as any);
|
||
// Y轴数据
|
||
let yData = ref([10, 65, 20, 25, 15, 25, 12] as any);
|
||
// 图表数据项
|
||
let option = ref(null as any);
|
||
|
||
// 选中
|
||
let checked = ref(1);
|
||
function getNowData(type: any) {
|
||
checked.value = type;
|
||
// 初始化option
|
||
// initOption();
|
||
}
|
||
function getWeekData(type: any) {
|
||
checked.value = type;
|
||
// 初始化option
|
||
// initOption();
|
||
}
|
||
function getMonthData(type: any) {
|
||
checked.value = type;
|
||
// 初始化option
|
||
// initOption();
|
||
}
|
||
|
||
function initOption() {
|
||
option.value = {
|
||
// backgroundColor: '#071c3a',
|
||
title: {
|
||
// text: '日用气量分析',
|
||
textStyle: {
|
||
align: "center",
|
||
color: "#fff",
|
||
fontSize: 20
|
||
},
|
||
top: "2%",
|
||
left: "center"
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
axisPointer: {
|
||
lineStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(0, 255, 233,0)"
|
||
},
|
||
{
|
||
offset: 0.5,
|
||
color: "rgba(255, 255, 255,1)"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(0, 255, 233,0)"
|
||
}
|
||
],
|
||
global: false
|
||
}
|
||
}
|
||
}
|
||
},
|
||
grid: {
|
||
top: "10%",
|
||
left: "10%",
|
||
right: "10%",
|
||
bottom: "8%"
|
||
// containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#14346C"
|
||
}
|
||
},
|
||
splitArea: {
|
||
// show: true,
|
||
color: "#f00",
|
||
lineStyle: {
|
||
color: "#f00"
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: "#fff",
|
||
interval: 0
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
boundaryGap: false,
|
||
data: twenty_four_time.value
|
||
}
|
||
],
|
||
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
// name: unit.value,
|
||
nameTextStyle: {
|
||
color: "#fff",
|
||
nameLocation: "start"
|
||
},
|
||
min: 0,
|
||
// max: 140,
|
||
splitNumber: 3,
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#14346C"
|
||
}
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#14346C"
|
||
}
|
||
},
|
||
interval: 10,
|
||
axisLabel: {
|
||
show: true,
|
||
margin: 20,
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: true
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
type: "line",
|
||
// smooth: true, //是否平滑
|
||
showAllSymbol: true,
|
||
symbol: `image://${symbolIcon}`,
|
||
// symbol: "circle",
|
||
smooth: 0.8,
|
||
symbolSize: 30,
|
||
label: {
|
||
show: false,
|
||
position: "top",
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
itemStyle: {
|
||
color: "#4AC0F3",
|
||
borderColor: "#4AC0F3",
|
||
borderWidth: 5,
|
||
shadowColor: "rgba(0, 0, 0, .6)",
|
||
shadowBlur: 0,
|
||
lineStyle: {
|
||
width: 0.1,
|
||
normal: {
|
||
color: "#fff",
|
||
shadowBlur: 0
|
||
}
|
||
}
|
||
},
|
||
tooltip: {
|
||
show: true
|
||
},
|
||
areaStyle: {
|
||
normal: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: "rgba(74, 192, 243,0.5)"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(74, 192, 243, 0.1)"
|
||
}
|
||
],
|
||
false
|
||
),
|
||
shadowColor: "rgba(74, 192, 243, 1)",
|
||
shadowBlur: 20
|
||
}
|
||
},
|
||
data: yData.value
|
||
}
|
||
]
|
||
};
|
||
}
|
||
|
||
function drawChart() {
|
||
initOption();
|
||
console.log("绘制前数据", yData.value);
|
||
let edgeWeekTrend = echarts.init(document.getElementById("edgeWeekTrend"));
|
||
edgeWeekTrend.setOption(option.value);
|
||
}
|
||
|
||
//获取当前前七天的日期
|
||
function generateWeek() {
|
||
// 获取当前日期
|
||
const today = new Date();
|
||
// 存放日期
|
||
let dateArr = [];
|
||
// 返回最近七天的日期
|
||
for (let i = 0; i < 7; i++) {
|
||
// 每次循环，将日期递减一天
|
||
const date = new Date(today);
|
||
date.setDate(today.getDate() - i);
|
||
|
||
// 格式化日期为yyyy-mm-dd格式
|
||
const dateString = date.toISOString().split("T")[0];
|
||
dateArr.unshift(dateString);
|
||
console.log(dateArr, "周日期");
|
||
}
|
||
twenty_four_time.value = dateArr;
|
||
}
|
||
|
||
onMounted(async () => {
|
||
generateWeek();
|
||
drawChart();
|
||
});
|
||
|
||
// 即时销毁事件总线派发，否则会执行两次miits.on造成不必要的内存浪费 7.14 by CJP
|
||
onBeforeUnmount(async () => {
|
||
mitts.off("devSn");
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.top-right-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
.title {
|
||
height: 10%;
|
||
line-height: 33px;
|
||
text-align: left;
|
||
font-size: calc(100vw * 18 / 1920);
|
||
color: #ffffff;
|
||
background: url("@/assets/images/titleBig.webp") no-repeat;
|
||
background-size: 100% 100%;
|
||
i {
|
||
font-family: OPPOSansH;
|
||
margin-left: 6%;
|
||
}
|
||
}
|
||
.history-content {
|
||
height: 100%;
|
||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
.rightHeader {
|
||
width: 20%;
|
||
display: flex;
|
||
position: absolute;
|
||
z-index: 10;
|
||
color: #fff;
|
||
font-size: 10px;
|
||
text-align: center;
|
||
line-height: 20px;
|
||
right: -1%;
|
||
top: 5%;
|
||
.Selected {
|
||
height: 5%;
|
||
background: url("@/assets/images/dustNoise/rightImg2.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
cursor: pointer;
|
||
}
|
||
.day {
|
||
padding: 0 6%;
|
||
margin-right: 5%;
|
||
z-index: 99;
|
||
}
|
||
.week {
|
||
padding: 0 6%;
|
||
margin-right: 5%;
|
||
z-index: 99;
|
||
}
|
||
.month {
|
||
padding: 0 6%;
|
||
z-index: 99;
|
||
}
|
||
.active {
|
||
background: url("@/assets/images/dustNoise/rightImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .el-input__wrapper {
|
||
background: #112d59;
|
||
}
|
||
::v-deep .el-input__inner {
|
||
color: #fff;
|
||
}
|
||
::v-deep .el-select .el-input .el-select__caret {
|
||
color: #fff;
|
||
}
|
||
</style>
|