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 @@