....

src/pages/school.vue

@@ -58,7 +58,8 @@ const initData = () => {
       <div style="width:49%;">
         <div class="w-full flex flex-col border border-hex-0A337E bg-block p-6">
           <div class="text-lg mb-2 ">桐乡农村学校艺术类教师结构性缺编情况</div>
-          <cone/>
+          <div class="h-60"><cone/></div>
+          
         </div>
         
       </div>

src/pages/school/cone.vue

@@ -6,7 +6,13 @@ onMounted(() => {
   echarts.init(chartRef.value).setOption({
     xAxis: {
     type: 'category',
-    data: ['美术专职教师占比100%', '美术专职教师占比80%至99%', '美术专职教师占比50以下']
+    data: ["美术专职教师占比100%", " 美术专职教师占比80%至99% ", "美术专职教师占比50以下"]
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
   },
   yAxis: {
     type: 'value'

src/pages/teaching.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import liquidfill from './teaching/liquidfill.vue'
-import pie from './teaching/pie.vue'
-import kaike_qushi from '~/assets/img/teaching/kaike_qushi.png'
-import kaike_qingkuang from '~/assets/img/teaching/kaike_qingkuang.png'
-import youxiu_ziyuan from '~/assets/img/teaching/youxiu_ziyuan.png'
+import liquidfill from './teaching/liquidfill.vue';
+import pie from './teaching/pie.vue';
+import stackLine from './teaching/stackLine.vue'
+
 
 const secSchollResourceTitle = ref(["资源名称", "点击量", "点赞数", "下载数"]);
 const secSchollResourceContent = ref([
@@ -89,14 +88,15 @@ const secSchollOpenClassContent = ref([
       </div>
 
       <div class="w-full flex  h-457px justify-between mt-7">
-        <div class="w-405px h-full p-4 flex flex-col border border-hex-0A337E bg-block">
+        <div class="w-405px h-full p-4 flex flex-col border border-hex-0A337E bg-block" style="width:49%;">
           <div class="text-lg py-4">教学场景分布</div>
           <div class="w-full flex-grow">
             <pie />
           </div>
         </div>
-        <div class="w-528px h-full">
-          <img :src="kaike_qushi" alt="">
+        <div class="w-528px h-full p-4 flex flex-col border border-hex-0A337E bg-block" style="width:49%;">
+          <div class="text-lg mb-4 ">教学场景开课趋势</div>
+          <stackLine/>
         </div>
       </div>
     </div>

src/pages/teaching/stackLine.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import * as echarts from 'echarts'
+
+const chartRef = ref()
+onMounted(() => {
+  echarts.init(chartRef.value).setOption({
+  tooltip: {
+    trigger: 'axis'
+  },
+  legend: {
+    data: ['自主教学', '结对双师', '名师直播']
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'category',
+    boundaryGap: false,
+    data: ['2022年1月', '2022年3月', '2022年5月','2022年7月', '2022年9月',
+    '2022年11月','2023年1月', '2023年3月']
+  },
+  yAxis: {
+    type: 'value'
+  },
+  series: [
+    
+    {
+      name: '自主教学',
+      type: 'line',
+      stack: 'Total',
+      data: [220, 182, 191, 234, 290, 330, 310, 330,],
+      smooth: true
+    },
+    {
+      name: '结对双师',
+      type: 'line',
+      stack: 'Total',
+      data: [150, 232, 201, 154, 190, 330, 410, 330,],
+      smooth: true
+    },
+    {
+      name: '名师直播',
+      type: 'line',
+      stack: 'Total',
+      data: [320, 332, 301, 334, 390, 330, 320, 330,],
+      smooth: true
+    }
+  ]
+})
+})
+</script>
+
+<template>
+  <div ref="chartRef" class="w-full h-full " />
+</template>