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

gx

This commit is contained in:
姚宇浩 2024-04-19 09:56:38 +08:00
parent d71a546124
commit 93cda90012
11 changed files with 404 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/education/dqjt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
src/assets/images/education/dszn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
src/assets/images/education/fk.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
src/assets/images/education/lset.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
src/assets/images/education/title.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/images/education/xsdb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

150
src/view/echarts_education/bubble.vue
View File

@ -1,150 +0,0 @@
<template>
<div ref="chart" style="width:100%;height:300px;"></div>
</template>
<script setup >
import {onMounted, reactive, ref} from "vue";
// 局部引入echarts核心模块
import * as echarts from 'echarts'
const chart =ref(); // 创建DOM引用
var plantCap = [{
name: '中国工程院 \n\n 院士'
}, {
name: '计算机应用 \n\n 专家'
}, {
name: '浙江大学计算机 \n\n 科学与技术学院 \n\n 教授'
}, {
name: '国家数码喷印工程 \n\n 技术研究中心 \n\n 首席科学家'
}, {
name: '浙江大学信息 \n\n 学部主任'
}, {
name: '博士生导师'
}];
var datalist = [{
offset: [10, 73],
symbolSize: 90,
opacity: .95,
color: '#C58F5A'
}, {
offset: [40, 63],
symbolSize: 90,
opacity: .88,
color: '#076097'
}, {
offset: [80, 73],
symbolSize: 130,
opacity: .84,
color: '#BF74CF'
}, {
offset: [20, 23],
symbolSize: 140,
opacity: .84,
color: '#2D90ED'
}, {
offset: [60, 23],
symbolSize: 95,
opacity: .84,
color: '#079773'
}, {
offset: [90, 33],
symbolSize: 80,
opacity: .84,
color: '#C89D4A'
}];
var datas = [];
for (var i = 0; i < plantCap.length; i++) {
var item = plantCap[i];
var itemToStyle = datalist[i];
datas.push({
name: item.name,
value: itemToStyle.offset,
symbolSize: itemToStyle.symbolSize,
label: {
normal: {
textStyle: {
fontSize: 12
}
}
},
itemStyle: {
normal: {
color: itemToStyle.color,
opacity: itemToStyle.opacity
}
},
})
}
let option = {
grid: {
show: false,
top: 10,
bottom: 10
},
xAxis: [{
gridIndex: 0,
type: 'value',
show: false,
min: 0,
max: 100,
nameLocation: 'middle',
nameGap: 5
}],
yAxis: [{
gridIndex: 0,
min: 0,
show: false,
max: 100,
nameLocation: 'middle',
nameGap: 30
}],
series: [{
type: 'scatter',
symbol: 'circle',
symbolSize: 120,
label: {
normal: {
show: true,
formatter: '{b}',
color: '#fff',
textStyle: {
fontSize: '20'
}
},
},
itemStyle: {
normal: {
color: '#00acea'
}
},
data: datas
}]
};
// 使用生命钩子
onMounted(() => {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// Vue3中： 需要引入
var myChart = echarts.init(chart.value)
// init(); // vue3.2没有this
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 单图表响应式: 跟随浏览器大小改变
window.addEventListener('resize',()=>{
myChart.resize()
})
})
</script>
<style scoped>
</style>

281
src/view/echarts_education/eP1.vue Normal file
View File

@ -0,0 +1,281 @@
<template>
<div ref="chart" style="width: 100%; height: 300px"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import * as echarts from "echarts";
const chart = ref(); // 创建DOM引用
const data = [150, 230, 224, 218, 135, 147];
const data1 = ["2019年", "2020年", "2021年", "2022年", "2023年", "2024年"];
const data2 = [
"10000人",
"14000人",
"23000人",
"10000人",
"13200人",
"10000人",
];
// const max = data.concat(lineData).reduce((pre, cur) => (pre > cur ? pre : cur), 0); //找到这个新数组中的最大值
const option = {
// color,
// calculable: true,
grid: {
top: "6%",
left: "9%",
right: "10%",
bottom: "0%",
containLabel: false, //---grid 区域是否包含坐标轴的刻度标签
},
tooltip: {
show: true, //---是否显示提示框,默认为true
trigger: "axis",
formatter: "{b0}:{c0}",
},
xAxis: [
{
type: "value",
scale: false,
axisLabel: {
//坐标轴分割线
show: false,
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//y轴线的颜色以及宽度
show: false // 取消x轴线
},
splitLine: {
show: false,//---grid 区域中的分隔线
},
axisTick: {
show: false, // 设置轴刻度不显示
},
// data: ["2019", "2019", "2019", "2019", "2019", "2019", "2019"],
},
],
yAxis: [
{
type: "category",
scale: true,
// name: "时长/小时",
// max: data.length,
splitLine: {
show: false,
lineStyle: {
color: "#ffffff",
width: 1,
},
},
axisTick: {
show: false, // 设置轴刻度不显示
},
axisLabel: {
//y轴文字的配置
textStyle: {
color: "#ffffff",
},
},
axisLine: {
//分割线配置
show: false,
// lineStyle: {
// color: "#ffffff",
// width: 1,
// type: "solid",
// },
},
data: data1,
},
{
type: "category",
show: true,
position: "right",
axisLine: {
//---坐标轴 轴线
show: false // 取消轴线
},
axisLabel: {
//---坐标轴 标签
textStyle: {
color: "#ffffff",
},
},
axisTick: {
show: false, // 设置轴刻度不显示
},
data: data2,
},
],
series: [
{
type: "bar",
data: data,
barWidth: 5, //柱宽
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
// itemStyle: {
// normal: {
// // borderWidth: 1,
// // borderColor: "rgba(0, 183, 255, 1)",
// // borderRadius: [0, 0, 50, 0], //圆角边框
// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// { offset: 0, color: "rgba(26, 255, 217, 0)" },
// { offset: 1, color: "rgba(0, 183, 255, 1)" },
// ]),
// // color: [{new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// // { offset: 0, color: "rgba(26, 255, 217, 0)" },
// // { offset: 1, color: "rgba(0, 230, 255, 1)" },
// // ])},
// // {new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// // { offset: 0, color: "rgba(26, 255, 217, 0)" },
// // { offset: 1, color: "rgba(0, 255, 208,1)" },
// // ])},
// // {new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// // { offset: 0, color: "rgba(26, 255, 217, 0)" },
// // { offset: 1, color: "rgba(255, 234, 90, 1)" },
// // ])},
// // ],
// },
// },
itemStyle: {
normal: {
color: function (params) {
let colorList = [
["rgba(0, 230, 255, 1)", "rgba(0, 230, 255, 0.2)"],
["rgba(0, 255, 208,1)", "rgba(0, 255, 208, 0.20)"],
["rgba(255, 234, 90, 1)", "rgba(255, 234, 90, 0.20)"],
];
if (params.dataIndex == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 3 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(23, 237, 255, 1)",
},
{
offset: 1,
color: "rgba(23, 237, 255, 0.20)",
},
],
false
);
} else if (params.dataIndex % 2 == 0) {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(255, 243, 119, 1)",
},
{
offset: 1,
color: "rgba(255, 242, 142, 0.20)",
},
],
false
);
} else {
return new echarts.graphic.LinearGradient(
0,
0,
0,
1, //y->y2
[
{
offset: 0,
color: "rgba(142, 187, 255, 1)",
},
{
offset: 1,
color: "rgba(142, 187, 255, 0.20)",
},
],
false
);
}
},
},
},
label: {
show: true,
width: 8,
height: 8,
borderRadius: 1000,
color: "rgba(0,0,0,0)",
backgroundColor: "rgba(0, 230, 255, 1)",
shadowColor: "#00E6FF",
position: ["99%", -1],
shadowBlur: 6,
},
},
{
yAxisIndex: 1,
showBackground: true,
barWidth: 30, //外阴影背景宽
itemStyle: {
color: "rgba(0, 230, 255, 0)", //外阴影背景
},
// data: data.map(() => data),
data: data,
type: "bar",
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)",
},
],
},
},
},
},
],
};
onMounted(() => {
var myChart = echarts.init(chart.value);
myChart.setOption(option);
});
</script>
<style scoped></style>

2
src/view/echarts_education/pieRose.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="chart" style="width: 100%; height:370px;"></div>
<div ref="chart" style="width: 100%; height:350px;"></div>
</template>
<script setup>

142
src/view/education.vue
View File

@ -3,21 +3,17 @@
<div class="displayFlex left_bg">
<div class="flex1">
<div class="yd_title left_1"></div>
<div
style="
width: 100%;
height: calc(100% - 46px);
display: flex;
flex-wrap: wrap;
"
>
<ePie1></ePie1>
<ePie2></ePie2>
<ePie3></ePie3>
<ePie4></ePie4>
<eP1></eP1>
<div class="t_1"></div>
<div class="t_2">
<div class="t_3" v-for="(item,index) in fl" :key="index">
<div class="top">{{item.value}}%</div>
<div :class='item.cls'></div>
<div class="right">{{item.name}}</div>
</div>
</div>
</div>
<div class="flex1">
<div class="flex1" style="margin-top: 30px">
<div class="yd_title left_2"></div>
<div class="selectLint">
<div class="selectBox">
@ -102,16 +98,10 @@
</div>
</div>
<div class="flex1">
<div
style="
width: 100%;
display: flex;
flex-wrap: wrap;
"
>
<div style="width: 100%; display: flex; flex-wrap: wrap">
<edie></edie>
<div class="rating">
<edXX :list="selectData.list1" :active="selectData.active "></edXX>
<edXX :list="selectData.list1" :active="selectData.active"></edXX>
<div class="ratingBtn">
<div
class="onImg"
@ -238,7 +228,29 @@ import ePie2 from "./echarts_education/pie2.vue";
import ePie3 from "./echarts_education/pie3.vue";
import ePie4 from "./echarts_education/pie4.vue";
import ePieRose from "./echarts_education/pieRose.vue";
import eP1 from "./echarts_education/eP1.vue";
const fl = ref([
{
name: "留守儿童",
value: 16.1,
cls: "left1",
},
{
name: "独生子女",
value: 32.1,
cls: "left2",
},
{
name: "单亲家庭",
value: 65.1,
cls: "left3",
},
{
name: "享受低保",
value: 0.1,
cls: "left4",
},
]);
const selectData = reactive({
value1: "111",
value2: "tes1",
@ -1176,6 +1188,92 @@ onBeforeMount(() => {
background: rgba(0, 162, 231, 1);
-webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
}
.t_1 {
margin: 10px auto;
width: 100%;
height: 52px;
background-image: url(@/assets/images/education/title.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.t_2 {
margin-top: 35px;
padding: 0 10px;
display: flex;
justify-content: space-around;
.t_3 {
width: 135px;
height: 90px;
background-image: url(@/assets/images/education/fk.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
.top {
position: absolute;
left: 38px;
top: -25px;
font-size: 26px;
color: #ffffff;
line-height: 30px;
}
.left1 {
position: absolute;
left: 15px;
top: 35px;
width: 40px;
height: 40px;
background-image: url(@/assets/images/education/lset.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.left2 {
position: absolute;
left: 15px;
top: 35px;
width: 40px;
height: 40px;
background-image: url(@/assets/images/education/dszn.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.left3 {
position: absolute;
left: 15px;
top: 35px;
width: 40px;
height: 40px;
background-image: url(@/assets/images/education/dqjt.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.left4 {
position: absolute;
left: 15px;
top: 35px;
width: 40px;
height: 40px;
background-image: url(@/assets/images/education/xsdb.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.right {
position: absolute;
left: 65px;
top: 35px;
width: 38px;
height: 40px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
font-size: 15px;
color: #ffffff;
line-height: 20px;
letter-spacing: 4px;
text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.65);
text-align: center;
font-style: normal;
}
}
}
</style>
<style lang="scss">
.selectBox {

4
src/view/hygiene.vue
View File

@ -621,7 +621,7 @@ const change = (name, index) => {
display: flex;
align-items: center;
justify-content: center;
margin-left: 60px;
margin-left: 40px;
margin-top: -10px;
.leftImg {
width: 105px;
@ -638,7 +638,7 @@ const change = (name, index) => {
display: flex;
align-items: center;
// justify-content: center;
margin-left: 40px;
margin-left: 50px;
.rightImg {
width: 81px;
height: 81px;