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

gx

This commit is contained in:
duanxiaohai 2024-06-04 14:23:38 +08:00
parent 37be4d4727 b404f384d8
commit 1b115f9a43
10 changed files with 214 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/YLimg/ylimg11.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 71 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
src/assets/YLimg/ylimg12.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
src/assets/YLimg/ylimg2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 69 KiB

BIN
src/assets/YLimg/ylimg4.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 71 KiB

BIN
src/assets/YLimg/yljg.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

136
src/view/echarts_education/edCSR.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="chart" style="width: 100%;height: 250px"></div> <div ref="chart" style="width: 100%; height: 250px"></div>
</template> </template>
<script setup> <script setup>
@ -9,12 +9,7 @@ import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用 const chart = ref(); // 创建DOM引用
const data = [20, 20, 50, 80, 70, 10, 30]; const data = [200, 120, 150, 110, 70];
// const lineData = [150, 230, 224, 218, 135, 147, 260];
// const max = data
// .concat(lineData)
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
// // 背景颜色
const color = [ const color = [
{ {
type: "linear", type: "linear",
@ -80,14 +75,14 @@ const option = {
}, },
}, },
axisTick: { axisTick: {
show: false, // 设置轴刻度不显示 show: false, // 设置轴刻度不显示
}, },
data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",], data: ["东华街道", "龙洲街道", "湖镇镇", "詹家镇", "小南海镇"],
}, },
{ {
type: "category", type: "category",
show: false, show: false,
data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",], data: ["东华街道", "龙洲街道", "湖镇镇", "詹家镇", "小南海镇"],
}, },
], ],
yAxis: [ yAxis: [
@ -122,74 +117,95 @@ const option = {
}, },
}, },
}, },
// { {
// type: "value", type: "value",
// scale: true, min: 0,
// // name: "次数/次", max: 100,
// min: 0, splitLine: {
// max: max, show: false,
// splitLine: {//分割线配置 lineStyle: {
// show: false, type: "solid",
// lineStyle: { color: "rgb(221, 242, 255,0.1)",
// color: "#ffffff", },
// width: 1, },
// }, axisLine: {
// }, show: false,
// axisLabel: {//y轴文字的配置 lineStyle: {
// textStyle: { type: "dotted",
// color: "#ffffff", },
// }, },
// }, axisLabel: {
// axisLine: { show: false,
// //y轴线的颜色以及宽度 fontSize: 16,
// show: false, fontFamily: "MicrosoftYaHei",
// lineStyle: { color: "#ffffff",
// color: "#ffffff", fontSize: 16,
// width: 1, lineHeight: 19,
// type: "solid", },
// }, },
// },
// },
], ],
series: [ series: [
{ {
z: 1,
// name: "上门服务时长", // name: "上门服务时长",
data: data, data: data,
barWidth: 20, barWidth: 20,
type: "bar", type: "bar",
label:{ itemStyle: {
show:true, color: {
position:'top', type: "linear",
color:'#ffffff', x: 0,
formatter:function(data){ x2: 1,
return data.value y: 0,
} y2: 0,
colorStops: [
{ offset: 0, color: "rgba(47, 168, 215, .7)" },
{ offset: 0.5, color: "rgba(47, 168, 215, .7)" },
{ offset: 0.5, color: "rgba(47, 168, 215, .3)" },
{ offset: 1, color: "rgba(47, 168, 215, .5)" },
],
},
},
label: {
show: true,
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value;
},
}, },
}, },
// { //外阴影
// // name: "上门服务次数",
// data: lineData,
// type: "line", //线状图
// itemStyle: {
// borderColor: "#00FCFF",
// borderWidth: 1,
// color: "#00FCFF",
// },
// },
{ {
xAxisIndex: 1, xAxisIndex: 1,
yAxisIndex: 1,
showBackground: true, showBackground: true,
itemStyle: { itemStyle: {
normal: { normal: {
color: "rgba(180, 180, 180, 0)", //外阴影背景 color: "rgba(180, 180, 180, 0)", //外阴影背景
} },
}, },
// data: data.map(() => max), // data: data.map(() => max),
data: data.map(() => Math.max(...data) * 1.02), data: data.map(() => 100),
barWidth: 40, //外阴影背景宽 barWidth: 40, //外阴影背景宽
type: "bar", type: "bar",
}, },
//头部
{
z: 1,
type: "pictorialBar",
symbolPosition: "end",
data: data,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(47, 168, 215, 1)",
},
},
], ],
}; };

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

@ -213,6 +213,7 @@ const getOption = () => {
}, },
}, },
{ {
z: 1,
yAxisIndex: 0, yAxisIndex: 0,
name: "救助人数", name: "救助人数",
data: data.list1, data: data.list1,
@ -227,16 +228,19 @@ const getOption = () => {
}, },
}, },
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: {
{ type: "linear",
offset: 0, x: 0,
color: "rgba(255, 243, 119, 1)", x2: 1,
}, y: 0,
{ y2: 0,
offset: 1, colorStops: [
color: "rgba(255, 242, 142, 0.20)", { offset: 0, color: "rgba(255, 242, 142, .7)" },
}, { offset: 0.5, color: "rgba(255, 242, 142, .7)" },
]), { offset: 0.5, color: "rgba(255, 242, 142, .3)" },
{ offset: 1, color: "rgba(255, 242, 142, .5)" },
],
},
}, },
}, },
{ {
@ -270,6 +274,20 @@ const getOption = () => {
data: data.list.year.map(() => 100), data: data.list.year.map(() => 100),
barWidth: 50, barWidth: 50,
}, },
{
z: 1,
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(255, 242, 142, 1)",
},
},
], ],
}; };
}; };

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

@ -47,12 +47,6 @@ const data = reactive({
// max: null, // max: null,
}); });
// const data1 = [120, 200, 50, 80, 70];
// const lineData = [1500, 2300, 204, 2018, 1305];
// const max = data1
// .concat(lineData)
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
const getOption = () => { const getOption = () => {
data.option = { data.option = {
tooltip: { tooltip: {
@ -213,6 +207,7 @@ const getOption = () => {
}, },
}, },
{ {
z: 1,
yAxisIndex: 0, yAxisIndex: 0,
name: "救助人数", name: "救助人数",
data: data.list1, data: data.list1,
@ -227,16 +222,19 @@ const getOption = () => {
}, },
}, },
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: {
{ type: "linear",
offset: 0, x: 0,
color: "rgba(23, 237, 255, 1)", x2: 1,
}, y: 0,
{ y2: 0,
offset: 1, colorStops: [
color: "rgba(23, 237, 255, 0.20)", { offset: 0, color: "rgba(23, 237, 255, .7)" },
}, { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
]), { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
{ offset: 1, color: "rgba(23, 237, 255, .5)" },
],
},
}, },
}, },
{ {
@ -271,6 +269,21 @@ const getOption = () => {
// data: 100, // data: 100,
barWidth: 50, barWidth: 50,
}, },
//顶部圆片
{
z: 1,
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(23, 237, 255, 1)",
},
},
], ],
}; };
}; };

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

@ -209,6 +209,7 @@ const getOption = () => {
}, },
}, },
{ {
z: 1,
yAxisIndex: 0, yAxisIndex: 0,
name: "生活补贴人数", name: "生活补贴人数",
data: data.list1, data: data.list1,
@ -223,16 +224,19 @@ const getOption = () => {
}, },
}, },
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: {
{ type: "linear",
offset: 0, x: 0,
color: "rgba(23, 237, 255, 1)", x2: 1,
}, y: 0,
{ y2: 0,
offset: 1, colorStops: [
color: "rgba(23, 237, 255, 0.20)", { offset: 0, color: "rgba(23, 237, 255, .7)" },
}, { offset: 0.5, color: "rgba(23, 237, 255, .7)" },
]), { offset: 0.5, color: "rgba(23, 237, 255, .3)" },
{ offset: 1, color: "rgba(23, 237, 255, .5)" },
],
},
}, },
}, },
{ {
@ -266,6 +270,20 @@ const getOption = () => {
data: data.list.year.map(() => 100), data: data.list.year.map(() => 100),
barWidth: 50, barWidth: 50,
}, },
{
z: 1,
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [21, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(23, 237, 255, 1)",
},
},
], ],
}; };
}; };

62
src/view/yl.vue
View File

@ -48,7 +48,10 @@
:year="data.leftTopYear" :year="data.leftTopYear"
></ePie2> ></ePie2>
</div> </div>
<div class="flex1" style="margin-top: 10px"> <div
class="flex1"
style="margin-top: 10px"
>
<div class="yd_title left_2"> <div class="yd_title left_2">
<div class="animate-border"> <div class="animate-border">
<i></i> <i></i>
@ -94,7 +97,10 @@
:year="data.leftCenterYear" :year="data.leftCenterYear"
/> />
</div> </div>
<div class="flex1" style="margin-top: 10px"> <div
class="flex1"
style="margin-top: 10px"
>
<div class="yd_title left_3"> <div class="yd_title left_3">
<div class="animate-border"> <div class="animate-border">
<i></i> <i></i>
@ -186,8 +192,19 @@
<div> <div>
<span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span> <span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span>
</div> </div>
<img src="@/assets/YLimg/ylimg11.png" alt="" /> <img
<img class="historyimg" src="@/assets/YLimg/ylimg5.png" alt="" /> src="@/assets/YLimg/ylimg11.png"
alt=""
/>
<img
class="historyimg"
src="@/assets/YLimg/ylimg5.png"
alt=""
/>
<img
src="@/assets/YLimg/yljg.gif"
class="historyMoveImg"
/>
</div> </div>
<!-- <div class="history1"> <!-- <div class="history1">
<div> <div>
@ -200,8 +217,19 @@
<div> <div>
<span>{{ data.yljgzlzx.zlzx }}<span class="unit">个</span></span> <span>{{ data.yljgzlzx.zlzx }}<span class="unit">个</span></span>
</div> </div>
<img src="@/assets/YLimg/ylimg12.png" alt="" /> <img
<img class="historyimg" src="@/assets/YLimg/ylimg10.png" alt="" /> src="@/assets/YLimg/ylimg12.png"
alt=""
/>
<img
class="historyimg"
src="@/assets/YLimg/ylimg10.png"
alt=""
/>
<img
src="@/assets/YLimg/yljg.gif"
class="historyMoveImg"
/>
</div> </div>
</div> </div>
</div> </div>
@ -219,9 +247,17 @@
<ylSMFW :list="data.smfwcs"></ylSMFW> <ylSMFW :list="data.smfwcs"></ylSMFW>
</div> </div>
<div class="medicalService"> <div class="medicalService">
<img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" /> <img
class="serviceimg"
src="@/assets/YLimg/ylimg9.png"
alt=""
/>
<div class="medicalServiceTop"> <div class="medicalServiceTop">
<img class="ylimg" src="@/assets/YLimg/ylimg1.png" alt="" /> <img
class="ylimg"
src="@/assets/YLimg/ylimg1.png"
alt=""
/>
<span>36,234</span> <span>36,234</span>
</div> </div>
</div> </div>
@ -880,6 +916,7 @@ const getData = async () => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative;
span { span {
font-family: PangMenZhengDao; font-family: PangMenZhengDao;
font-size: 26px; font-size: 26px;
@ -903,6 +940,13 @@ const getData = async () => {
width: 182px; width: 182px;
height: 35px; height: 35px;
} }
.historyMoveImg {
position: absolute;
left: 10px;
top: 37px;
width: 160px;
height: 120px;
}
} }
img { img {
@ -1045,7 +1089,7 @@ const getData = async () => {
margin-top: 10px; margin-top: 10px;
position: relative; position: relative;
.moveImg{ .moveImg {
position: absolute; position: absolute;
background-image: url(@/assets/ylMove.gif); background-image: url(@/assets/ylMove.gif);
background-repeat: no-repeat; background-repeat: no-repeat;