This commit is contained in:
‘937886381’
2024-07-25 14:13:35 +08:00
parent 8ecf281f08
commit 737949d3ec
50 changed files with 1508 additions and 777 deletions

View File

@@ -177,6 +177,11 @@ function getTemplate(period, dataList, than) {
const year = new Date().getFullYear();
if (period === '日' && than === '同比') {
items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}${yesterday}`,
data: dataList ? dataList[0] : [],
@@ -186,14 +191,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${dayBeYes}`,
data: dataList ? dataList[0] : [],
@@ -203,14 +209,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '同比') {
items = [
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year-1}年本周`,
data: dataList ? dataList[0] : [],
@@ -220,14 +227,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `上周`,
data: dataList ? dataList[0] : [],
@@ -237,14 +245,15 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '同比') {
items = [
{
name: `${month}月目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year-1}${month}`,
data: dataList ? dataList[0] : [],
@@ -254,31 +263,33 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '环比') {
items = [
{
name: `${lastMonth}`,
data: dataList ? dataList[0] : [],
},
{
name: `${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${lastMonth}`,
data: dataList ? dataList[0] : [],
},
];
} else {
items = [
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}`,
data: dataList ? dataList[0] : [],
@@ -288,11 +299,7 @@ function getTemplate(period, dataList, than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
return items

View File

@@ -168,23 +168,29 @@ function getTemplate(period, dataList,than) {
const year = new Date().getFullYear();
if (period === '日' && than === '同比') {
items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2].splice(0,2) : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}${yesterday}`,
data: dataList ? dataList[0] : [],
data: dataList ? dataList[0].splice(0, 2) : [],
},
{
name: `${yesterday}`,
data: dataList ? dataList[1] : [],
data: dataList ? dataList[1].splice(0, 2) : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '日' && than === '环比') {
items = [
{
name: `${dayBeYes}`,
data: dataList ? dataList[0] : [],
@@ -194,16 +200,17 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${yesterday}日目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '同比') {
items = [
{
name: `${year-1}年本周`,
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}年本周`,
data: dataList ? dataList[0] : [],
},
{
@@ -211,14 +218,15 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '周' && than === '环比') {
items = [
{
name: `上周`,
data: dataList ? dataList[0] : [],
@@ -228,16 +236,17 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `本周目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '同比') {
items = [
{
name: `${year-1}${month}`,
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}${month}`,
data: dataList ? dataList[0] : [],
},
{
@@ -245,31 +254,34 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
} else if (period === '月' && than === '环比') {
items = [
{
name: `${lastMonth}`,
data: dataList ? dataList[0] : [],
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}`,
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${month}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
name: `${lastMonth}`,
data: dataList ? dataList[0] : [],
},
];
} else {
items = [
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year - 1}`,
data: dataList ? dataList[0] : [],
@@ -279,11 +291,7 @@ function getTemplate(period, dataList,than) {
data: dataList ? dataList[1] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
{
name: `${year}目标`,
data: dataList ? dataList[2] : [],
// : Array.from({ length: 7 }, () => Math.floor(Math.random() * 1000)),
},
];
}
return items

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-07-19 16:10:10
* @LastEditTime: 2024-07-23 15:52:25
* @LastEditors: zhp
* @Description:
-->
@@ -56,7 +56,7 @@ export default {
actualOptions: null,
options: {
grid: {
left: "5%",
left: "6%",
right: "0%",
bottom: "3%",
top: "15%",
@@ -81,13 +81,13 @@ export default {
res +=
"<br/>" +
`${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:39%;left:3.05%;'></span>
<span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:36%;left:4.8%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
}` +
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value.toFixed(2) + '%' : "0.00" + '%'}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
@@ -118,6 +118,7 @@ export default {
nameTextStyle: {
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
@@ -139,6 +140,41 @@ export default {
},
},
series: [
{
name: "", // "2024年目标值",
type: "line",
lineStyle: {
color: "#f3c000",
},
itemStyle: {
color: "#f3c000",
},
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#f3c000", // 0% 处的颜色
// },
// {
// offset: 0.55,
// color: "#f3c00033",
// },
// {
// offset: 1,
// color: "transparent", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
data: [], // this.series[0].data,
},
{
name: "", // this.series[0].name,
type: "bar",
@@ -205,42 +241,7 @@ export default {
},
},
data: [], // this.series[1].data,
},
{
name: "", // "2024年目标值",
type: "line",
lineStyle: {
color: "#f3c000",
},
itemStyle: {
color: "#f3c000",
},
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#f3c000", // 0% 处的颜色
// },
// {
// offset: 0.55,
// color: "#f3c00033",
// },
// {
// offset: 1,
// color: "transparent", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
data: [], // this.series[0].data,
},
}
],
},
};
@@ -366,34 +367,34 @@ export default {
.legend-item:nth-child(1) {
margin-left: 1vw;
}
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -1.3vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -1.2vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -1.13vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.4vw;
height: 0.4vw;
border-radius: 100%;
top: 50%;
left: -1.1vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(2):before {
background-color: #12f7f1;
}

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-07-19 16:10:19
* @LastEditTime: 2024-07-23 15:52:09
* @LastEditors: zhp
* @Description:
-->
@@ -56,7 +56,7 @@ export default {
actualOptions: null,
options: {
grid: {
left: "5%",
left: "6%",
right: "0%",
bottom: "3%",
top: "15%",
@@ -81,13 +81,13 @@ export default {
res +=
"<br/>" +
`${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
<span style='display:inline-block;width: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:39%;left:3.05%;'></span>
<span style='display:inline-block;width: 8px;height: 8px;border-radius: 100%;background-color: #f3c000;position: absolute;top:36%;left:4.8%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${params[i].seriesName}</span>`
}` +
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
`<span style='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value.toFixed(2) + '%' : "0.00" + '%'}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
@@ -118,6 +118,7 @@ export default {
nameTextStyle: {
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
@@ -139,6 +140,41 @@ export default {
},
},
series: [
{
name: "", // "2024年目标值",
type: "line",
lineStyle: {
color: "#f3c000",
},
itemStyle: {
color: "#f3c000",
},
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#f3c000", // 0% 处的颜色
// },
// {
// offset: 0.55,
// color: "#f3c00033",
// },
// {
// offset: 1,
// color: "transparent", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
data: [], // this.series[0].data,
},
{
name: "", // this.series[0].name,
type: "bar",
@@ -206,41 +242,7 @@ export default {
},
data: [], // this.series[1].data,
},
{
name: "", // "2024年目标值",
type: "line",
lineStyle: {
color: "#f3c000",
},
itemStyle: {
color: "#f3c000",
},
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "#f3c000", // 0% 处的颜色
// },
// {
// offset: 0.55,
// color: "#f3c00033",
// },
// {
// offset: 1,
// color: "transparent", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
// },
data: [], // this.series[0].data,
},
],
},
};
@@ -372,33 +374,33 @@ export default {
.legend-item:nth-child(3):before {
background-color: #58adfa;
}
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -1.3vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 1vw;
height: 0.1064vw;
background-color: #f3c000;
position: absolute;
top: 50%;
// left: -16px;
left: -1.2vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -1.13vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(1):after {
background-color: #f3c000;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.4vw;
height: 0.4vw;
border-radius: 100%;
top: 50%;
left: -1.1vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
}
</style>

View File

@@ -152,10 +152,14 @@ export default {
: `${year}良率`,
}[this.period];
console.log(vt[0]);
let titleSize = this.fontSize(0.35)
let subtitleSize = this.fontSize(0.14)
const t = getOptions({
// single,
color: this.color == 1 ? "#4CF0E8" : "#1065ff",
titleValue,
titleSize,
subtitleSize,
subtitle,
yesterday,
currentName: items[0].label,
@@ -261,6 +265,12 @@ export default {
},
},
methods: {
fontSize(res){
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
},
formatNumber(num) {
console.log(num);
// 判断是否为整数
@@ -290,9 +300,9 @@ export default {
// justify-content: center;
gap: 3px;
backdrop-filter: blur(24px);
.cities {
height: 40px;
}
// .cities {
// // height: 40px;
// }
.chart {
// margin-left: 5%;
@@ -300,12 +310,12 @@ export default {
flex: 1 1 auto;
padding: 0 20%;
/* margin: 10%; */
height: 16vh;
height: 0;
/* min-width: 300px; */
align-self: stretch;
}
.legend {
height: 80px;
// height: 80px;
display: flex;
color: #fff;
justify-content: flex-end;

View File

@@ -73,7 +73,7 @@ export default {
&:before {
content: attr(data-title);
display: inline-block;
color: #fff;
color:rgba(223,241,254,.8);
position: absolute;
bottom: -200%;
font-size: 12px;
@@ -82,7 +82,7 @@ export default {
&:after {
content: attr(data-rate);
display: inline-block;
color: #fff;
color: rgba(223, 241, 254, .8);
position: absolute;
bottom: -200%;
right: 0;

View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-27 09:12:54
* @LastEditTime: 2024-07-09 15:02:46
* @LastEditTime: 2024-07-22 17:03:48
* @LastEditors: zhp
* @Description:
-->
@@ -60,6 +60,8 @@ export default {
</script>
<style scoped lang="scss">
.progress-bar {
height: 10px;
background-color: #002f6b;
@@ -70,7 +72,7 @@ export default {
&:before {
content: attr(data-title);
display: inline-block;
color: #fff;
color: rgba(223, 241, 254, .8);
position: absolute;
bottom: -200%;
font-size: 12px;
@@ -79,7 +81,7 @@ export default {
&:after {
content: attr(data-rate);
display: inline-block;
color: #fff;
color: rgba(223, 241, 254, .8);
position: absolute;
bottom: -200%;
right: 0;