gx

src/router/index.js

@@ -25,6 +25,11 @@ const router = createRouter({
           path: '/home/index',
           component: () => import('../view/sy.vue'),
         },
+        {
+          name: '首页',
+          path: '/home/index/LivelihoodWelfare',
+          component: () => import('../view/sy.vue'),
+        },
         {
           name: '养老',
           path: '/home/yl',

src/view/LivelihoodWelfare.vue

@@ -0,0 +1,112 @@
+<template>
+    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
+    <!--vue3中 id=‘’ 变更 ref=-->
+    <div ref="chart" style="width:100%;height:200px;"></div>
+  </template>
+  
+  <script setup >
+  import {onMounted, reactive, ref} from "vue";
+  // 局部引入echarts核心模块
+  import * as echarts from 'echarts'
+  
+  // const props = defineProps({ // 宏接收：父传参
+  // 结构优化
+  const {chartType,chartData}= defineProps({ // 宏接收：父传参
+    chartType:{
+        type: String
+    },
+    chartData: {
+        type: Array
+    }
+  })
+  
+  const chart =ref(); // 创建DOM引用
+  
+  // 第二种方法：初始化方法
+  const option = reactive({
+    // 指定图表的配置项和数据
+    title: { // 标题
+        // left: 'center', // 居中
+        text: 'ECharts 入门示例',
+        left: 'center',
+        textStyle: {
+            color: '#f60',
+            fontSize: 20,
+        }
+    },
+    color: '#f00', // 系列柱的颜色
+    tooltip: {},  // 提示
+    legend: {  // 图例
+        data: ['销量'],
+        top: '5%',
+        left: 'right',
+        textStyle: { // 文字样式
+            color: '#f68',
+        }
+    },
+    xAxis: { // x轴
+        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
+        axisLine: { // 设置轴
+            lineStyle: { // 样式
+                color:'#000' // 颜色
+            }
+        },
+  
+        axisLabel:{
+            interval: 0,
+            formatter: value => value.split('').join('\n') //报红：取消lang='ts'
+        }
+    },
+    yAxis: { // y轴
+        axisLine: { // 设置轴
+            lineStyle: { // 样式
+                color:'#000' // 颜色
+            }
+        },
+        axisLabel:{
+            // formatter: '{value} 件'
+            formatter: function(value,index){ // 报红：取消lang='ts'
+                return value %2 == 0 ? value + '件' : value  // 可写各种逻辑判断： 奇偶数
+            }
+        }
+    },
+    series: [ // data数据
+        {
+            name: '销量',
+            // type: 'bar', // 图样类型
+            // type: props.chartType, // 父传参：自定义
+            type:chartType, // 结构优化
+            // data: [5, 20, 36, 10, 10, 20], // 图标数据
+            // data: props.chartData,
+            data: chartData,
+            label: {
+                show: true,
+                position: 'top'
+            },
+        }
+    ]
+  })
+  
+  // 使用生命钩子
+  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>

src/view/education.vue

@@ -557,7 +557,7 @@ const selectChange2 = () => {
   });
 
   selectData.list = roseData1.value;
-  console.log(selectData.list);
+  // console.log(selectData.list);
 
   setTimeout(() => {
     showR.value = true;

src/view/sy.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="module">
+  <div class="module"  >
     <div class="displayFlex left_bg">
       <div class="flex1">
         <div class="yd_title left_1">
@@ -605,6 +605,7 @@
         </div>
       </template>
     </DialogTab>
+    
   </div>
 </template>
 
@@ -1736,6 +1737,7 @@ onBeforeMount(async () => {
 </script>
 
 <style lang="scss" scoped>
+
 :deep(.el-dialog) {
   --el-dialog-bg-color: none;
 }
@@ -1797,9 +1799,7 @@ onBeforeMount(async () => {
     background-color: rgba(0, 116, 255, 0) !important;
   }
 }
-</style>
 
-<style lang="scss" scoped>
 .displayFlex {
   box-sizing: border-box;
   height: 100%;