gx

src/router/index.js

@@ -25,11 +25,6 @@ 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

@@ -1,112 +0,0 @@
-<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>