Auto Commit

package.json

@@ -11,6 +11,7 @@
     "core-js": "^3.8.3",
     "echarts": "^5.5.0",
     "element-ui": "^2.15.14",
+    "less-loader": "5.0.0",
     "vue": "^2.6.14",
     "vue-router": "3"
   },

src/components/ganttchart/index.vue

+<template>
+    <div class="chart-outer">
+        <div ref="chartRef" class="real-chart"></div>
+    </div>
+</template>
+<script>
+export default {
+    name: 'ganttChart',
+    data() {
+        return {
+
+        }
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+
+}
+</script>
+<style lang="less"  scoped>
+.chart-outer {
+    width: 100%;
+    height: 116px;
+    overflow: hidden;
+    position: relative;
+
+    /* overflow-y: auto;
+        overflow-x: hidden; */
+    .real-chart {
+        z-index: 1;
+        width: 100%;
+        margin-top: 6px;
+        height: calc(100% - 6px);
+    }
+
+    &::after {
+        display: block;
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 24px;
+        background: #2cd0ff;
+        opacity: 0.3;
+        bottom: 1px;
+        z-index: 0;
+    }
+}
+</style>
\ No newline at end of file

src/router/routes.js

@@ -27,7 +27,7 @@ export default [
                 path:'gantt',
                 name:'Gantt',
                 meta:{title:'甘特图'},
-                component:() => import('@/views/Echarts/GanttChart.vue')
+                component:() => import('@/views/Echarts/GanttChartDemo.vue')
             }
         ]
     }

src/views/Echarts/GanttChart.vue → src/views/Echarts/GanttChartDemo.vue

 <template>
     <div>
-        gantt
+        <h3>甘特图测试</h3>
+        <GanttChart/>
     </div>
 </template>
 <script>
+    import GanttChart from '@/components/ganttchart'
     export default{
-        name:'gantt',
+        name:'GanttChartDemo',
+        components:{GanttChart},
         data(){
             return {
 

vue.config.js

@@ -7,5 +7,15 @@ module.exports = defineConfig({
     // port: 8089,
     historyApiFallback: true,
     allowedHosts: "all"
+  },
+  css:{
+    // 配置less 预处理样式
+    loaderOptions:{
+      less:{
+        lessOptions:{
+          javascriptEnabled:true
+        }
+      }
+    }
   }
 })

yarn.lock

@@ -2383,6 +2383,11 @@ clone@^1.0.2:
   resolved "http://mirrors.csdn.net.cn/repository/csdn-npm-mirrors/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.npmmirror.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "http://mirrors.csdn.net.cn/repository/csdn-npm-mirrors/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -4076,6 +4081,15 @@ launch-editor@^2.2.1, launch-editor@^2.6.0, launch-editor@^2.6.1:
     picocolors "^1.0.0"
     shell-quote "^1.8.1"
 
+less-loader@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmmirror.com/less-loader/-/less-loader-5.0.0.tgz#498dde3a6c6c4f887458ee9ed3f086a12ad1b466"
+  integrity sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==
+  dependencies:
+    clone "^2.1.1"
+    loader-utils "^1.1.0"
+    pify "^4.0.1"
+
 levn@^0.4.1:
   version "0.4.1"
   resolved "http://mirrors.csdn.net.cn/repository/csdn-npm-mirrors/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
@@ -4736,6 +4750,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   resolved "http://mirrors.csdn.net.cn/repository/csdn-npm-mirrors/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
+pify@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
+
 pkg-dir@^4.1.0:
   version "4.2.0"
   resolved "http://mirrors.csdn.net.cn/repository/csdn-npm-mirrors/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"