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

This commit is contained in:
lnn19986213 2024-06-04 14:35:03 +08:00
commit 3d49cbf0ee
7 changed files with 454 additions and 338 deletions

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

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

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

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

View File

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

View File

@ -3,17 +3,43 @@
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from "vue"; import {
onBeforeMount,
onMounted,
ref,
reactive,
defineProps,
watch,
nextTick,
} from "vue";
// echarts // echarts
import * as echarts from "echarts"; import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // DOM const chart = ref(); // DOM
const data = [120, 200, 150, 80, 70]; const data = reactive({
const lineData = [150, 230, 224, 218, 135]; list: [],
const max = data list1: [],
.concat(lineData) list2: [],
.reduce((pre, cur) => (pre > cur ? pre : cur), 0); // 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 = [ const color = [
{ {
@ -38,255 +64,282 @@ const color = [
], ],
}, },
]; ];
const option = { const getOption = () => {
color, data.option = {
tooltip: { color,
trigger: "axis", tooltip: {
formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}", trigger: "axis",
axisPointer: {}, formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}",
}, axisPointer: {},
legend: {
data: ["上门服务时长", "上门服务次数"],
// top: "8%",
textStyle: {
fontSize: 16,
color: "#ffffff",
}, },
}, legend: {
grid: { data: data.initialLegendData,
top: "18%", // top: "8%",
left: "3%", textStyle: {
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,
fontSize: 16, fontSize: 16,
color: "#ffffff", color: "#ffffff",
lineHeight: 19,
fontFamily: "MicrosoftYaHei",
}, },
}, },
], grid: {
series: [ top: "18%",
{ left: "3%",
z: 1, right: "6%",
yAxisIndex: 0, bottom: "0%",
name: "上门服务时长", containLabel: true,
data: data, color: "#ffffff",
barWidth: 20, fontSize: 16,
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;
},
},
}, },
{ calculable: true,
yAxisIndex: 1,
name: "上门服务次数", xAxis: [
data: lineData, {
type: "line", //线 type: "category",
label: { axisLabel: {
show: true, //
position: "top", textStyle: {
color: "#ffffff", color: "#ffffff",
formatter: function (data) { fontSize: 16,
return data.value; },
},
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", type: "value",
borderWidth: 1, scale: true,
color: "#00FCFF", 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",
xAxisIndex: 1, max: 100,
yAxisIndex: 2, splitLine: {
itemStyle: { show: false,
color: "rgba(180, 180, 180, 0.2)", // 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, // series: [
emphasis: { {
z: 1,
yAxisIndex: 0,
name: "上门服务时长",
data: data.list1,
barWidth: 20,
type: "bar",
itemStyle: { itemStyle: {
color: { color: {
type: "linear", type: "linear",
x: 0, x: 0,
x2: 0, x2: 1,
y: 0, y: 0,
y2: 1, y2: 0,
colorStops: [ colorStops: [
{ { offset: 0, color: "rgba(142, 187, 255, .7)" },
offset: 0, { offset: 0.5, color: "rgba(142, 187, 255, .7)" },
color: "rgba(64, 247, 176, 0.25)", { offset: 0.5, color: "rgba(142, 187, 255, .3)" },
}, { offset: 1, color: "rgba(142, 187, 255, .5)" },
{
offset: 1,
color: "rgba(17, 34, 64, 0.25)",
},
], ],
}, },
}, },
label: {
show: true,
color: "#ffffff",
formatter: function (data) {
return data.value;
},
},
}, },
type: "bar", {
}, yAxisIndex: 1,
// name: "上门服务次数",
{ data: data.list2,
z: 1, type: "line", //线
name: "上部1", label: {
type: "pictorialBar", show: true,
symbolPosition: "end", position: "top",
data: data, color: "#ffffff",
symbol: "diamond", formatter: function (data) {
symbolOffset: ["0%", "-50%"], return data.value;
symbolSize: [22, 15], },
itemStyle: { },
borderColor: "#2fffa4", itemStyle: {
color: "rgba(142, 187, 255, 1)", 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(() => {
// // domecharts
// // var myChart = echarts.init(document.getElementById('main'));
// // Vue3
// var myChart = echarts.init(chart.value);
// // init(); // vue3.2this
// // 使
// 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(() => { onBeforeMount(() => {
// domecharts setTimeout(() => {
// var myChart = echarts.init(document.getElementById('main')); data.list = props.list;
// Vue3 data.day = props.list.day;
var myChart = echarts.init(chart.value); // console.log(data.list, "");
setChart1();
// init(); // vue3.2this getOption();
// 使 setChart();
myChart.setOption(option); }, 600);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
}); });
</script> </script>

View File

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