From 0f528ea55ae7f07f8577a6eef2562c1b64847c59 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Thu, 6 Jun 2024 11:32:34 +0800 Subject: [PATCH] 1 --- src/view/echarts_work/eP6.vue | 603 +++++++++++++++++----------------- src/view/work.vue | 51 +-- 2 files changed, 337 insertions(+), 317 deletions(-) diff --git a/src/view/echarts_work/eP6.vue b/src/view/echarts_work/eP6.vue index c13a68d..58cde34 100644 --- a/src/view/echarts_work/eP6.vue +++ b/src/view/echarts_work/eP6.vue @@ -36,321 +36,334 @@ const data = reactive({ list: [], list1: [], list2: [], - year: [], + lineData: [], + lineData2: [], + month: [], option: {}, - initialLegendData: ["困难军人生活补贴人数", "困难军人生活补贴金额"], }); - // const data1 = [120, 200, 50, 80, 70]; // const data2 = [12, 20, 5, 8, 7]; // const lineData = [150, 230, 24, 218, 135]; // const lineData2 = [15, 23, 4, 18, 15]; -// const max = data -// .concat(lineData) -// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值 -// // 背景颜色 -// const color = [ -// { -// type: "linear", -// x: 0, -// x2: 0, -// y: 0, -// y2: 1, -// }, -// ]; +// 背景颜色 +const color = [ + { + type: "linear", + x: 0, + x2: 0, + y: 0, + y2: 1, + }, +]; -// const getOption = () => { -// data.option = { -// tooltip: { -// trigger: "axis", -// formatter: "{b0}
{a0}:{c0}
{a1}:{c1}
{a2}:{c2}
{a3}:{c3}", -// }, +const getOption = () => { + data.option = { + tooltip: { + trigger: "axis", + formatter: + "{b0}月
{a0}:{c0}
{a1}:{c1}
{a2}:{c2}
{a3}:{c3}", + }, -// legend: { -// data: [ -// "困难残疾人生活补贴人数", -// "护理补贴人数", -// "", -// "困难残疾人生活补贴金额", -// "护理补贴金额", -// ], -// top: "3%", -// textStyle: { -// fontSize: 14, -// color: "#ffffff", //上文字标题颜色 -// }, -// }, -// grid: { -// top: "25%", -// left: "6%", -// right: "9%", -// bottom: "5%", -// containLabel: true, -// color: "#ffffff", -// fontSize: 14, -// }, -// calculable: true, -// color, -// xAxis: [ -// { -// type: "category", + legend: { + data: [ + "困难残疾人生活补贴人数", + "护理补贴人数", + "", + "困难残疾人生活补贴金额", + "护理补贴金额", + ], + top: "3%", + textStyle: { + fontSize: 14, + color: "#ffffff", //上文字标题颜色 + }, + }, + grid: { + top: "25%", + left: "6%", + right: "9%", + bottom: "5%", + containLabel: true, + color: "#ffffff", + fontSize: 14, + }, + calculable: true, + color, + xAxis: [ + { + type: "category", -// axisLabel: { -// //坐标轴刻度标签的相关设置 -// textStyle: { -// color: "#ffffff", -// fontSize: 14, -// }, -// }, -// axisTick: { -// show: false, // 设置轴刻度不显示 -// }, -// data: ["2019", "2020", "2021", "2022", "2023"], -// }, -// { -// type: "category", -// show: false, -// data: ["2019", "2020", "2021", "2022", "2023"], -// }, -// ], -// yAxis: [ -// { -// type: "value", -// scale: true, -// name: "补贴人数", + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#ffffff", + fontSize: 14, + }, + }, + axisTick: { + show: false, // 设置轴刻度不显示 + }, + data: data.month, + }, + { + type: "category", + show: false, + data: data.month, + }, + ], + yAxis: [ + { + type: "value", + scale: true, + name: "补贴人数", -// splitLine: { -// //分割线配置 -// show: false, -// lineStyle: { -// color: "#ffffff", -// fontSize: 14, -// width: 1, -// }, -// }, -// axisLabel: { -// //y轴文字的配置 -// textStyle: { -// color: "#ffffff", -// fontSize: 14, -// }, -// }, -// axisLine: { -// //y轴线的颜色以及宽度 -// show: false, -// lineStyle: { -// color: "#ffffff", -// fontSize: 14, -// width: 1, -// type: "solid", -// }, -// }, -// }, -// { -// type: "value", -// scale: true, -// min: 0, + splitLine: { + //分割线配置 + show: false, + lineStyle: { + color: "#ffffff", + fontSize: 14, + width: 1, + }, + }, + axisLabel: { + //y轴文字的配置 + textStyle: { + color: "#ffffff", + fontSize: 14, + }, + }, + axisLine: { + //y轴线的颜色以及宽度 + show: false, + lineStyle: { + color: "#ffffff", + fontSize: 14, + width: 1, + type: "solid", + }, + }, + }, + { + type: "value", + scale: true, + min: 0, -// name: "救助金额/元", -// splitLine: { -// show: false, -// lineStyle: { -// color: "rgba(226, 226, 226, 0.3)", -// width: 1, -// }, -// }, -// axisLabel: { -// //y轴文字的配置 -// textStyle: { -// color: "#ffffff", -// fontSize: 14, -// }, -// }, -// axisLine: { -// //y轴线的颜色以及宽度 -// show: false, -// lineStyle: { -// color: "#ffffff", -// fontSize: 14, -// 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: 14, -// color: "#ffffff", -// lineHeight: 19, -// fontFamily: "MicrosoftYaHei", -// }, -// }, -// ], -// series: [ -// { -// yAxisIndex: 0, -// name: "困难残疾人生活补贴人数", -// data: data1, -// barWidth: 10, -// type: "bar", -// itemStyle: { -// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ -// { -// offset: 0, -// color: "rgba(142, 187, 255, 1)", -// }, -// { -// offset: 1, -// color: "rgba(142, 187, 255, 0.20)", -// }, -// ]), -// }, -// }, + name: "救助金额/元", + splitLine: { + show: false, + lineStyle: { + color: "rgba(226, 226, 226, 0.3)", + width: 1, + }, + }, + axisLabel: { + //y轴文字的配置 + textStyle: { + color: "#ffffff", + fontSize: 14, + }, + }, + axisLine: { + //y轴线的颜色以及宽度 + show: false, + lineStyle: { + color: "#ffffff", + fontSize: 14, + 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: 14, + color: "#ffffff", + lineHeight: 19, + fontFamily: "MicrosoftYaHei", + }, + }, + ], + series: [ + { + z: 1, + yAxisIndex: 0, + name: "困难残疾人生活补贴人数", + data: data.list1, + barWidth: 18, + barGap: "-50%", + 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)" }, + ], + }, + }, + }, -// { -// yAxisIndex: 0, -// name: "护理补贴人数", -// data: data2, -// barWidth: 10, -// type: "bar", -// 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)", -// }, -// ]), -// }, -// }, -// { -// yAxisIndex: 1, -// name: "困难残疾人生活补贴金额", -// data: lineData, -// type: "line", //线状图 -// itemStyle: { -// borderColor: "#00FCFF", -// borderWidth: 1, -// color: "#00FCFF", -// }, -// }, -// { -// yAxisIndex: 1, -// name: "护理补贴金额", -// data: lineData2, -// type: "line", //线状图 -// itemStyle: { -// borderColor: "#00FCFF", -// borderWidth: 1, -// color: "#2468FF", -// }, -// }, -// { -// yAxisIndex: 2, -// xAxisIndex: 1, -// itemStyle: { -// color: "rgba(180, 180, 180, 0.2)", //外阴影背景 -// }, -// data: data.map(() => 100), -// barWidth: 60, //外阴影背景宽 -// 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: 2, + yAxisIndex: 0, + name: "护理补贴人数", + data: data.list2, + barWidth: 18, + barGap: "-50%", + type: "bar", + itemStyle: { + 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)" }, + ], + }, + }, + }, + { + yAxisIndex: 1, + name: "困难残疾人生活补贴金额", + data: data.lineData, + type: "line", //线状图 + itemStyle: { + borderColor: "#00FCFF", + borderWidth: 1, + color: "#00FCFF", + }, + }, + { + yAxisIndex: 1, + name: "护理补贴金额", + data: data.lineData2, + type: "line", //线状图 + itemStyle: { + borderColor: "#00FCFF", + borderWidth: 1, + color: "#2468FF", + }, + }, + { + yAxisIndex: 2, + xAxisIndex: 1, + itemStyle: { + color: "rgba(180, 180, 180, 0.2)", //外阴影背景 + }, + data: data.month.map(() => 100), + barWidth: 60, //外阴影背景宽 + 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: ["-25%", "-50%"], + symbolSize: [18, 12], + itemStyle: { + borderColor: "#2fffa4", + color: "rgba(142, 187, 255, 1)", + }, + }, + { + z: 2, + name: "上部2", + type: "pictorialBar", + symbolPosition: "end", + data: data.list2, + symbol: "diamond", + symbolOffset: [4, "-50%"], + symbolSize: [18, 12], + itemStyle: { + borderColor: "#32ffee", + color: "rgba(23, 237, 255, 1)", + }, + }, + ], + }; +}; -// 使用生命钩子 -// onMounted(() => { -// // 基于准备好的dom，初始化echarts实例 -// // var myChart = echarts.init(document.getElementById('main')); -// // Vue3中： 需要引入 -// var myChart = echarts.init(chart.value); +const setChart = () => { + var myChart = echarts.init(chart.value); + myChart.setOption(data.option); +}; -// // 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.jzrs); //补贴人数 -// data.list2.push(item.jzje); //补贴金额 -// }); -// // console.log("补贴人2", data.list1, data.list2); -// }; -// watch( -// () => props.list, -// (newVal, oldVal) => { -// data.list = newVal; -// // console.log("补贴人1", data.list); -// setChart1(); -// getOption(); -// setChart(); -// } -// ); +const setChart1 = () => { + data.list1 = []; + data.list2 = []; + data.lineData = []; + data.lineData2 = []; + data.list.data.forEach((item) => { + data.list1.push(item.shbtrs); //困难残疾人生活补贴人数 + data.list2.push(item.hlbtrs); //护理补贴人数 + data.lineData.push(item.shbtje); //困难残疾人生活补贴金额 + data.lineData2.push(item.hlbtje); //护理补贴金额 + }); + data.month = data.list.month; + // console.log("补贴人2", data.list1, data.list2); +}; // 使用生命钩子 onBeforeMount(() => { setTimeout(() => { data.list = props.list; - // setChart1(); - console.log(data.list, "残疾人补助信息"); - // getOption(); - // setChart(); + setChart1(); + getOption(); + setChart(); }, 600); }); diff --git a/src/view/work.vue b/src/view/work.vue index 5233161..e204ec8 100644 --- a/src/view/work.vue +++ b/src/view/work.vue @@ -131,9 +131,8 @@ 困难职工 - - + +
@@ -212,8 +211,8 @@ const jzChange = (index, value) => { data.list = value === "1" ? data.housing : data.temporary; } else if (index === 2) { const listMap = { - 1: data.needyWorkers1, - 2: data.difficultSoldiers, + 1: data.disabilitySubsidies, + 2: data.needyWorkers1, 3: data.needyWorkers, }; data.list1 = listMap[value]; @@ -276,25 +275,27 @@ const data = reactive({ salvation: { data: [ { - tkjzje:"868.4888", //特困救助金额 - tkjzrs: "9430", //特困救助人数 - dbjzrs: "9430", //低保救助人数 + tkjzje: "868.4888", //特困救助金额 + tkjzrs: "9430", //特困救助人数 + dbjzrs: "9430", //低保救助人数 dbjzje: "868.4888", //低保救助金额 dibianJzrs: "2310", //低边救助人数 }, ], month: ["1"], }, //生活类救助模块 - difficultSoldiers: { + //困难残疾人补助信息 + disabilitySubsidies: { data: [ - { - nf: "2019", //补贴年份 - jzrs: "62", //补贴人数 - jzje: "6.24", //补贴金额 万元 - }, + // { + // nf: "2019", //补贴年份 + // jzrs: "62", //补贴人数 + // jzje: "6.24", //补贴金额 万元 + // }, ], - year: ["2019"], - }, //困难军人 + month: ["1"], + }, + //困难军人 needyWorkers1: { data: [ { @@ -304,7 +305,8 @@ const data = reactive({ }, ], year: ["2019"], - }, //困难残疾人补助信息 + }, + //困难职工补助信息 needyWorkers: { data: [ { @@ -314,7 +316,7 @@ const data = reactive({ }, ], year: ["2019"], - }, //困难职工补助信息 + }, diversification: { hszhxms: [ { @@ -372,15 +374,20 @@ const getData = async () => { data.salvation = res.data.lifeAssistance.jz; // 弱势群体补贴 // 困难残疾人&困难军人&困难职工 + //困难残疾人 + data.disabilitySubsidies.data = + res.data.underprivileged.disabilitySubsidies.data; + data.disabilitySubsidies.month = + res.data.underprivileged.disabilitySubsidies.month; // 困难军人 - data.difficultSoldiers.data = - res.data.underprivileged.difficultSoldiers.data; - data.difficultSoldiers.year = + data.needyWorkers1.data = res.data.underprivileged.difficultSoldiers.data; + data.needyWorkers1.year = res.data.underprivileged.difficultSoldiers.year; // 困难职工 data.needyWorkers.data = res.data.underprivileged.needyWorkers.data; data.needyWorkers.year = res.data.underprivileged.needyWorkers.year; - data.list1 = data.needyWorkers1; + //初试默认残疾人 + data.list1 = data.disabilitySubsidies; // 多元化力量参与 data.diversification.hszhxms = res.data.diversification.hszhxms;