diff --git a/src/assets/images/sy/dxje.png b/src/assets/images/sy/dxje.png new file mode 100644 index 0000000..3fb3bbe Binary files /dev/null and b/src/assets/images/sy/dxje.png differ diff --git a/src/assets/images/sy/ljzcs.png b/src/assets/images/sy/ljzcs.png new file mode 100644 index 0000000..51ba78e Binary files /dev/null and b/src/assets/images/sy/ljzcs.png differ diff --git a/src/assets/images/sy/rzbms.png b/src/assets/images/sy/rzbms.png new file mode 100644 index 0000000..fd9a40b Binary files /dev/null and b/src/assets/images/sy/rzbms.png differ diff --git a/src/assets/images/sy/shqys.png b/src/assets/images/sy/shqys.png new file mode 100644 index 0000000..2707f75 Binary files /dev/null and b/src/assets/images/sy/shqys.png differ diff --git a/src/view/echarts_education/pie5.vue b/src/view/echarts_education/pie5.vue index 5413cce..4a5ab85 100644 --- a/src/view/echarts_education/pie5.vue +++ b/src/view/echarts_education/pie5.vue @@ -119,13 +119,14 @@ const getOption = () => { barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/, label: { show: true, - position: "inside", + position: "right", color: "#ffffff", formatter: function (data) { return data.value; }, }, itemStyle: { + show:true, color: { type: "linear", colorStops: [ @@ -145,7 +146,7 @@ const getOption = () => { barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/, label: { show: true, - position: "inside", + position: "right", color: "#ffffff", formatter: function (data) { return data.value; @@ -153,6 +154,7 @@ const getOption = () => { }, itemStyle: { color: { + show:true, type: "linear", colorStops: [ { offset: 0, color: "rgba(23, 255, 206, 0.2)" }, diff --git a/src/view/echarts_work/eP3.vue b/src/view/echarts_work/eP3.vue index 974c0a5..78e10e1 100644 --- a/src/view/echarts_work/eP3.vue +++ b/src/view/echarts_work/eP3.vue @@ -449,7 +449,7 @@ const setChart1 = () => { onBeforeMount(() => { setTimeout(() => { data.list = props.list; - data.month = props.list.month; + data.month = props.list.month.map((item) => item + "月"); // console.log(data.list, "生活"); setChart1(); getOption(); diff --git a/src/view/echarts_work/eP6.vue b/src/view/echarts_work/eP6.vue index c13a68d..5ca05f1 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.map((item) => item + "月"); + // 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/sy.vue b/src/view/sy.vue index ec61281..fe5c467 100644 --- a/src/view/sy.vue +++ b/src/view/sy.vue @@ -15,13 +15,16 @@
- 收入:{{ data.LivelihoodWelfare.zgylbxzsr }}万元 + 收入:{{ data.LivelihoodWelfare.zgylbxzsr }}万元
-
- 支出:{{ data.LivelihoodWelfare.zgylbxzzc }}万元 +
+ 支出:{{ data.LivelihoodWelfare.zgylbxzzc }}万元
@@ -29,13 +32,16 @@
工伤保险
- 收入:{{ data.LivelihoodWelfare.gsbxzsr }}万元 + 收入:{{ data.LivelihoodWelfare.gsbxzsr }}万元
-
- 支出:{{ data.LivelihoodWelfare.gsbxzzc }}万元 +
+ 支出:{{ data.LivelihoodWelfare.gsbxzzc }}万元
@@ -45,13 +51,16 @@
- 收入:{{ data.LivelihoodWelfare.cxylbxzsr }}万元 + 收入:{{ data.LivelihoodWelfare.cxylbxzsr }}万元
-
- 支出:{{ data.LivelihoodWelfare.cxylbxzzc }}万元 +
+ 支出:{{ data.LivelihoodWelfare.cxylbxzzc }}万元
@@ -61,13 +70,16 @@
- 收入:{{ data.LivelihoodWelfare.zgyilbxzsr }}万元 + 收入:{{ data.LivelihoodWelfare.zgyilbxzsr }}万元
-
- 支出:{{ data.LivelihoodWelfare.zgyilbxzzc }}万元 +
+ 支出:{{ data.LivelihoodWelfare.zgyilbxzzc }}万元
@@ -77,13 +89,16 @@
- 收入:{{ data.LivelihoodWelfare.cxyilbxzsr }}万元 + 收入:{{ data.LivelihoodWelfare.cxyilbxzsr }}万元
-
- 支出:{{ data.LivelihoodWelfare.cxyilbxzzc }}万元 +
+ 支出:{{ data.LivelihoodWelfare.cxyilbxzzc }}万元
@@ -100,10 +115,7 @@ -
+
@@ -128,41 +140,35 @@
- {{ jysyList[0].title }}学校师生比 + {{ jysyList[0].title }}学校师生比
- {{ jysyList[0].teacher }}:{{ jysyList[0].student }} + {{ jysyList[0].teacher }}:{{ jysyList[0].student }}
-
+
- {{ jysyList[1].title }}学校师生比 + {{ jysyList[1].title }}学校师生比
{{ jysyList[1].teacher }}:{{ jysyList[1].student }}
-
+
-
+
@@ -207,47 +213,24 @@ />
{{ data.PopulationData.man }}
- +
男性人口
- +
- +
{{ data.PopulationData.rkzs }}
人口总数
{{ data.PopulationData.woman }}
- +
女性人口
- +
- - + +
- + - +