xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
姚宇浩 2024-04-22 09:32:41 +08:00
parent d07c48d8b7
commit 966b1a9769
5 changed files with 119 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/view/echarts_work/eP1.vue
View File

@ -10,44 +10,15 @@ import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
const data = [120, 200, 50, 80, 70]; const data = [120, 200, 50, 80, 70];
const lineData = [150, 230, 24, 218, 135]; const lineData = [1500, 2300, 204, 2018, 1305];
const max = data const max = data
.concat(lineData) .concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值 .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
// 背景颜色
const color = [
{
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 0.5,
color: "rgba(142, 187, 255, 0.5)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
],
},
];
const option = { const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}", formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //提示文字标题颜色
},
},
}, },
legend: { legend: {
data: ["救助金额", "救助人数"], data: ["救助金额", "救助人数"],
@ -65,7 +36,7 @@ const option = {
color: "#ffffff", color: "#ffffff",
}, },
calculable: true, calculable: true,
color,
xAxis: [ xAxis: [
{ {
type: "category", type: "category",
@ -92,7 +63,7 @@ const option = {
type: "value", type: "value",
scale: true, scale: true,
name: "救助人数", name: "救助人数",
max: max,
splitLine: { splitLine: {
//分割线配置 //分割线配置
show: false, show: false,
@ -121,7 +92,7 @@ const option = {
type: "value", type: "value",
scale: true, scale: true,
min: 0, min: 0,
max: max,
name: "救助金额/万", name: "救助金额/万",
splitLine: { splitLine: {
show: false, show: false,
@ -146,9 +117,35 @@ const option = {
}, },
}, },
}, },
{
type: "value",
min: 0,
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 14,
fontFamily: "MicrosoftYaHei",
color: "#DEF1FF",
lineHeight: 19,
},
},
], ],
series: [ series: [
{ {
yAxisIndex: 1,
name: "救助金额", name: "救助金额",
data: lineData, data: lineData,
type: "line", //线状图 type: "line", //线状图
@ -162,6 +159,7 @@ const option = {
}, },
}, },
{ {
yAxisIndex: 0,
name: "救助人数", name: "救助人数",
data: data, data: data,
barWidth: 20, barWidth: 20,
@ -179,14 +177,11 @@ const option = {
]), ]),
}, },
}, },
{ {
type: "bar",
xAxisIndex: 1, xAxisIndex: 1,
itemStyle: { yAxisIndex: 2,
color: "rgba(180, 180, 180, 0.2)", //外阴影背景 emphasis: {
},
data: data.map(() => max),
barWidth: 40, //外阴影背景宽
emphasis: {
itemStyle: { itemStyle: {
color: { color: {
type: "linear", type: "linear",
@ -207,7 +202,11 @@ const option = {
}, },
}, },
}, },
type: "bar", itemStyle: {
color: "rgba(221, 242, 255, 0.1)",
},
data: ["2019", "2020", "2021", "2022", "2023"].map(() => 100),
barWidth: 50,
}, },
], ],
}; };

7
src/view/echarts_work/eP2.vue
View File

@ -44,12 +44,7 @@ const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}", formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //提示文字标题颜色
},
},
}, },
legend: { legend: {
data: ["救助金额", "救助人数"], data: ["救助金额", "救助人数"],

10
src/view/echarts_work/eP3.vue
View File

@ -36,13 +36,8 @@ const color = [
const option = { const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}", formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}<br/>{a3}:{c3}<br/>{a4}:{c4}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //提示文字标题颜色
},
},
}, },
legend: [ legend: [
{ {
@ -153,6 +148,7 @@ const option = {
}, },
}, },
}, },
], ],
series: [ series: [
{ {

7
src/view/echarts_work/eP4.vue
View File

@ -30,12 +30,7 @@ const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}", formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#3F82F7", //提示文字标题颜色
},
},
}, },
legend: { legend: {

141
src/view/education.vue
View File

@ -6,10 +6,12 @@
<eP1></eP1> <eP1></eP1>
<div class="t_1"></div> <div class="t_1"></div>
<div class="t_2"> <div class="t_2">
<div class="t_3" v-for="(item,index) in fl" :key="index"> <div class="t_2_1" v-for="(item, index) in fl" :key="index">
<div class="top">{{item.value}}%</div> <div class="top">{{ item.value }}%</div>
<div :class='item.cls'></div> <div class="t_3">
<div class="right">{{item.name}}</div> <div :class="item.cls"></div>
<div class="right">{{ item.name }}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -1198,80 +1200,83 @@ onBeforeMount(() => {
background-size: 100% 100%; background-size: 100% 100%;
} }
.t_2 { .t_2 {
margin-top: 35px; margin-top: 5px;
padding: 0 10px; padding: 0 10px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
.t_3 { .t_2_1 {
width: 135px; display: flex;
height: 90px; flex-direction: column;
background-image: url(@/assets/images/education/fk.png); align-items: center;
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.top { .top {
position: absolute;
left: 38px;
top: -25px;
font-size: 26px; font-size: 26px;
color: #ffffff; color: #ffffff;
line-height: 30px; line-height: 30px;
} }
.left1 { .t_3 {
position: absolute; width: 135px;
left: 15px; height: 90px;
top: 35px; background-image: url(@/assets/images/education/fk.png);
width: 40px;
height: 40px;
background-image: url(@/assets/images/education/lset.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} position: relative;
.left2 {
position: absolute; .left1 {
left: 15px; position: absolute;
top: 35px; left: 15px;
width: 40px; top: 35px;
height: 40px; width: 40px;
background-image: url(@/assets/images/education/dszn.png); height: 40px;
background-repeat: no-repeat; background-image: url(@/assets/images/education/lset.png);
background-size: 100% 100%; background-repeat: no-repeat;
} background-size: 100% 100%;
.left3 { }
position: absolute; .left2 {
left: 15px; position: absolute;
top: 35px; left: 15px;
width: 40px; top: 35px;
height: 40px; width: 40px;
background-image: url(@/assets/images/education/dqjt.png); height: 40px;
background-repeat: no-repeat; background-image: url(@/assets/images/education/dszn.png);
background-size: 100% 100%; background-repeat: no-repeat;
} background-size: 100% 100%;
.left4 { }
position: absolute; .left3 {
left: 15px; position: absolute;
top: 35px; left: 15px;
width: 40px; top: 35px;
height: 40px; width: 40px;
background-image: url(@/assets/images/education/xsdb.png); height: 40px;
background-repeat: no-repeat; background-image: url(@/assets/images/education/dqjt.png);
background-size: 100% 100%; background-repeat: no-repeat;
} background-size: 100% 100%;
.right { }
position: absolute; .left4 {
left: 65px; position: absolute;
top: 35px; left: 15px;
width: 38px; top: 35px;
height: 40px; width: 40px;
font-family: PingFangSC, PingFang SC; height: 40px;
font-weight: 500; background-image: url(@/assets/images/education/xsdb.png);
font-size: 15px; background-repeat: no-repeat;
color: #ffffff; background-size: 100% 100%;
line-height: 20px; }
letter-spacing: 4px; .right {
text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65); position: absolute;
text-align: center; left: 65px;
font-style: normal; top: 35px;
width: 38px;
height: 40px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 15px;
color: #ffffff;
line-height: 20px;
letter-spacing: 4px;
text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
text-align: center;
font-style: normal;
}
} }
} }
} }