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>
<div ref="chart" style="width: 100%;height: 250px"></div>
<div ref="chart" style="width: 100%; height: 250px"></div>
</template>
<script setup>
@ -9,12 +9,7 @@ import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
const data = [20, 20, 50, 80, 70, 10, 30];
// const lineData = [150, 230, 224, 218, 135, 147, 260];
// const max = data
// .concat(lineData)
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
// // 背景颜色
const data = [200, 120, 150, 110, 70];
const color = [
{
type: "linear",
@ -80,14 +75,14 @@ const option = {
},
},
axisTick: {
show: false, // 设置轴刻度不显示
},
data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",],
show: false, // 设置轴刻度不显示
},
data: ["东华街道", "龙洲街道", "湖镇镇", "詹家镇", "小南海镇"],
},
{
type: "category",
show: false,
data: ["东华街道", "龙洲街道","湖镇镇","詹家镇","小南海镇",],
data: ["东华街道", "龙洲街道", "湖镇镇", "詹家镇", "小南海镇"],
},
],
yAxis: [
@ -122,74 +117,95 @@ const option = {
},
},
},
// {
// type: "value",
// scale: true,
// // name: "次数/次",
// min: 0,
// max: max,
// splitLine: {//分割线配置
// show: false,
// lineStyle: {
// color: "#ffffff",
// width: 1,
// },
// },
// axisLabel: {//y轴文字的配置
// textStyle: {
// color: "#ffffff",
// },
// },
// axisLine: {
// //y轴线的颜色以及宽度
// show: false,
// lineStyle: {
// color: "#ffffff",
// width: 1,
// type: "solid",
// },
// },
// },
{
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: 16,
fontFamily: "MicrosoftYaHei",
color: "#ffffff",
fontSize: 16,
lineHeight: 19,
},
},
],
series: [
{
z: 1,
// name: "上门服务时长",
data: data,
barWidth: 20,
type: "bar",
label:{
show:true,
position:'top',
color:'#ffffff',
formatter:function(data){
return data.value
}
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
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,
yAxisIndex: 1,
showBackground: true,
itemStyle: {
normal: {
color: "rgba(180, 180, 180, 0)", //外阴影背景
}
color: "rgba(180, 180, 180, 0)", //外阴影背景
},
},
// data: data.map(() => max),
data: data.map(() => Math.max(...data) * 1.02),
data: data.map(() => 100),
barWidth: 40, //外阴影背景宽
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,
name: "救助人数",
data: data.list1,
@ -227,16 +228,19 @@ const getOption = () => {
},
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 0.20)",
},
]),
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ 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),
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,
});
// 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 = () => {
data.option = {
tooltip: {
@ -213,6 +207,7 @@ const getOption = () => {
},
},
{
z: 1,
yAxisIndex: 0,
name: "救助人数",
data: data.list1,
@ -227,16 +222,19 @@ const getOption = () => {
},
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ 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,
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,
name: "生活补贴人数",
data: data.list1,
@ -223,16 +224,19 @@ const getOption = () => {
},
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
]),
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ 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),
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"
></ePie2>
</div>
<div class="flex1" style="margin-top: 10px">
<div
class="flex1"
style="margin-top: 10px"
>
<div class="yd_title left_2">
<div class="animate-border">
<i></i>
@ -94,7 +97,10 @@
:year="data.leftCenterYear"
/>
</div>
<div class="flex1" style="margin-top: 10px">
<div
class="flex1"
style="margin-top: 10px"
>
<div class="yd_title left_3">
<div class="animate-border">
<i></i>
@ -186,8 +192,19 @@
<div>
<span>{{ data.yljgzlzx.yljg }}<span class="unit">个</span></span>
</div>
<img src="@/assets/YLimg/ylimg11.png" alt="" />
<img class="historyimg" src="@/assets/YLimg/ylimg5.png" alt="" />
<img
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 class="history1">
<div>
@ -200,8 +217,19 @@
<div>
<span>{{ data.yljgzlzx.zlzx }}<span class="unit">个</span></span>
</div>
<img src="@/assets/YLimg/ylimg12.png" alt="" />
<img class="historyimg" src="@/assets/YLimg/ylimg10.png" alt="" />
<img
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>
@ -219,9 +247,17 @@
<ylSMFW :list="data.smfwcs"></ylSMFW>
</div>
<div class="medicalService">
<img class="serviceimg" src="@/assets/YLimg/ylimg9.png" alt="" />
<img
class="serviceimg"
src="@/assets/YLimg/ylimg9.png"
alt=""
/>
<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>
</div>
</div>
@ -880,6 +916,7 @@ const getData = async () => {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
span {
font-family: PangMenZhengDao;
font-size: 26px;
@ -903,6 +940,13 @@ const getData = async () => {
width: 182px;
height: 35px;
}
.historyMoveImg {
position: absolute;
left: 10px;
top: 37px;
width: 160px;
height: 120px;
}
}
img {
@ -1045,7 +1089,7 @@ const getData = async () => {
margin-top: 10px;
position: relative;
.moveImg{
.moveImg {
position: absolute;
background-image: url(@/assets/ylMove.gif);
background-repeat: no-repeat;