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

1

This commit is contained in:
姚宇浩 2024-06-06 11:32:34 +08:00
parent 1332010aac
commit 0f528ea55a
2 changed files with 337 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

603
src/view/echarts_work/eP6.vue
View File

@ -36,321 +36,334 @@ const data = reactive({
list: [], list: [],
list1: [], list1: [],
list2: [], list2: [],
year: [], lineData: [],
lineData2: [],
month: [],
option: {}, option: {},
initialLegendData: ["困难军人生活补贴人数", "困难军人生活补贴金额"],
}); });
// const data1 = [120, 200, 50, 80, 70]; // const data1 = [120, 200, 50, 80, 70];
// const data2 = [12, 20, 5, 8, 7]; // const data2 = [12, 20, 5, 8, 7];
// const lineData = [150, 230, 24, 218, 135]; // const lineData = [150, 230, 24, 218, 135];
// const lineData2 = [15, 23, 4, 18, 15]; // const lineData2 = [15, 23, 4, 18, 15];
// const max = data // 背景颜色
// .concat(lineData) const color = [
// .reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值 {
// // 背景颜色 type: "linear",
// const color = [ x: 0,
// { x2: 0,
// type: "linear", y: 0,
// x: 0, y2: 1,
// x2: 0, },
// y: 0, ];
// y2: 1,
// },
// ];
// const getOption = () => { const getOption = () => {
// data.option = { data.option = {
// tooltip: { tooltip: {
// trigger: "axis", trigger: "axis",
// formatter: "{b0}<br/> {a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}<br/>{a3}:{c3}", formatter:
// }, "{b0}月<br/> {a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}<br/>{a3}:{c3}",
},
// legend: { legend: {
// data: [ data: [
// "困难残疾人生活补贴人数", "困难残疾人生活补贴人数",
// "护理补贴人数", "护理补贴人数",
// "", "",
// "困难残疾人生活补贴金额", "困难残疾人生活补贴金额",
// "护理补贴金额", "护理补贴金额",
// ], ],
// top: "3%", top: "3%",
// textStyle: { textStyle: {
// fontSize: 14, fontSize: 14,
// color: "#ffffff", //上文字标题颜色 color: "#ffffff", //上文字标题颜色
// }, },
// }, },
// grid: { grid: {
// top: "25%", top: "25%",
// left: "6%", left: "6%",
// right: "9%", right: "9%",
// bottom: "5%", bottom: "5%",
// containLabel: true, containLabel: true,
// color: "#ffffff", color: "#ffffff",
// fontSize: 14, fontSize: 14,
// }, },
// calculable: true, calculable: true,
// color, color,
// xAxis: [ xAxis: [
// { {
// type: "category", type: "category",
// axisLabel: { axisLabel: {
// //坐标轴刻度标签的相关设置 //坐标轴刻度标签的相关设置
// textStyle: { textStyle: {
// color: "#ffffff", color: "#ffffff",
// fontSize: 14, fontSize: 14,
// }, },
// }, },
// axisTick: { axisTick: {
// show: false, // 设置轴刻度不显示 show: false, // 设置轴刻度不显示
// }, },
// data: ["2019", "2020", "2021", "2022", "2023"], data: data.month,
// }, },
// { {
// type: "category", type: "category",
// show: false, show: false,
// data: ["2019", "2020", "2021", "2022", "2023"], data: data.month,
// }, },
// ], ],
// yAxis: [ yAxis: [
// { {
// type: "value", type: "value",
// scale: true, scale: true,
// name: "补贴人数", name: "补贴人数",
// splitLine: { splitLine: {
// //分割线配置 //分割线配置
// show: false, show: false,
// lineStyle: { lineStyle: {
// color: "#ffffff", color: "#ffffff",
// fontSize: 14, fontSize: 14,
// width: 1, width: 1,
// }, },
// }, },
// axisLabel: { axisLabel: {
// //y轴文字的配置 //y轴文字的配置
// textStyle: { textStyle: {
// color: "#ffffff", color: "#ffffff",
// fontSize: 14, fontSize: 14,
// }, },
// }, },
// axisLine: { axisLine: {
// //y轴线的颜色以及宽度 //y轴线的颜色以及宽度
// show: false, show: false,
// lineStyle: { lineStyle: {
// color: "#ffffff", color: "#ffffff",
// fontSize: 14, fontSize: 14,
// width: 1, width: 1,
// type: "solid", type: "solid",
// }, },
// }, },
// }, },
// { {
// type: "value", type: "value",
// scale: true, scale: true,
// min: 0, min: 0,
// name: "救助金额/元", name: "救助金额/元",
// splitLine: { splitLine: {
// show: false, show: false,
// lineStyle: { lineStyle: {
// color: "rgba(226, 226, 226, 0.3)", color: "rgba(226, 226, 226, 0.3)",
// width: 1, width: 1,
// }, },
// }, },
// axisLabel: { axisLabel: {
// //y轴文字的配置 //y轴文字的配置
// textStyle: { textStyle: {
// color: "#ffffff", color: "#ffffff",
// fontSize: 14, fontSize: 14,
// }, },
// }, },
// axisLine: { axisLine: {
// //y轴线的颜色以及宽度 //y轴线的颜色以及宽度
// show: false, show: false,
// lineStyle: { lineStyle: {
// color: "#ffffff", color: "#ffffff",
// fontSize: 14, fontSize: 14,
// width: 1, width: 1,
// type: "solid", type: "solid",
// }, },
// }, },
// }, },
// { {
// type: "value", type: "value",
// min: 0, min: 0,
// max: 100, max: 100,
// splitLine: { splitLine: {
// show: false, show: false,
// lineStyle: { lineStyle: {
// type: "solid", type: "solid",
// color: "rgb(221, 242, 255,0.1)", color: "rgb(221, 242, 255,0.1)",
// }, },
// }, },
// axisLine: { axisLine: {
// show: false, show: false,
// lineStyle: { lineStyle: {
// type: "dotted", type: "dotted",
// }, },
// }, },
// axisLabel: { axisLabel: {
// show: false, show: false,
// fontSize: 14, fontSize: 14,
// color: "#ffffff", color: "#ffffff",
// lineHeight: 19, lineHeight: 19,
// fontFamily: "MicrosoftYaHei", fontFamily: "MicrosoftYaHei",
// }, },
// }, },
// ], ],
// series: [ series: [
// { {
// yAxisIndex: 0, z: 1,
// name: "困难残疾人生活补贴人数", yAxisIndex: 0,
// data: data1, name: "困难残疾人生活补贴人数",
// barWidth: 10, data: data.list1,
// type: "bar", barWidth: 18,
// itemStyle: { barGap: "-50%",
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ type: "bar",
// { itemStyle: {
// offset: 0, color: {
// color: "rgba(142, 187, 255, 1)", type: "linear",
// }, x: 0,
// { x2: 1,
// offset: 1, y: 0,
// color: "rgba(142, 187, 255, 0.20)", 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, z: 2,
// name: "护理补贴人数", yAxisIndex: 0,
// data: data2, name: "护理补贴人数",
// barWidth: 10, data: data.list2,
// type: "bar", barWidth: 18,
// itemStyle: { barGap: "-50%",
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ type: "bar",
// { itemStyle: {
// offset: 0, color: {
// color: "rgba(23, 237, 255, 1)", type: "linear",
// }, x: 0,
// { x2: 1,
// offset: 1, y: 0,
// color: "rgba(23, 237, 255, 0.20)", 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: lineData, },
// type: "line", //线状图 },
// itemStyle: { {
// borderColor: "#00FCFF", yAxisIndex: 1,
// borderWidth: 1, name: "困难残疾人生活补贴金额",
// color: "#00FCFF", data: data.lineData,
// }, type: "line", //线状图
// }, itemStyle: {
// { borderColor: "#00FCFF",
// yAxisIndex: 1, borderWidth: 1,
// name: "护理补贴金额", color: "#00FCFF",
// data: lineData2, },
// type: "line", //线状图 },
// itemStyle: { {
// borderColor: "#00FCFF", yAxisIndex: 1,
// borderWidth: 1, name: "护理补贴金额",
// color: "#2468FF", data: data.lineData2,
// }, type: "line", //线状图
// }, itemStyle: {
// { borderColor: "#00FCFF",
// yAxisIndex: 2, borderWidth: 1,
// xAxisIndex: 1, color: "#2468FF",
// itemStyle: { },
// color: "rgba(180, 180, 180, 0.2)", //外阴影背景 },
// }, {
// data: data.map(() => 100), yAxisIndex: 2,
// barWidth: 60, //外阴影背景宽 xAxisIndex: 1,
// emphasis: { itemStyle: {
// itemStyle: { color: "rgba(180, 180, 180, 0.2)", //外阴影背景
// color: { },
// type: "linear", data: data.month.map(() => 100),
// x: 0, barWidth: 60, //外阴影背景宽
// x2: 0, emphasis: {
// y: 0, itemStyle: {
// y2: 1, color: {
// colorStops: [ type: "linear",
// { x: 0,
// offset: 0, x2: 0,
// color: "rgba(64, 247, 176, 0.25)", y: 0,
// }, y2: 1,
// { colorStops: [
// offset: 1, {
// color: "rgba(17, 34, 64, 0.25)", offset: 0,
// }, color: "rgba(64, 247, 176, 0.25)",
// ], },
// }, {
// }, offset: 1,
// }, color: "rgba(17, 34, 64, 0.25)",
// type: "bar", },
// }, ],
// ], },
// }; },
// } },
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)",
},
},
],
};
};
// 使用生命钩子 const setChart = () => {
// onMounted(() => { var myChart = echarts.init(chart.value);
// // 基于准备好的dom，初始化echarts实例 myChart.setOption(data.option);
// // var myChart = echarts.init(document.getElementById('main')); };
// // Vue3中： 需要引入
// var myChart = echarts.init(chart.value);
// // init(); // vue3.2没有this const setChart1 = () => {
// // 使用刚指定的配置项和数据显示图表。 data.list1 = [];
// myChart.setOption(option); data.list2 = [];
data.lineData = [];
// // 单图表响应式: 跟随浏览器大小改变 data.lineData2 = [];
// // window.addEventListener("resize", () => { data.list.data.forEach((item) => {
// // myChart.resize(); data.list1.push(item.shbtrs); //困难残疾人生活补贴人数
// // }); data.list2.push(item.hlbtrs); //护理补贴人数
// }); data.lineData.push(item.shbtje); //困难残疾人生活补贴金额
data.lineData2.push(item.hlbtje); //护理补贴金额
// const setChart = () => { });
// var myChart = echarts.init(chart.value); data.month = data.list.month;
// myChart.setOption(data.option); // console.log("补贴人2", data.list1, data.list2);
// }; };
// 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();
// }
// );
// 使用生命钩子 // 使用生命钩子
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { setTimeout(() => {
data.list = props.list; data.list = props.list;
// setChart1(); setChart1();
console.log(data.list, "残疾人补助信息"); getOption();
// getOption(); setChart();
// setChart();
}, 600); }, 600);
}); });
</script> </script>

51
src/view/work.vue
View File

@ -131,9 +131,8 @@
困难职工 困难职工
</div> </div>
</div> </div>
<eP4 :list="data.list1"></eP4> <eP6 v-if="jz[2].choose == '1'" :list="data.list1"></eP6>
<!-- <eP6 v-if="jz[2].choose == '1'" :list="data.difficultSoldiers"></eP6> <eP4 v-else :list="data.list1"></eP4>
<eP5 v-if="jz[2].choose == '2'" :list="data.difficultSoldiers"></eP5> -->
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title right_2"> <div class="yd_title right_2">
@ -212,8 +211,8 @@ const jzChange = (index, value) => {
data.list = value === "1" ? data.housing : data.temporary; data.list = value === "1" ? data.housing : data.temporary;
} else if (index === 2) { } else if (index === 2) {
const listMap = { const listMap = {
1: data.needyWorkers1, 1: data.disabilitySubsidies,
2: data.difficultSoldiers, 2: data.needyWorkers1,
3: data.needyWorkers, 3: data.needyWorkers,
}; };
data.list1 = listMap[value]; data.list1 = listMap[value];
@ -276,25 +275,27 @@ const data = reactive({
salvation: { salvation: {
data: [ data: [
{ {
tkjzje:"868.4888", //特困救助金额 tkjzje: "868.4888", //特困救助金额
tkjzrs: "9430", //特困救助人数 tkjzrs: "9430", //特困救助人数
dbjzrs: "9430", //低保救助人数 dbjzrs: "9430", //低保救助人数
dbjzje: "868.4888", //低保救助金额 dbjzje: "868.4888", //低保救助金额
dibianJzrs: "2310", //低边救助人数 dibianJzrs: "2310", //低边救助人数
}, },
], ],
month: ["1"], month: ["1"],
}, //生活类救助模块 }, //生活类救助模块
difficultSoldiers: { //困难残疾人补助信息
disabilitySubsidies: {
data: [ data: [
{ // {
nf: "2019", //补贴年份 // nf: "2019", //补贴年份
jzrs: "62", //补贴人数 // jzrs: "62", //补贴人数
jzje: "6.24", //补贴金额 万元 // jzje: "6.24", //补贴金额 万元
}, // },
], ],
year: ["2019"], month: ["1"],
}, //困难军人 },
//困难军人
needyWorkers1: { needyWorkers1: {
data: [ data: [
{ {
@ -304,7 +305,8 @@ const data = reactive({
}, },
], ],
year: ["2019"], year: ["2019"],
}, //困难残疾人补助信息 },
//困难职工补助信息
needyWorkers: { needyWorkers: {
data: [ data: [
{ {
@ -314,7 +316,7 @@ const data = reactive({
}, },
], ],
year: ["2019"], year: ["2019"],
}, //困难职工补助信息 },
diversification: { diversification: {
hszhxms: [ hszhxms: [
{ {
@ -372,15 +374,20 @@ const getData = async () => {
data.salvation = res.data.lifeAssistance.jz; 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 = data.needyWorkers1.data = res.data.underprivileged.difficultSoldiers.data;
res.data.underprivileged.difficultSoldiers.data; data.needyWorkers1.year =
data.difficultSoldiers.year =
res.data.underprivileged.difficultSoldiers.year; res.data.underprivileged.difficultSoldiers.year;
// 困难职工 // 困难职工
data.needyWorkers.data = res.data.underprivileged.needyWorkers.data; data.needyWorkers.data = res.data.underprivileged.needyWorkers.data;
data.needyWorkers.year = res.data.underprivileged.needyWorkers.year; data.needyWorkers.year = res.data.underprivileged.needyWorkers.year;
data.list1 = data.needyWorkers1; //初试默认残疾人
data.list1 = data.disabilitySubsidies;
// 多元化力量参与 // 多元化力量参与
data.diversification.hszhxms = res.data.diversification.hszhxms; data.diversification.hszhxms = res.data.diversification.hszhxms;