修改ui
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user