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

gx

This commit is contained in:
duanxiaohai 2024-05-14 10:00:40 +08:00
parent 716144f4e8
commit ef8b9f73cd
5 changed files with 503 additions and 373 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/view/echarts_education/eP1.vue
View File

@ -3,10 +3,33 @@
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from "vue"; import {
onMounted,
onBeforeMount,
ref,
reactive,
defineProps,
nextTick,
} from "vue";
// 局部引入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 = reactive({
list: [],
list1: [],
option: {},
});
// const data = [150, 230, 224, 218, 135, 147]; // const data = [150, 230, 224, 218, 135, 147];
const data1 = ["中职", "高中", "初中", "小学", "幼儿园", "特殊教育"]; const data1 = ["中职", "高中", "初中", "小学", "幼儿园", "特殊教育"];
const data2 = [ const data2 = [
@ -18,10 +41,21 @@ const data2 = [
"10000人", "10000人",
]; ];
const newData2 = data2.map((item) => parseInt(item.replace("人", ""))); const setChart = () => {
const newMaxNumber = Math.max(...newData2) * 1.05; // Vue3中： 需要引入
var myChart = echarts.init(chart.value);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(data.option);
};
const setChart1 = () => {
data.list1 = data.list.map((item) => `${item}人`);
// const newData2 = data.list.map((item) => parseInt(item.replace("人", "")));
// data.list1 = Math.max(...newData2) * 1.05;
// const newMaxNumber = Math.max(...newData2) * 1.05;
};
const option = { const getOption = () => {
data.option = {
grid: { grid: {
top: "6%", top: "6%",
left: "9%", left: "9%",
@ -38,7 +72,7 @@ const option = {
{ {
type: "value", type: "value",
scale: false, scale: false,
max: newMaxNumber, max: data.list,
axisLabel: { axisLabel: {
//坐标轴分割线 //坐标轴分割线
show: false, show: false,
@ -108,13 +142,13 @@ const option = {
axisTick: { axisTick: {
show: false, // 设置轴刻度不显示 show: false, // 设置轴刻度不显示
}, },
data: data2, data: data.list1,
}, },
], ],
series: [ series: [
{ {
type: "bar", type: "bar",
data: newData2.map(() => Math.max(...newData2) * 1.05), // 外阴影铺满整个柱状图 data: data.list.map(() => Math.max(...data.list) * 1.05), // 外阴影铺满整个柱状图
// barGap: 0 /*多个并排柱子设置柱子之间的间距*/, // barGap: 0 /*多个并排柱子设置柱子之间的间距*/,
yAxisIndex: 1, yAxisIndex: 1,
barWidth: 30, //外阴影背景宽 barWidth: 30, //外阴影背景宽
@ -125,7 +159,7 @@ const option = {
}, },
{ {
type: "bar", type: "bar",
data: newData2.map(() => Math.max(...newData2) * 1.02), // 外阴影铺满整个柱状图 data: data.list.map(() => Math.max(...data.list) * 1.02), // 外阴影铺满整个柱状图
barWidth: 8, //外阴影背景宽 barWidth: 8, //外阴影背景宽
silent: true, // 不响应事件 silent: true, // 不响应事件
itemStyle: { itemStyle: {
@ -143,7 +177,7 @@ const option = {
}, },
{ {
type: "bar", type: "bar",
data: newData2, data: data.list,
barWidth: 7, //柱宽 barWidth: 7, //柱宽
barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/, barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/,
itemStyle: { itemStyle: {
@ -184,10 +218,16 @@ const option = {
}, },
], ],
}; };
};
onMounted(() => { // 使用生命钩子
var myChart = echarts.init(chart.value); onBeforeMount(() => {
myChart.setOption(option); setTimeout(() => {
data.list = props.list;
setChart1();
getOption();
setChart();
}, 600);
}); });
</script> </script>

7
src/view/echarts_education/edXX.vue
View File

@ -269,7 +269,7 @@ watch(
data.list = newVal; data.list = newVal;
getOption(); getOption();
setChart(); setChart();
// console.log("学校", newVal, oldVal); console.log("学校", newVal, oldVal);
} }
); );
watch( watch(
@ -282,12 +282,13 @@ watch(
); );
// 使用生命钩子 // 使用生命钩子
onMounted(() => { onBeforeMount(() => {
setTimeout(() => {
data.list = props.list; data.list = props.list;
data.namea = props.active; data.namea = props.active;
getOption(); getOption();
setChart(); setChart();
}, 600);
// var myChart = echarts.init(chart.value); // var myChart = echarts.init(chart.value);
// myChart.setOption(option); // myChart.setOption(option);

95
src/view/echarts_education/pie.vue
View File

@ -1,21 +1,32 @@
<template> <template>
<div <div ref="chart" style="width: 50%; height: 280px"></div>
ref="chart"
style="width: 50%;height: 280px"
></div>
</template> </template>
<script setup> <script setup>
import { onMounted, reactive, ref } from "vue"; import { onBeforeMount, onMounted, reactive, ref } 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引用
let option = { const data = reactive({
list: [[], []],
option: {},
});
const getOption = () => {
data.option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1}<br />{a2}:{c2} ", formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
}, },
legend: { legend: {
top: "8%", top: "8%",
@ -100,28 +111,28 @@ let option = {
}, },
], ],
series: [ series: [
{ // {
name: "城市", // name: "城市",
type: "bar", // type: "bar",
data: [2.0, 4.9, 7.0], // data: [2.0, 4.9, 7.0],
barWidth: "18%", // barWidth: "18%",
itemStyle: { // itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ // {
offset: 0, // offset: 0,
color: "rgba(142, 187, 255, 1)", // color: "rgba(142, 187, 255, 1)",
}, // },
{ // {
offset: 1, // offset: 1,
color: "rgba(142, 187, 255, 0.20)", // color: "rgba(142, 187, 255, 0.20)",
}, // },
]), // ]),
}, // },
}, // },
{ {
name: "县镇", name: "县镇",
type: "bar", type: "bar",
data: [2.6, 5.9, 9.0], data: data.list[1],
barWidth: "18%", barWidth: "18%",
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -139,7 +150,7 @@ let option = {
{ {
name: "农村", name: "农村",
type: "bar", type: "bar",
data: [2.6, 5.9, 9.0], data: data.list[0],
barWidth: "18%", barWidth: "18%",
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -166,22 +177,26 @@ let option = {
}, },
], ],
}; };
};
// 使用生命钩子 const setChart = () => {
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入 // Vue3中： 需要引入
var myChart = echarts.init(chart.value); var myChart = echarts.init(chart.value);
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.setOption(data.option);
};
// 单图表响应式: 跟随浏览器大小改变 // 使用生命钩子
// window.addEventListener("resize", () => { onBeforeMount(() => {
// myChart.resize(); setTimeout(() => {
// }); data.list = props.list;
// data.list[0].push(data.list.ncxx.nccz);
// data.list[0].push(data.list.ncxx.ncgz);
// data.list[0].push(data.list.ncxx.ncxx);
// data.list[1].push(data.list.xzxx.xzcz);
// data.list[1].push(data.list.xzxx.xzgz);
// data.list[1].push(data.list.xzxx.xzxx);
getOption();
setChart();
}, 600);
}); });
</script> </script>

175
src/view/education.vue
View File

@ -3,7 +3,7 @@
<div class="displayFlex left_bg"> <div class="displayFlex left_bg">
<div class="flex1"> <div class="flex1">
<div class="yd_title left_1"></div> <div class="yd_title left_1"></div>
<eP1></eP1> <eP1 :list="data.xsql"></eP1>
<div class="t_1"></div> <div class="t_1"></div>
<div class="t_2"> <div class="t_2">
<div class="t_2_1" v-for="(item, index) in data.zdgz" :key="index"> <div class="t_2_1" v-for="(item, index) in data.zdgz" :key="index">
@ -19,15 +19,33 @@
<div class="yd_title left_2"></div> <div class="yd_title left_2"></div>
<div class="selectLint"> <div class="selectLint">
<div class="selectBox"> <div class="selectBox">
<el-select v-model="selectData.value1" placeholder="请选择" size="large" @change="selectChange1"> <el-select
<el-option v-for="item in selectData.options1" :key="item.value" :label="item.label" v-model="selectData.value1"
:value="item.value" /> placeholder="请选择"
size="large"
@change="selectChange1"
>
<el-option
v-for="item in selectData.options1"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</div> </div>
<div class="selectBox"> <div class="selectBox">
<el-select v-model="selectData.value2" placeholder="请选择" size="large" @change="selectChange1"> <el-select
<el-option v-for="item in selectData.options2" :key="item.value" :label="item.label" v-model="selectData.value2"
:value="item.value" /> placeholder="请选择"
size="large"
@change="selectChange1"
>
<el-option
v-for="item in selectData.options2"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select> </el-select>
</div> </div>
</div> </div>
@ -44,38 +62,47 @@
<span class="schoola1">学校总数</span> <span class="schoola1">学校总数</span>
</div> </div>
<div class="schoola"> <div class="schoola">
<span>{{ data.xxgk.xszs }}</span> <span class="schoola1">学生总数</span> <span>{{ data.xxgk.xszs }}</span>
<span class="schoola1">学生总数</span>
</div> </div>
<div class="schoola"> <div class="schoola">
<span>{{ data.xxgk.bjzs }}</span> <span class="schoola1">班级总数</span> <span>{{ data.xxgk.bjzs }}</span>
<span class="schoola1">班级总数</span>
</div> </div>
<div class="schoola"> <div class="schoola">
<span>{{ data.xxgk.jzgzs }}</span> <span class="schoola1">教职工总数</span> <span>{{ data.xxgk.jzgzs }}</span>
<span class="schoola1">教职工总数</span>
</div> </div>
</div> </div>
<div class="schoolb"> <div class="schoolb">
<div class="grade"> <div class="grade">
<div class="schoolbs"> <div class="schoolbs">
<span class="spot">初中</span> <span>{{ data.xxgk.czxxsl }}</span> <span class="spot">初中</span>
<span>{{ data.xxgk.czxxsl }}</span>
</div> </div>
<div class="schoolbs"> <div class="schoolbs">
<span class="spot">高中</span> <span>{{ data.xxgk.gzxxsl }}</span> <span class="spot">高中</span>
<span>{{ data.xxgk.gzxxsl }}</span>
</div> </div>
</div> </div>
<div class="grade"> <div class="grade">
<div class="schoolbs"> <div class="schoolbs">
<span class="spot">小学</span> <span>{{ data.xxgk.xxxxsl }}</span> <span class="spot">小学</span>
<span>{{ data.xxgk.xxxxsl }}</span>
</div> </div>
<div class="schoolbs"> <div class="schoolbs">
<span class="spot">中职</span> <span>{{ data.xxgk.zzxxsl }}</span> <span class="spot">中职</span>
<span>{{ data.xxgk.zzxxsl }}</span>
</div> </div>
</div> </div>
<div class="grade grade1"> <div class="grade grade1">
<div class="schoolbs"> <div class="schoolbs">
<span class="spot">幼儿园</span> <span>{{ data.xxgk.yeyxxsl }}</span> <span class="spot">幼儿园</span>
<span>{{ data.xxgk.yeyxxsl }}</span>
</div> </div>
<div class="schoolbs"> <div class="schoolbs">
<span class="spot">特殊教育</span> <span>{{ data.xxgk.tsjyxxsl }}</span> <span class="spot">特殊教育</span>
<span>{{ data.xxgk.tsjyxxsl }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -83,17 +110,23 @@
</div> </div>
<div class="flex1"> <div class="flex1">
<div style="width: 100%; display: flex; flex-wrap: wrap"> <div style="width: 100%; display: flex; flex-wrap: wrap">
<edie></edie> <edie :list="data.xzncxxsl"></edie>
<div class="rating"> <div class="rating">
<edXX :list="selectData.list1" :active="selectData.active"></edXX> <edXX :list="data.schoolData" :active="selectData.active"></edXX>
<div class="ratingBtn"> <div class="ratingBtn">
<div class="onImg" :class="{ ratingImg: selectData.active === '城市' }"> <!-- <div class="onImg" :class="{ ratingImg: selectData.active === '城市' }">
<span @click="ratingBtn('城市')">城市</span> <span @click="ratingBtn('城市')">城市</span>
</div> </div> -->
<div class="onImg" :class="{ ratingImg: selectData.active === '县镇' }"> <div
class="onImg"
:class="{ ratingImg: selectData.active === '县镇' }"
>
<span @click="ratingBtn('县镇')">县镇</span> <span @click="ratingBtn('县镇')">县镇</span>
</div> </div>
<div class="onImg" :class="{ ratingImg: selectData.active === '农村' }"> <div
class="onImg"
:class="{ ratingImg: selectData.active === '农村' }"
>
<span @click="ratingBtn('农村')">农村</span> <span @click="ratingBtn('农村')">农村</span>
</div> </div>
</div> </div>
@ -108,10 +141,14 @@
<span>资助金额</span> <span>资助金额</span>
</div> </div>
<div class="rolling"> <div class="rolling">
<div v-for="(item, index) in 20" :key="index" class="fundingContent"> <div
<span class="spot">幼儿资助</span> v-for="(item, index) in data.zzxm"
<span class="spot">379人次</span> :key="index"
<span class="spot">70.88</span> class="fundingContent"
>
<span class="spot">{{ item.zzxm }}</span>
<span class="spot">{{ item.zzsl }}</span>
<span class="spot">{{ item.zzje }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -230,7 +267,7 @@ const selectData = reactive({
}, },
], ],
list: [], list: [],
active: "城市", active: "县镇",
list1: [], list1: [],
}); });
var roseData1 = ref([ var roseData1 = ref([
@ -338,14 +375,24 @@ const selectChange1 = () => {
const ratingBtn = (item) => { const ratingBtn = (item) => {
selectData.active = item; // 设置当前选中的项目 selectData.active = item; // 设置当前选中的项目
switch (selectData.active) { switch (selectData.active) {
case "城市": // case "城市":
selectData.list1 = schoolData.value; // selectData.list1 = schoolData.value;
break; // break;
case "县镇": case "县镇":
selectData.list1 = schoolData1.value; data.schoolData[0].value = data.xzncjszcsl.xzjszcsl.xzfgj; //县镇复高级数量
data.schoolData[1].value = data.xzncjszcsl.xzjszcsl.xzzgj; //县镇正高级数量
data.schoolData[2].value = data.xzncjszcsl.xzjszcsl.xzwdj; //县镇未定级数量
data.schoolData[3].value = data.xzncjszcsl.xzjszcsl.xzyj; //县镇员级数量
data.schoolData[4].value = data.xzncjszcsl.xzjszcsl.xzzj; //县镇中级数量
data.schoolData[5].value = data.xzncjszcsl.xzjszcsl.xzzlj; //县镇助理级数量
break; break;
case "农村": case "农村":
selectData.list1 = schoolData2.value; data.schoolData[0].value = data.xzncjszcsl.ncjszcsl.ncfgj; //县镇正高级数量
data.schoolData[1].value = data.xzncjszcsl.ncjszcsl.nczgj; //县镇正高级数量
data.schoolData[2].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇中级数量
data.schoolData[3].value = data.xzncjszcsl.ncjszcsl.nczlj; //县镇助理级数量
data.schoolData[4].value = data.xzncjszcsl.ncjszcsl.ncyj; //县镇员级数量
data.schoolData[5].value = data.xzncjszcsl.ncjszcsl.ncwdj; //县镇未定级数量
break; break;
default: default:
break; break;
@ -375,26 +422,50 @@ const data = reactive({
cls: "left4", cls: "left4",
}, },
], ],
xxgk: {} xxgk: {},
}) xzncjszcsl: [],
onBeforeMount(() => { xzncxxsl: [[], []],
selectData.list = roseData1.value; zzxm: [],
selectData.list1 = schoolData.value; schoolData: [
http.get("/api/ggfwyth/education").then((res) => { { name: "副高级", value: "" },
{ name: "正高级", value: "" },
{ name: "未定级", value: "" },
{ name: "员级", value: "" },
{ name: "中级", value: "" },
{ name: "助理级", value: "" },
],
});
const getData = async () => {
await http.get("/api/ggfwyth/education").then((res) => {
if (res.code == 200) { if (res.code == 200) {
data.xsql.push(res.data.xssl.zz) data.xsql.push(res.data.xssl.zz);
data.xsql.push(res.data.xssl.gz) data.xsql.push(res.data.xssl.gz);
data.xsql.push(res.data.xssl.cz) data.xsql.push(res.data.xssl.cz);
data.xsql.push(res.data.xssl.xx) data.xsql.push(res.data.xssl.xx);
data.xsql.push(res.data.xssl.yey) data.xsql.push(res.data.xssl.yey);
data.xsql.push(res.data.xssl.tsjy) data.xsql.push(res.data.xssl.tsjy);
data.zdgz[0].value = res.data.zdgz.lset data.zdgz[0].value = res.data.zdgz.lset;
data.zdgz[1].value = res.data.zdgz.dszn data.zdgz[1].value = res.data.zdgz.dszn;
data.zdgz[2].value = res.data.zdgz.dqjt data.zdgz[2].value = res.data.zdgz.dqjt;
data.zdgz[3].value = res.data.zdgz.xsdb data.zdgz[3].value = res.data.zdgz.xsdb;
data.xxgk = res.data.xxgk data.xxgk = res.data.xxgk;
data.xzncjszcsl = res.data.xzncjszcsl;
data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncxx);
data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.nccz);
data.xzncxxsl[0].push(res.data.xzncxxsl.ncxx.ncgz);
data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzxx);
data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzcz);
data.xzncxxsl[1].push(res.data.xzncxxsl.xzxx.xzgz);
data.zzxm = res.data.zzxm;
ratingBtn("县镇");
} }
}); });
};
onBeforeMount(async () => {
selectData.list = roseData1.value;
getData();
}); });
</script> </script>
@ -1103,8 +1174,8 @@ onBeforeMount(() => {
justify-content: space-around; justify-content: space-around;
margin-top: 10px; margin-top: 10px;
width: 93.2%; width: 93.2%;
height: 34px; min-height: 34px;
padding: 6px 0; padding: 8px 0;
box-sizing: border-box; box-sizing: border-box;
background-image: url(@/assets/eduImg/jyImg16.png); background-image: url(@/assets/eduImg/jyImg16.png);
@ -1116,6 +1187,8 @@ onBeforeMount(() => {
letter-spacing: 3px; letter-spacing: 3px;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
width: 33%;
padding-left: 50px;
} }
} }
} }

1
src/view/yl.vue
View File

@ -258,6 +258,7 @@ const data = reactive({
onBeforeMount(() => { onBeforeMount(() => {
getData(); getData();
}); });
const getData = () => { const getData = () => {
http.get("/api/ggfwyth/yl").then((res) => { http.get("/api/ggfwyth/yl").then((res) => {
if (res.code == 200) { if (res.code == 200) {