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

Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
lnn19986213 2024-06-04 14:35:03 +08:00
parent bf2f2c3bb7 1b115f9a43
commit 3d49cbf0ee
7 changed files with 454 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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)",
},
},
],
};
};

10
src/view/echarts_yl/pie3d.vue
View File

@ -560,11 +560,11 @@ const setChart = () => {
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
pieData[0].value = data.list.nl5160;
pieData[1].value = data.list.nl6170;
pieData[2].value = data.list.nl7180;
pieData[3].value = data.list.nl8190;
pieData[4].value = data.list.nl91100;
pieData[0].value = data.list.nl6170;
pieData[1].value = data.list.nl7180;
pieData[2].value = data.list.nl8190;
pieData[3].value = data.list.nl91100;
pieData[4].value = data.list.nl100;
getOption();
setChart();

515
src/view/echarts_yl/ylSMFW.vue
View File

@ -3,17 +3,43 @@
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import {
onBeforeMount,
onMounted,
ref,
reactive,
defineProps,
watch,
nextTick,
} from "vue";
// 局部引入echarts核心模块
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // 创建DOM引用
const data = [120, 200, 150, 80, 70];
const lineData = [150, 230, 224, 218, 135];
const max = data
.concat(lineData)
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
const data = reactive({
list: [],
list1: [],
list2: [],
day: [],
option: {},
initialLegendData: ["上门服务时长", "上门服务次数"],
});
// const data1 = [120, 200, 150, 80, 70];
// const lineData = [150, 230, 224, 218, 135];
// const max = data
// .concat(lineData)
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
// 背景颜色
const color = [
{
@ -38,255 +64,282 @@ const color = [
],
},
];
const option = {
color,
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {},
},
legend: {
data: ["上门服务时长", "上门服务次数"],
// top: "8%",
textStyle: {
fontSize: 16,
color: "#ffffff",
const getOption = () => {
data.option = {
color,
tooltip: {
trigger: "axis",
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
axisPointer: {},
},
},
grid: {
top: "18%",
left: "3%",
right: "6%",
bottom: "0%",
containLabel: true,
color: "#ffffff",
fontSize: 16,
},
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisTick: {
show: false, // 设置轴刻度不显示
},
data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
},
{
type: "category",
show: false,
data: ["4.07", "4.08", "4.09", "4.10", "4.11"],
},
],
yAxis: [
{
type: "value",
scale: true,
name: "时长/小时",
splitLine: {
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
fontSize: 16,
width: 1,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
{
type: "value",
scale: true,
name: "次数/次",
min: 0,
splitLine: {
//分割线配置
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
width: 1,
fontSize: 16,
},
},
axisLabel: {
//y轴文字的配置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
{
type: "value",
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgba(255, 255, 255, 0.3)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
legend: {
data: data.initialLegendData,
// top: "8%",
textStyle: {
fontSize: 16,
color: "#ffffff",
lineHeight: 19,
fontFamily: "MicrosoftYaHei",
},
},
],
series: [
{
z: 1,
yAxisIndex: 0,
name: "上门服务时长",
data: data,
barWidth: 20,
type: "bar",
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
},
},
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
grid: {
top: "18%",
left: "3%",
right: "6%",
bottom: "0%",
containLabel: true,
color: "#ffffff",
fontSize: 16,
},
{
yAxisIndex: 1,
name: "上门服务次数",
data: lineData,
type: "line", //线状图
label: {
show: true,
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value;
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisTick: {
show: false, // 设置轴刻度不显示
},
data: data.day,
},
{
type: "category",
show: false,
data: data.day,
},
],
yAxis: [
{
type: "value",
scale: true,
name: "时长/小时",
splitLine: {
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
fontSize: 16,
width: 1,
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
{
type: "value",
scale: true,
name: "次数/次",
min: 0,
splitLine: {
//分割线配置
show: false,
lineStyle: {
color: "rgba(255, 255, 255, 0.3)",
width: 1,
fontSize: 16,
},
},
axisLabel: {
//y轴文字的配置
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false,
lineStyle: {
color: "#ffffff",
fontSize: 16,
width: 1,
type: "solid",
},
},
},
},
{
xAxisIndex: 1,
yAxisIndex: 2,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
{
type: "value",
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgba(255, 255, 255, 0.3)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 16,
color: "#ffffff",
lineHeight: 19,
fontFamily: "MicrosoftYaHei",
},
},
data: data.map(() => 100),
barWidth: 40, //外阴影背景宽
emphasis: {
],
series: [
{
z: 1,
yAxisIndex: 0,
name: "上门服务时长",
data: data.list1,
barWidth: 20,
type: "bar",
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
x2: 1,
y: 0,
y2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "rgba(64, 247, 176, 0.25)",
},
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
},
},
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
},
type: "bar",
},
//顶部四边形
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [22, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)",
{
yAxisIndex: 1,
name: "上门服务次数",
data: data.list2,
type: "line", //线状图
label: {
show: true,
position: "top",
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
itemStyle: {
borderColor: "#00FCFF",
borderWidth: 1,
color: "#00FCFF",
},
},
},
],
{
xAxisIndex: 1,
yAxisIndex: 2,
itemStyle: {
color: "rgba(180, 180, 180, 0.2)", //外阴影背景
},
data: data.list1.map(() => 100),
barWidth: 40, //外阴影背景宽
emphasis: {
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 0,
y: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(64, 247, 176, 0.25)",
},
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
],
},
},
},
type: "bar",
},
//顶部四边形
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.list1,
symbol: "diamond",
symbolOffset: ["0%", "-50%"],
symbolSize: [22, 15],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)",
},
},
],
};
};
// // 使用生命钩子
// onMounted(() => {
// // 基于准备好的dom，初始化echarts实例
// // var myChart = echarts.init(document.getElementById('main'));
// // Vue3中： 需要引入
// var myChart = echarts.init(chart.value);
// // init(); // vue3.2没有this
// // 使用刚指定的配置项和数据显示图表。
// myChart.setOption(option);
// // 单图表响应式: 跟随浏览器大小改变
// // window.addEventListener("resize", () => {
// // myChart.resize();
// // });
// });
const setChart = () => {
var myChart = echarts.init(chart.value);
myChart.setOption(data.option);
};
const setChart1 = () => {
data.list1 = [];
data.list2 = [];
data.list.data.forEach((item) => {
data.list1.push(item.sc); //服务时长
data.list2.push(item.fwcs); //服务次数
});
};
// 使用生命钩子
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入
var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 单图表响应式: 跟随浏览器大小改变
// window.addEventListener("resize", () => {
// myChart.resize();
// });
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
data.day = props.list.day;
// console.log(data.list, "助老服务");
setChart1();
getOption();
setChart();
}, 600);
});
</script>

10
src/view/yl.vue
View File

@ -243,12 +243,8 @@
<div class="serviceBox">
<div class="serviceTop">
<div class="visit">
<img
class="serviceimg"
src="@/assets/YLimg/ylimg8.png"
alt=""
/>
<ylSMFW></ylSMFW>
<img class="serviceimg" src="@/assets/YLimg/ylimg8.png" alt="" />
<ylSMFW :list="data.smfwcs"></ylSMFW>
</div>
<div class="medicalService">
<img
@ -433,6 +429,7 @@ const data = reactive({
yljgzlzx: { yljg: "", zlzx: "" },
zccs1: [],
zccs2: [],
smfwcs: [],
});
onBeforeMount(async () => {
getData();
@ -495,6 +492,7 @@ const getData = async () => {
data.yljgzlzx.yljg = res.data.yljgzlzx.yljg;
data.yljgzlzx.zlzx = res.data.yljgzlzx.zlzx;
// 助老服务
data.smfwcs = res.data.zlfw.smfwcs;
// 乡镇助餐次数
res.data.zlfw.xzzccs.forEach((element) => {
data.zccs1.push(element.xzjd); // 地点