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