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

View File

@ -3,10 +3,33 @@
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import {
onMounted,
onBeforeMount,
ref,
reactive,
defineProps,
nextTick,
} from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // DOM
const data = reactive({
list: [],
list1: [],
option: {},
});
// const data = [150, 230, 224, 218, 135, 147];
const data1 = ["中职", "高中", "初中", "小学", "幼儿园", "特殊教育"];
const data2 = [
@ -18,10 +41,21 @@ const data2 = [
"10000人",
];
const newData2 = data2.map((item) => parseInt(item.replace("人", "")));
const newMaxNumber = Math.max(...newData2) * 1.05;
const setChart = () => {
// 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: {
top: "6%",
left: "9%",
@ -38,7 +72,7 @@ const option = {
{
type: "value",
scale: false,
max: newMaxNumber,
max: data.list,
axisLabel: {
//线
show: false,
@ -108,13 +142,13 @@ const option = {
axisTick: {
show: false, //
},
data: data2,
data: data.list1,
},
],
series: [
{
type: "bar",
data: newData2.map(() => Math.max(...newData2) * 1.05), //
data: data.list.map(() => Math.max(...data.list) * 1.05), //
// barGap: 0 /**/,
yAxisIndex: 1,
barWidth: 30, //
@ -125,7 +159,7 @@ const option = {
},
{
type: "bar",
data: newData2.map(() => Math.max(...newData2) * 1.02), //
data: data.list.map(() => Math.max(...data.list) * 1.02), //
barWidth: 8, //
silent: true, //
itemStyle: {
@ -143,7 +177,7 @@ const option = {
},
{
type: "bar",
data: newData2,
data: data.list,
barWidth: 7, //
barGap: -1.1 /*多个并排柱子设置柱子之间的间距*/,
itemStyle: {
@ -184,10 +218,16 @@ const option = {
},
],
};
};
onMounted(() => {
var myChart = echarts.init(chart.value);
myChart.setOption(option);
// 使
onBeforeMount(() => {
setTimeout(() => {
data.list = props.list;
setChart1();
getOption();
setChart();
}, 600);
});
</script>

View File

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

View File

@ -1,21 +1,32 @@
<template>
<div
ref="chart"
style="width: 50%;height: 280px"
></div>
<div ref="chart" style="width: 50%; height: 280px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import { onBeforeMount, onMounted, reactive, ref } from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => {
return [];
},
},
});
const chart = ref(); // DOM
let option = {
const data = reactive({
list: [[], []],
option: {},
});
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1}<br />{a2}:{c2} ",
formatter: "{b0}<br />{a0}:{c0} <br />{a1}:{c1} ",
},
legend: {
top: "8%",
@ -100,28 +111,28 @@ let option = {
},
],
series: [
{
name: "城市",
type: "bar",
data: [2.0, 4.9, 7.0],
barWidth: "18%",
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: "",
// type: "bar",
// data: [2.0, 4.9, 7.0],
// barWidth: "18%",
// 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: "县镇",
type: "bar",
data: [2.6, 5.9, 9.0],
data: data.list[1],
barWidth: "18%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -139,7 +150,7 @@ let option = {
{
name: "农村",
type: "bar",
data: [2.6, 5.9, 9.0],
data: data.list[0],
barWidth: "18%",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -166,22 +177,26 @@ let option = {
},
],
};
// 使
onMounted(() => {
// domecharts
// var myChart = echarts.init(document.getElementById('main'));
};
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// init(); // vue3.2this
// 使
myChart.setOption(option);
// :
// window.addEventListener("resize", () => {
// myChart.resize();
// });
myChart.setOption(data.option);
};
// 使
onBeforeMount(() => {
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>

View File

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

View File

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