From 43792552b08a498371b4819d118b1ca950ff50c0 Mon Sep 17 00:00:00 2001
From: lnn19986213 <1667908750@qq.com>
Date: Wed, 17 Apr 2024 13:08:03 +0800
Subject: [PATCH] gx

---
 package.json                           |   1 +
 src/main.js                            |   4 +-
 src/view/echarts_education/pie1.vue    | 149 +++++++++++++++++++++++++
 src/view/echarts_education/pie2.vue    | 145 ++++++++++++++++++++++++
 src/view/echarts_education/pie3.vue    | 145 ++++++++++++++++++++++++
 src/view/echarts_education/pie4.vue    | 145 ++++++++++++++++++++++++
 src/view/echarts_education/pieRose.vue | 118 ++++++++++++++++++++
 src/view/education.vue                 |  98 +++++++++++++++-
 yarn.lock                              | 140 +++++++++++++++++++++++
 9 files changed, 940 insertions(+), 5 deletions(-)
 create mode 100644 src/view/echarts_education/pie1.vue
 create mode 100644 src/view/echarts_education/pie2.vue
 create mode 100644 src/view/echarts_education/pie3.vue
 create mode 100644 src/view/echarts_education/pie4.vue
 create mode 100644 src/view/echarts_education/pieRose.vue

diff --git a/package.json b/package.json
index b3f471e..7a2e8ca 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "echarts": "^5.4.2",
     "echarts-gl": "^2.0.9",
     "echarts-liquidfill": "^3.1.0",
+    "element-plus": "^2.7.0",
     "sass": "^1.60.0",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6"
diff --git a/src/main.js b/src/main.js
index df941e4..5f255c6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,8 @@ import './style.css'
 import App from './App.vue'
 // 引入路由
 import router from "./router";
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 
 
-createApp(App).use(router).mount('#app')
+createApp(App).use(router).use(ElementPlus).mount('#app')
diff --git a/src/view/echarts_education/pie1.vue b/src/view/echarts_education/pie1.vue
new file mode 100644
index 0000000..c035aba
--- /dev/null
+++ b/src/view/echarts_education/pie1.vue
@@ -0,0 +1,149 @@
+<template>
+    <div ref="chart" style="width: 50%; height:50%;min-height:205px;"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const datas = {
+    value: 18,
+    text: "留 守 儿 童"
+}
+
+let option = {
+    series: [
+        // 外圈背景
+        {
+            type: "pie",
+            center: ["60%", "55%"],
+            radius: ["50%", "82%"],
+            hoverAnimation: false,
+            clockWise: false,
+            itemStyle: {
+                normal: {
+                    borderWidth: 1,
+                    borderColor: "rgba(193, 229, 255, .1)",
+                    color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+                        {
+                            offset: 1,
+                            color: "rgba(127, 242, 255, .2)",
+                        },
+                        {
+                            offset: 0,
+                            color: "rgba(109, 195, 255, 0)",
+                        },
+                    ]),
+                },
+            },
+            tooltip: {
+                show: false,
+            },
+            label: {
+                show: false,
+            },
+            data: [100],
+        },
+        /*内心原型图，展示整体数据概览*/
+        {
+            name: 'pie',
+            type: 'pie',
+            roundCap: true,
+            clockWise: true,
+            startAngle: 180,
+            labelLine: {
+                show: false
+            },
+            radius: ['50%', '70%'],
+            hoverAnimation: false,
+            center: ['60%', '55%'],
+            data: [
+                {
+                    value: datas.value,
+                    label: {
+                        normal: {
+                            formatter: '{d}{cell|%}\n{text|' + datas.text + '}',
+                            position: 'center',
+                            show: true,
+                            textStyle: {
+                                fontSize: '24',
+                                fontWeight: 'normal',
+                                color: '#fff',
+                                lineHeight: 30,
+                                rich: {
+                                    cell: {
+                                        fontSize: '24',
+                                        fontWeight: 'normal',
+                                        color: '#fff',
+                                    },
+                                    text: {
+                                        fontSize: 16,
+                                        fontFamily: 'FZLanTingHeiS-L-GB',
+                                        color: '#fff',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                                offset: 0,
+                                color: 'rgba(0, 255, 250, 0.29)'
+                            },
+                            {
+                                offset: 0.5,
+                                color: 'rgba(0, 255, 250, 0.8)'
+                            }, {
+                                offset: 1,
+                                color: 'rgba(0, 255, 250, 1)'
+                            }]),
+                            shadowColor: 'rgba(1,1,1,0.5)',
+                            shadowBlur: 1
+                        }
+                    }
+                },
+                {
+                    value: 100 - datas.value,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            color: '#095b9b', // 未完成的圆环的颜色
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            }
+                        },
+                        emphasis: {
+                            color: '#095b9b' // 未完成的圆环的颜色
+                        }
+                    }
+                }]
+        }
+    ]
+};
+
+// 使用生命钩子
+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>
\ No newline at end of file
diff --git a/src/view/echarts_education/pie2.vue b/src/view/echarts_education/pie2.vue
new file mode 100644
index 0000000..56854db
--- /dev/null
+++ b/src/view/echarts_education/pie2.vue
@@ -0,0 +1,145 @@
+<template>
+    <div ref="chart" style="width: 50%; height:50%;min-height:205px;"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const datas = {
+    value: 38,
+    text: "单 亲 家 庭"
+}
+
+let option = {
+    series: [
+        // 外圈背景
+        {
+            type: "pie",
+            center: ["40%", "55%"],
+            radius: ["50%", "82%"],
+            hoverAnimation: false,
+            clockWise: false,
+            itemStyle: {
+                normal: {
+                    borderWidth: 1,
+                    borderColor: "rgba(193, 229, 255, .1)",
+                    color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+                        {
+                            offset: 1,
+                            color: "rgba(127, 242, 255, .2)",
+                        },
+                        {
+                            offset: 0,
+                            color: "rgba(109, 195, 255, 0)",
+                        },
+                    ]),
+                },
+            },
+            tooltip: {
+                show: false,
+            },
+            label: {
+                show: false,
+            },
+            data: [100],
+        },
+        /*内心原型图，展示整体数据概览*/
+        {
+            name: 'pie',
+            type: 'pie',
+            roundCap: true,
+            clockWise: true,
+            startAngle: 180,
+            labelLine: {
+                show: false
+            },
+            radius: ['50%', '70%'],
+            hoverAnimation: false,
+            center: ['40%', '55%'],
+            data: [
+                {
+                    value: datas.value,
+                    label: {
+                        normal: {
+                            formatter: '{d}{cell|%}\n{text|' + datas.text + '}',
+                            position: 'center',
+                            show: true,
+                            textStyle: {
+                                fontSize: '24',
+                                fontWeight: 'normal',
+                                color: '#fff',
+                                lineHeight: 30,
+                                rich: {
+                                    cell: {
+                                        fontSize: '24',
+                                        fontWeight: 'normal',
+                                        color: '#fff',
+                                    },
+                                    text: {
+                                        fontSize: 16,
+                                        fontFamily: 'FZLanTingHeiS-L-GB',
+                                        color: '#fff',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
+                                offset: 0,
+                                color: 'rgba(0, 255, 134, 0.29)'
+                            }, {
+                                offset: 1,
+                                color: 'rgba(0, 255, 134, 1)'
+                            }]),
+                            shadowColor: 'rgba(1,1,1,0.5)',
+                            shadowBlur: 1
+                        }
+                    }
+                },
+                {
+                    value: 100 - datas.value,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            color: '#095b9b', // 未完成的圆环的颜色
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            }
+                        },
+                        emphasis: {
+                            color: '#095b9b' // 未完成的圆环的颜色
+                        }
+                    }
+                }]
+        }
+    ]
+};
+
+// 使用生命钩子
+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>
\ No newline at end of file
diff --git a/src/view/echarts_education/pie3.vue b/src/view/echarts_education/pie3.vue
new file mode 100644
index 0000000..55923d1
--- /dev/null
+++ b/src/view/echarts_education/pie3.vue
@@ -0,0 +1,145 @@
+<template>
+    <div ref="chart" style="width: 50%; height: 50%;min-height:205px;"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const datas = {
+    value: 65.1,
+    text: "独 生 子 女"
+}
+
+let option = {
+    series: [
+        // 外圈背景
+      {
+        type: "pie",
+        center: ["60%", "45%"],
+        radius: ["50%", "82%"],
+        hoverAnimation: false,
+        clockWise: false,
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(193, 229, 255, .1)",
+            color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+              {
+                offset: 1,
+                color: "rgba(127, 242, 255, .2)",
+              },
+              {
+                offset: 0,
+                color: "rgba(109, 195, 255, 0)",
+              },
+            ]),
+          },
+        },
+        tooltip: {
+          show: false,
+        },
+        label: {
+          show: false,
+        },
+        data: [100],
+      },
+        /*内心原型图，展示整体数据概览*/
+        {
+            name: 'pie',
+            type: 'pie',
+            roundCap: true,
+            clockWise: true,
+            startAngle: 180,
+            labelLine: {
+                show: false
+            },
+            radius: ['50%', '70%'],
+            hoverAnimation: false,
+            center: ['60%', '45%'],
+            data: [
+                {
+                    value: datas.value,
+                    label: {
+                        normal: {
+                            formatter: '{d}{cell|%}\n{text|' + datas.text + '}',
+                            position: 'center',
+                            show: true,
+                            textStyle: {
+                                fontSize: '24',
+                                fontWeight: 'normal',
+                                color: '#fff',
+                                lineHeight: 30,
+                                rich: {
+                                    cell: {
+                                        fontSize: '24',
+                                        fontWeight: 'normal',
+                                        color: '#fff',
+                                    },
+                                    text: {
+                                        fontSize: 16,
+                                        fontFamily: 'FZLanTingHeiS-L-GB',
+                                        color: '#fff',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                                offset: 0,
+                                color: 'rgba(255, 224, 0, 0.29)'
+                            }, {
+                                offset: 1,
+                                color: 'rgba(255, 224, 0, 1)'
+                            }]),
+                            shadowColor: 'rgba(1,1,1,0.5)',
+                            shadowBlur: 1
+                        }
+                    }
+                },
+                {
+                    value: 100 - datas.value,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            color: 'rgba(255, 224, 0, 0.1)', // 未完成的圆环的颜色
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            }
+                        },
+                        emphasis: {
+                            color: 'rgba(255, 224, 0, 0.1)' // 未完成的圆环的颜色
+                        }
+                    }
+                }]
+        }
+    ]
+};
+
+// 使用生命钩子
+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>
\ No newline at end of file
diff --git a/src/view/echarts_education/pie4.vue b/src/view/echarts_education/pie4.vue
new file mode 100644
index 0000000..9a0fa4a
--- /dev/null
+++ b/src/view/echarts_education/pie4.vue
@@ -0,0 +1,145 @@
+<template>
+    <div ref="chart" style="width: 50%; height: 50%;min-height:205px;"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+const datas = {
+    value: 0.1,
+    text: "享 受 低 保"
+}
+
+let option = {
+    series: [
+        // 外圈背景
+      {
+        type: "pie",
+        center: ["40%", "45%"],
+        radius: ["50%", "82%"],
+        hoverAnimation: false,
+        clockWise: false,
+        itemStyle: {
+          normal: {
+            borderWidth: 1,
+            borderColor: "rgba(193, 229, 255, .1)",
+            color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+              {
+                offset: 1,
+                color: "rgba(127, 242, 255, .2)",
+              },
+              {
+                offset: 0,
+                color: "rgba(109, 195, 255, 0)",
+              },
+            ]),
+          },
+        },
+        tooltip: {
+          show: false,
+        },
+        label: {
+          show: false,
+        },
+        data: [100],
+      },
+        /*内心原型图，展示整体数据概览*/
+        {
+            name: 'pie',
+            type: 'pie',
+            roundCap: true,
+            clockWise: true,
+            startAngle: 180,
+            labelLine: {
+                show: false
+            },
+            radius: ['50%', '70%'],
+            hoverAnimation: false,
+            center: ['40%', '45%'],
+            data: [
+                {
+                    value: datas.value,
+                    label: {
+                        normal: {
+                            formatter: '{d}{cell|%}\n{text|' + datas.text + '}',
+                            position: 'center',
+                            show: true,
+                            textStyle: {
+                                fontSize: '24',
+                                fontWeight: 'normal',
+                                color: '#fff',
+                                lineHeight: 30,
+                                rich: {
+                                    cell: {
+                                        fontSize: '24',
+                                        fontWeight: 'normal',
+                                        color: '#fff',
+                                    },
+                                    text: {
+                                        fontSize: 16,
+                                        fontFamily: 'FZLanTingHeiS-L-GB',
+                                        color: '#fff',
+                                    }
+                                }
+                            }
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                                offset: 0,
+                                color: 'rgba(254, 135, 98, 0.29)'
+                            }, {
+                                offset: 1,
+                                color: 'rgba(254, 135, 98, 1)'
+                            }]),
+                            shadowColor: 'rgba(1,1,1,0.5)',
+                            shadowBlur: 1
+                        }
+                    }
+                },
+                {
+                    value: 100 - datas.value,
+                    name: '',
+                    itemStyle: {
+                        normal: {
+                            color: 'rgba(254, 135, 98, 0.1)', // 未完成的圆环的颜色
+                            label: {
+                                show: false
+                            },
+                            labelLine: {
+                                show: false
+                            }
+                        },
+                        emphasis: {
+                            color: 'rgba(254, 135, 98, 0.1)' // 未完成的圆环的颜色
+                        }
+                    }
+                }]
+        }
+    ]
+};
+
+// 使用生命钩子
+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>
\ No newline at end of file
diff --git a/src/view/echarts_education/pieRose.vue b/src/view/echarts_education/pieRose.vue
new file mode 100644
index 0000000..71a4c89
--- /dev/null
+++ b/src/view/echarts_education/pieRose.vue
@@ -0,0 +1,118 @@
+<template>
+    <div ref="chart" style="width: 100%; height:calc(100% - 126px);min-height:205px;"></div>
+</template>
+
+<script setup>
+import { onMounted, reactive, ref } from "vue";
+// 局部引入echarts核心模块
+import * as echarts from "echarts";
+
+const chart = ref(); // 创建DOM引用
+
+var data = [
+    {
+        name: '农业专业合作社',
+        value: 7
+    },
+    {
+        name: '农业企业',
+        value: 6
+    },
+    {
+        name: '农业冷藏冷库',
+        value: 14
+    },
+    {
+        name: '农业园区',
+        value: 4
+    }
+];
+
+let option = {
+    series: [
+        // 内圈背景
+        {
+            type: "pie",
+            center: ["50%", "50%"],
+            radius: ["20%", "32%"],
+            hoverAnimation: false,
+            clockWise: false,
+            itemStyle: {
+                normal: {
+                    borderWidth: 1,
+                    borderColor: "rgba(193, 229, 255, .1)",
+                    color: new echarts.graphic.LinearGradient(1, 1, 1, 0, [
+                        {
+                            offset: 1,
+                            color: "rgba(127, 242, 255, .2)",
+                        },
+                        {
+                            offset: 0,
+                            color: "rgba(109, 195, 255, 0)",
+                        },
+                    ]),
+                },
+            },
+            tooltip: {
+                show: false,
+            },
+            label: {
+                show: false,
+            },
+            data: [100],
+        },
+        /*内心原型图，展示整体数据概览*/
+        {
+            name: '半径模式',
+            type: 'pie',
+            radius: ['20%', '50%'],
+            center: ['35%', '50%'],
+            roseType: 'radius',
+            minShowLabelAngle: 60,
+            label: {
+                show: true,
+                normal: {
+                    position: 'outside',
+                    fontSize: 16,
+                    formatter: (params) => {
+                        return (
+                            params.name +
+                            //   '(' +
+                            //   ((params.value / total) * 100).toFixed(2) +
+                            //   '%)' +
+                            //   '\n' +
+                            params.value +
+                            '个'
+                        );
+                    }
+                }
+            },
+            labelLine: {
+                length: 1,
+                length2: 10,
+                smooth: true
+            },
+            data: data
+        }
+    ]
+};
+
+// 使用生命钩子
+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>
\ No newline at end of file
diff --git a/src/view/education.vue b/src/view/education.vue
index 7378ef2..812a0f7 100644
--- a/src/view/education.vue
+++ b/src/view/education.vue
@@ -3,11 +3,28 @@
     <div class="displayFlex left_bg">
       <div class="flex1">
         <div class="yd_title left_1"></div>
-        <ePie></ePie>
+        <div style="width: 100%; height:calc(100% - 46px);display: flex;flex-wrap:wrap;">
+          <ePie1></ePie1>
+          <ePie2></ePie2>
+          <ePie3></ePie3>
+          <ePie4></ePie4>
+        </div>
       </div>
       <div class="flex1">
         <div class="yd_title left_2"></div>
-        
+        <div class="selectLint">
+          <div class="selectBox">
+            <el-select v-model="value" placeholder="Select" size="large">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+          <div class="selectBox">
+            <el-select v-model="value" placeholder="Select" size="large">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </div>
+        </div>
+        <ePieRose></ePieRose>
       </div>
     </div>
     <div class="displayFlex">
@@ -40,9 +57,38 @@
 
 <script setup>
 import eBubble from "./echarts_education/bubble.vue";
-// import ePie from "./echarts/pie.vue";
+import ePie1 from "./echarts_education/pie1.vue";
+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 ePie2 from "./echarts/pie2.vue";
 // import eGraph from "./echarts/graph.vue";
+import { ref } from 'vue'
+
+const value = ref('')
+const options = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+  {
+    value: 'Option4',
+    label: 'Option4',
+  },
+  {
+    value: 'Option5',
+    label: 'Option5',
+  },
+]
 </script>
 
 <style lang="scss" scoped>
@@ -72,11 +118,13 @@ import eBubble from "./echarts_education/bubble.vue";
   // height: 100%;
   box-sizing: border-box;
   padding-left: 50px;
+  padding-right: 20px;
   margin-right: 28px;
   background-image: url(@/assets/images/left_bg.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .right_bg {
   width: 642px;
   box-sizing: border-box;
@@ -87,22 +135,26 @@ import eBubble from "./echarts_education/bubble.vue";
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .left_1 {
   background-image: url(@/assets/eduImg/title1.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .left_2 {
   background-image: url(@/assets/eduImg/title2.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .center_1 {
   background-image: url(@/assets/eduImg/title3.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
-.right_1{
+
+.right_1 {
   background-image: url(@/assets/eduImg/title4.png);
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -349,4 +401,42 @@ import eBubble from "./echarts_education/bubble.vue";
     }
   }
 }
+
+.selectLint {
+  width: 100%;
+  display: flex;
+  margin: 30px 0 10px;
+  justify-content: space-between;
+
+  .selectBox {
+    width: 48%;
+    background-image: url(@/assets/eduImg/title3.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  }
+}
+</style>
+<style lang="scss">
+.selectBox {
+  .el-select--large .el-select__wrapper {
+    font-size: 18px !important;
+  }
+  .el-select__wrapper {
+    background-color: rgba(255,255,255,0) !important;
+    
+  }
+  .el-select__placeholder{
+    color: #fff !important;
+  }
+  .el-select__caret{
+    color: #fff !important;
+    font-size: 18px !important;
+  }
+  .el-select-dropdown__item{
+    color: #fff !important;
+  }
+  .el-select-dropdown__wrap{
+
+  }
+}
 </style>
diff --git a/yarn.lock b/yarn.lock
index 4bc77ee..226dd8c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,16 @@
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.21.3.tgz"
   integrity sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ==
 
+"@ctrl/tinycolor@^3.4.1":
+  version "3.6.1"
+  resolved "https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
+  integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
+
+"@element-plus/icons-vue@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz#1f635ad5fdd5c85ed936481525570e82b5a8307a"
+  integrity sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==
+
 "@esbuild/android-arm64@0.17.14":
   version "0.17.14"
   resolved "https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.17.14.tgz#4624cea3c8941c91f9e9c1228f550d23f1cef037"
@@ -117,6 +127,48 @@
   resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.14.tgz"
   integrity sha512-gPQmsi2DKTaEgG14hc3CHXHp62k8g6qr0Pas+I4lUxRMugGSATh/Bi8Dgusoz9IQ0IfdrvLpco6kujEIBoaogA==
 
+"@floating-ui/core@^1.0.0":
+  version "1.6.0"
+  resolved "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
+  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.1"
+
+"@floating-ui/dom@^1.0.1":
+  version "1.6.3"
+  resolved "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
+  integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
+"@popperjs/core@npm:@sxzz/popperjs-es@^2.11.7":
+  version "2.11.7"
+  resolved "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz#a7f69e3665d3da9b115f9e71671dae1b97e13671"
+  integrity sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==
+
+"@types/lodash-es@^4.17.6":
+  version "4.17.12"
+  resolved "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz#65f6d1e5f80539aa7cfbfc962de5def0cf4f341b"
+  integrity sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*", "@types/lodash@^4.14.182":
+  version "4.17.0"
+  resolved "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.0.tgz#d774355e41f372d5350a4d0714abb48194a489c3"
+  integrity sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==
+
+"@types/web-bluetooth@^0.0.16":
+  version "0.0.16"
+  resolved "https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
+  integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
+
 "@vitejs/plugin-vue@^4.1.0":
   version "4.1.0"
   resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.1.0.tgz"
@@ -217,6 +269,28 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz"
   integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
 
+"@vueuse/core@^9.1.0":
+  version "9.13.0"
+  resolved "https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz#2f69e66d1905c1e4eebc249a01759cf88ea00cf4"
+  integrity sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.16"
+    "@vueuse/metadata" "9.13.0"
+    "@vueuse/shared" "9.13.0"
+    vue-demi "*"
+
+"@vueuse/metadata@9.13.0":
+  version "9.13.0"
+  resolved "https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz#bc25a6cdad1b1a93c36ce30191124da6520539ff"
+  integrity sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==
+
+"@vueuse/shared@9.13.0":
+  version "9.13.0"
+  resolved "https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz#089ff4cc4e2e7a4015e57a8f32e4b39d096353b9"
+  integrity sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==
+  dependencies:
+    vue-demi "*"
+
 anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz"
@@ -225,6 +299,11 @@ anymatch@~3.1.2:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+async-validator@^4.2.5:
+  version "4.2.5"
+  resolved "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
+  integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
+
 binary-extensions@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz"
@@ -262,6 +341,11 @@ csstype@^2.6.8:
   resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz"
   integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==
 
+dayjs@^1.11.3:
+  version "1.11.10"
+  resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
+  integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
+
 echarts-gl@^2.0.9:
   version "2.0.9"
   resolved "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz"
@@ -283,6 +367,27 @@ echarts@^5.4.2:
     tslib "2.3.0"
     zrender "5.4.3"
 
+element-plus@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.7.0.tgz#1d72b06946c46a6f18e5315610b7f0147b8efb24"
+  integrity sha512-WAiaFLavuWFxof9qwkC27jvkh9nRcNnB506g1vvJSiVaVqjCBWUFCIyJKeN11M1qcv2cS5VV5PfSLjTIkrw87A==
+  dependencies:
+    "@ctrl/tinycolor" "^3.4.1"
+    "@element-plus/icons-vue" "^2.3.1"
+    "@floating-ui/dom" "^1.0.1"
+    "@popperjs/core" "npm:@sxzz/popperjs-es@^2.11.7"
+    "@types/lodash" "^4.14.182"
+    "@types/lodash-es" "^4.17.6"
+    "@vueuse/core" "^9.1.0"
+    async-validator "^4.2.5"
+    dayjs "^1.11.3"
+    escape-html "^1.0.3"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    lodash-unified "^1.0.2"
+    memoize-one "^6.0.0"
+    normalize-wheel-es "^1.2.0"
+
 esbuild@^0.17.5:
   version "0.17.14"
   resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.17.14.tgz"
@@ -311,6 +416,11 @@ esbuild@^0.17.5:
     "@esbuild/win32-ia32" "0.17.14"
     "@esbuild/win32-x64" "0.17.14"
 
+escape-html@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
 estree-walker@^2.0.2:
   version "2.0.2"
   resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz"
@@ -383,6 +493,21 @@ is-number@^7.0.0:
   resolved "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
+lodash-unified@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz#80b1eac10ed2eb02ed189f08614a29c27d07c894"
+  integrity sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz"
@@ -390,6 +515,11 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 nanoid@^3.3.4:
   version "3.3.6"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz"
@@ -400,6 +530,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-wheel-es@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz#0fa2593d619f7245a541652619105ab076acf09e"
+  integrity sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==
+
 path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
@@ -500,6 +635,11 @@ vite@^4.2.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-demi@*:
+  version "0.14.7"
+  resolved "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
+  integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
+
 vue-router@^4.1.6:
   version "4.1.6"
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.1.6.tgz"