修改孵化大脑

package-lock.json

@@ -27,7 +27,8 @@
         "universal-cookie": "^7.1.0",
         "vue": "^3.4.15",
         "vue-i18n": "^9.9.1",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "vue3-seamless-scroll": "^2.0.1"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.3.3",
@@ -5777,6 +5778,14 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -6495,6 +6504,14 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-seamless-scroll": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz",
+      "integrity": "sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==",
+      "dependencies": {
+        "throttle-debounce": "5.0.0"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",
@@ -10797,6 +10814,11 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg=="
+    },
     "tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmmirror.com/tiny-warning/-/tiny-warning-1.0.3.tgz",
@@ -11290,6 +11312,14 @@
         "@vue/devtools-api": "^6.5.0"
       }
     },
+    "vue3-seamless-scroll": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmmirror.com/vue3-seamless-scroll/-/vue3-seamless-scroll-2.0.1.tgz",
+      "integrity": "sha512-mI3BaDU3pjcPUhVSw3/xNKdfPBDABTi/OdZaZqKysx4cSdNfGRbVvGNDzzptBbJ5S7imv5T55l6x/SqgnxKreg==",
+      "requires": {
+        "throttle-debounce": "5.0.0"
+      }
+    },
     "webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",

package.json

@@ -17,8 +17,8 @@
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "5.1.10",
     "axios": "^1.6.7",
-    "echarts": "^5.5.0",
     "crypto-js": "^4.2.0",
+    "echarts": "^5.5.0",
     "element-plus": "^2.5.6",
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
@@ -30,7 +30,8 @@
     "universal-cookie": "^7.1.0",
     "vue": "^3.4.15",
     "vue-i18n": "^9.9.1",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue3-seamless-scroll": "^2.0.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

src/main.js

@@ -16,6 +16,8 @@ import { InitVariable } from './utils/variable'
 import globalComponents from '@/components'
 // 指令
 import { InitDirective } from './utils/directives'
+// 自动滚动
+import vue3SeamlessScroll from 'vue3-seamless-scroll'
 const app = createApp(App)
 globalComponents(app)
 setupStore(app)
@@ -23,6 +25,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 app.use(i18n).use(router).mount('#app')
+app.use(vue3SeamlessScroll, { name: 'vue3SeamlessScroll' })
 InitCheckResult(app)
 InitVariable(app)
 InitDirective(app)

src/views/hatch/index.vue

@@ -4,7 +4,7 @@
       <el-row>
         <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
           <div class="head">
-            <h1 class="head_1">产学研用平台孵化大脑</h1>
+            <div class="head_1">产学研用平台孵化大脑</div>
             <div class="head_2" id="showTime">{{ formattedTime }}</div>
           </div>
           <div class="center">
@@ -33,6 +33,7 @@
                       <div class="label">{{ i.label }}</div>
                     </div>
                   </div>
+                  <div class="boxfoot"></div>
                 </div>
                 <div class="mapbox">
                   <map1 class="map"></map1>
@@ -54,8 +55,6 @@
             <ul class="clearfix">
               <li>
                 <div class="boxall">
-                  <div class="titleall">模块标题</div>
-                  <div class="titleall">模块标题</div>
                   <div class="titleall">模块标题</div>
                   <div class="list thr">
                     <div class="list_1" v-for="i in listThr" :key="i.value">
@@ -69,42 +68,42 @@
               <li></li>
               <li>
                 <div class="boxall">
-                  <div class="titleall">模块标题</div>
-                  <div class="titleall">模块标题</div>
-                  <div class="titleall">模块标题</div>
-                  <div class="list thr">
-                    <div class="list_1" v-for="i in listThr" :key="i.value">
-                      <h2>{{ i.value }}</h2>
-                      <span>{{ i.label }}</span>
-                    </div>
+                  <div class="titleall">优质企业</div>
+                  <div class="list four">
+                    <vue3-seamless-scroll
+                      :list="listFour"
+                      :hover="true"
+                      :step="0.2"
+                      :wheel="true"
+                      :isWatch="true"
+                      class="scroll"
+                    >
+                      <div class="wrap" v-for="(item, index) in listFour" :key="index">
+                        <div class="other">{{ item.name }}</div>
+                        <div class="other">{{ item.number }}人</div>
+                        <div class="other">{{ item.time }}</div>
+                      </div>
+                    </vue3-seamless-scroll>
                   </div>
                   <div class="boxfoot"></div>
                 </div>
               </li>
             </ul>
-            <ul class="clearfix">
-              <li style="width: 50%">
+            <ul class="clearfix" style="display: flex; justify-content: space-between">
+              <li style="width: 49.5%">
                 <div class="boxall">
                   <div class="titleall">模块标题</div>
-                  <div class="titleall">模块标题</div>
-                  <div class="list">
-                    <div class="list_1" v-for="i in listOne" :key="i.value">
-                      <h2>{{ i.value }}</h2>
-                      <span>{{ i.label }}</span>
-                    </div>
+                  <div class="five">
+                    <echarts1></echarts1>
                   </div>
                   <div class="boxfoot"></div>
                 </div>
               </li>
-              <li style="width: 50%">
+              <li style="width: 49.5%">
                 <div class="boxall">
                   <div class="titleall">模块标题</div>
-                  <div class="titleall">模块标题</div>
-                  <div class="list">
-                    <div class="list_1" v-for="i in listOne" :key="i.value">
-                      <h2>{{ i.value }}</h2>
-                      <span>{{ i.label }}</span>
-                    </div>
+                  <div class="six">
+                    <echarts2></echarts2>
                   </div>
                   <div class="boxfoot"></div>
                 </div>
@@ -123,6 +122,8 @@
 <script setup>
 import myMain from './dataV/myMain.vue'
 import map1 from './path/map.vue'
+import echarts1 from './path/echarts1.vue'
+import echarts2 from './path/echarts2.vue'
 // 加载中
 const loading = ref(false)
 // 时间
@@ -144,8 +145,22 @@ const listThr = ref([
   { value: '2091', label: '字段名称' },
   { value: '1942', label: '字段名称' },
   { value: '98612', label: '字段名称' },
+  { value: '2091', label: '字段名称' },
+  { value: '1942', label: '字段名称' },
+  { value: '98612', label: '字段名称' },
   { value: '2091', label: '字段名称' }
 ])
+const listFour = ref([
+  { name: '深圳腾讯科技有限公司', number: '100', time: '2023-4-22' },
+  { name: '网易科技有限公司', number: '1万人以上', time: '2023-6-15' },
+  { name: '百度科技有限公司', number: '1000', time: '2023-5-30' },
+  { name: '汽车之家科技有限公司', number: '1000', time: '2023-7-12' },
+  { name: '小米科技有限公司', number: '1000', time: '2023-5-14' },
+  { name: '网易科技有限公司', number: '1万人以上', time: '2023-6-15' },
+  { name: '百度科技有限公司', number: '1000', time: '2023-5-30' },
+  { name: '汽车之家科技有限公司', number: '1000', time: '2023-7-12' },
+  { name: '小米科技有限公司', number: '1000', time: '2023-5-14' }
+])
 
 // 请求
 onMounted(async () => {
@@ -206,13 +221,14 @@ onBeforeUnmount(() => {
     .head_1 {
       color: #fff;
       text-align: center;
-      font-size: 2.5rem;
-      line-height: 2.5rem;
+      font-size: 2.3rem;
+      line-height: 2.3rem;
+      margin: 1rem 0;
     }
     .head_2 {
       position: absolute;
       right: 1rem;
-      top: 0;
+      top: 0.2rem;
       line-height: 1.5rem;
       color: rgba(255, 255, 255, 0.7);
       font-size: 1.5rem;
@@ -228,10 +244,10 @@ onBeforeUnmount(() => {
   }
   .center {
     .titleall {
-      font-size: 1rem;
+      font-size: 0.9rem;
       color: #fff;
-      line-height: 1rem;
-      padding: 0 0 0.8rem 0;
+      line-height: 0.9rem;
+      padding: 0 0 0.7rem 0;
       border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
     }
     .boxall {
@@ -289,6 +305,32 @@ onBeforeUnmount(() => {
           width: 0;
         }
       }
+      .four {
+        height: 13.2rem;
+        overflow: hidden;
+        .scroll {
+          width: 100%;
+          .wrap {
+            display: flex;
+            justify-content: space-between;
+            border: 1px solid rgba(25, 186, 139, 0.17);
+            padding: 0.2rem;
+            margin: 0 0 0.5rem 0;
+            .other:first-child {
+              width: 40%;
+            }
+            .other {
+              width: 30%;
+              color: rgba(255, 255, 255, 0.6);
+              text-align: center;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              overflow: hidden;
+              font-size: 0.8rem;
+            }
+          }
+        }
+      }
       .boxfoot {
         position: absolute;
         bottom: 0;
@@ -338,6 +380,7 @@ onBeforeUnmount(() => {
       left: 0;
     }
     .barnav {
+      margin: 0 0.5rem;
       position: relative;
       background: hsla(225, 68%, 64%, 0.1);
       .top {
@@ -363,8 +406,14 @@ onBeforeUnmount(() => {
         }
       }
     }
+    .boxfoot {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      left: 0;
+    }
     .barnav:before,
-    .barnav:before {
+    .boxfoot:before {
       border-left: 2px solid #02a6b5;
       left: 0;
     }
@@ -377,7 +426,7 @@ onBeforeUnmount(() => {
       top: 0;
     }
     .barnav:after,
-    .barnav:after {
+    .boxfoot:after {
       border-right: 2px solid #02a6b5;
       right: 0;
     }
@@ -390,8 +439,8 @@ onBeforeUnmount(() => {
       border-top: 2px solid #02a6b5;
       top: 0;
     }
-    .barnav:before,
-    .barnav:after {
+    .boxfoot:before,
+    .boxfoot:after {
       position: absolute;
       width: 0.7rem;
       height: 0.7rem;
@@ -400,26 +449,24 @@ onBeforeUnmount(() => {
       bottom: 0;
     }
     .barnav:before,
-    .barnav:before {
+    .boxfoot:before {
       border-left: 2px solid #02a6b5;
       left: 0;
     }
     .map {
       position: absolute;
-      top: 5%;
-      left: -3%;
+      top: 0;
+      left: -4%;
       width: 100%;
     }
   }
   .center > ul > li {
     float: left;
-    padding: 0 0.1rem;
     height: 100%;
     width: 30%;
   }
   .center > ul > li:nth-child(2) {
     width: 40%;
-    margin: 0 0.5rem;
   }
   .copyright {
     position: absolute;

src/views/hatch/path/echarts1.vue

@@ -0,0 +1,376 @@
+<template>
+  <div class="round">
+    <div ref="bt011" class="pie"></div>
+    <div ref="bt022" class="pie"></div>
+    <div ref="bt033" class="pie"></div>
+    <div ref="bt044" class="pie"></div>
+  </div>
+</template>
+<style scoped lang="scss">
+.round {
+  display: flex;
+  justify-content: space-between;
+  height: 120px;
+  width: 100%;
+  .pie {
+    width: 25%;
+  }
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const bt011 = ref()
+const bt022 = ref()
+const bt033 = ref()
+const bt044 = ref()
+onMounted(() => {
+  bt01()
+  bt02()
+  bt03()
+  bt04()
+})
+function bt01() {
+  const myChart1 = echarts.init(bt011.value)
+  const data1 = 104 //己完成
+  const data2 = 18 //未完成
+  const data3 = (data1 / (data1 + data2)) * 100
+  const option1 = {
+    title: [
+      {
+        text: data3.toFixed(1) + '%',
+        x: 'center',
+        y: '54%',
+        textStyle: {
+          fontSize: 18,
+          fontWeight: 'bold',
+          fontStyle: 'normal',
+          color: '#fff'
+        }
+      },
+      {
+        text: '己完成',
+        x: 'center',
+        y: '68%',
+        textStyle: {
+          fontSize: 10,
+          fontWeight: 'normal',
+          fontStyle: 'normal',
+          color: 'rgba(255,255,255,.6)'
+        }
+      },
+      {
+        text: '字段名称4',
+        x: 'center',
+        y: '20',
+        textStyle: {
+          fontSize: 14,
+          fontWeight: 'bold',
+          color: '#fff'
+        }
+      }
+    ],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    color: ['#58c485', '#ea7231'],
+    series: [
+      {
+        name: '检点',
+        type: 'pie',
+        center: ['50%', '65%'],
+        radius: ['45%', '60%'],
+        startAngle: 360,
+        avoidLabelOverlap: false,
+        label: {
+          normal: {
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            show: false,
+            textStyle: {
+              fontSize: '30',
+              fontWeight: 'bold'
+            }
+          }
+        },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: data1,
+            name: '己完成'
+          },
+          {
+            value: data2,
+            name: '未完成'
+          }
+        ]
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+function bt02() {
+  const myChart2 = echarts.init(bt022.value)
+  const data1 = 14 //己完成
+  const data2 = 18 //未完成
+  const data3 = (data1 / (data1 + data2)) * 100
+  const option2 = {
+    title: [
+      {
+        text: data3.toFixed(1) + '%',
+        x: 'center',
+        y: '54%',
+        textStyle: {
+          fontSize: 18,
+          fontWeight: 'bold',
+          fontStyle: 'normal',
+          color: '#fff'
+        }
+      },
+      {
+        text: '己完成',
+        x: 'center',
+        y: '68%',
+        textStyle: {
+          fontSize: 10,
+          fontWeight: 'normal',
+          fontStyle: 'normal',
+          color: 'rgba(255,255,255,.6)'
+        }
+      },
+      {
+        text: '字段名称1',
+        x: 'center',
+        y: '20',
+        textStyle: {
+          fontSize: 14,
+          fontWeight: 'bold',
+          color: '#fff'
+        }
+      }
+    ],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    color: ['#58c485', '#ea7231'],
+    series: [
+      {
+        name: '检点',
+        type: 'pie',
+        center: ['50%', '65%'],
+        radius: ['45%', '60%'],
+        startAngle: 360,
+        avoidLabelOverlap: false,
+        label: {
+          normal: {
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            show: false,
+            textStyle: {
+              fontSize: '30',
+              fontWeight: 'bold'
+            }
+          }
+        },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: data1,
+            name: '己完成'
+          },
+          {
+            value: data2,
+            name: '未完成'
+          }
+        ]
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+function bt03() {
+  const myChart3 = echarts.init(bt033.value)
+  const data1 = 104 //己完成
+  const data2 = 108 //未完成
+  const data3 = (data1 / (data1 + data2)) * 100
+  const option3 = {
+    title: [
+      {
+        text: data3.toFixed(1) + '%',
+        x: 'center',
+        y: '54%',
+        textStyle: {
+          fontSize: 18,
+          fontWeight: 'bold',
+          fontStyle: 'normal',
+          color: '#fff'
+        }
+      },
+      {
+        text: '己完成',
+        x: 'center',
+        y: '68%',
+        textStyle: {
+          fontSize: 10,
+          fontWeight: 'normal',
+          fontStyle: 'normal',
+          color: 'rgba(255,255,255,.6)'
+        }
+      },
+      {
+        text: '字段名称2',
+        x: 'center',
+        y: '20',
+        textStyle: {
+          fontSize: 14,
+          fontWeight: 'bold',
+          color: '#fff'
+        }
+      }
+    ],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    color: ['#58c485', '#ea7231'],
+    series: [
+      {
+        name: '检点',
+        type: 'pie',
+        center: ['50%', '65%'],
+        radius: ['45%', '60%'],
+        startAngle: 360,
+        avoidLabelOverlap: false,
+        label: { show: false },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: data1,
+            name: '己完成'
+          },
+          {
+            value: data2,
+            name: '未完成'
+          }
+        ]
+      }
+    ]
+  }
+  myChart3.setOption(option3)
+  window.addEventListener('resize', function () {
+    myChart3.resize()
+  })
+}
+function bt04() {
+  const myChart4 = echarts.init(bt044.value)
+  const data1 = 1000 //己完成
+  const data2 = 552 //未完成
+  const data3 = (data1 / (data1 + data2)) * 100
+  const option4 = {
+    title: [
+      {
+        text: data3.toFixed(1) + '%',
+        x: 'center',
+        y: '54%',
+        textStyle: {
+          fontSize: 18,
+          fontWeight: 'bold',
+          fontStyle: 'normal',
+          color: '#fff'
+        }
+      },
+      {
+        text: '己完成',
+        x: 'center',
+        y: '68%',
+        textStyle: {
+          fontSize: 10,
+          fontWeight: 'normal',
+          fontStyle: 'normal',
+          color: 'rgba(255,255,255,.6)'
+        }
+      },
+      {
+        text: '字段名称3',
+        x: 'center',
+        y: '20',
+        textStyle: {
+          fontSize: 14,
+          fontWeight: 'bold',
+          color: '#fff'
+        }
+      }
+    ],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b}: {c} ({d}%)'
+    },
+    color: ['#58c485', '#ea7231'],
+    series: [
+      {
+        name: '检点',
+        type: 'pie',
+        center: ['50%', '65%'],
+        radius: ['45%', '60%'],
+        startAngle: 360,
+        avoidLabelOverlap: false,
+        label: {
+          normal: {
+            show: false,
+            position: 'center'
+          },
+          emphasis: {
+            show: false,
+            textStyle: {
+              fontSize: '30',
+              fontWeight: 'bold'
+            }
+          }
+        },
+        labelLine: {
+          normal: {
+            show: false
+          }
+        },
+        data: [
+          {
+            value: data1,
+            name: '己完成'
+          },
+          {
+            value: data2,
+            name: '未完成'
+          }
+        ]
+      }
+    ]
+  }
+  myChart4.setOption(option4)
+  window.addEventListener('resize', function () {
+    myChart4.resize()
+  })
+}
+</script>

src/views/hatch/path/echarts2.vue

@@ -0,0 +1,131 @@
+<template>
+  <div>
+    <div ref="echarts2" class="echarts2" style="height: 120px; width: 100%"></div>
+  </div>
+</template>
+<style scoped></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts2 = ref()
+onMounted(() => {
+  drawEcharts2()
+})
+function drawEcharts2() {
+  var myChart5 = echarts.init(echarts2.value)
+  var option5 = {
+    //  backgroundColor: '#00265f',
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    legend: {
+      data: ['字段名称1', '字段名称2'],
+      top: '5%',
+      textStyle: {
+        color: '#fff',
+        fontSize: '12'
+      }
+
+      //itemGap: 35
+    },
+    grid: {
+      left: '0%',
+      top: '40px',
+      right: '0%',
+      bottom: '0',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: ['1', '2', '3', '4', '5', '6', '7'],
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)',
+            width: 1,
+            type: 'solid'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLabel: {
+          interval: 0,
+          // rotate:50,
+          show: true,
+          //  splitNumber: 2,
+          textStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '12'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        axisLabel: {
+          //formatter: '{value} %'
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '12'
+          }
+        },
+        axisTick: {
+          show: false
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,.1	)',
+            width: 1,
+            type: 'solid'
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        name: '字段名称1',
+        type: 'line',
+        smooth: true,
+        data: [5, 2, 6, 4, 5, 12, 20],
+        barWidth: '15',
+        // barGap: 1,
+        itemStyle: {
+          normal: {
+            color: '#62c98d',
+            opacity: 1,
+            barBorderRadius: 5
+          }
+        }
+      },
+      {
+        name: '字段名称2',
+        type: 'line',
+        smooth: true,
+        data: [7, 11, 8, 13, 10, 13, 10],
+
+        itemStyle: {
+          normal: {
+            color: '#ffc000',
+            opacity: 1,
+
+            barBorderRadius: 5
+          }
+        }
+      }
+    ]
+  }
+  myChart5.setOption(option5)
+}
+</script>

src/views/hatch/path/map.vue

@@ -11,7 +11,6 @@
 <script setup>
 import * as echarts from 'echarts'
 import jilinJson from '../json/jilin.json'
-import { onMounted, ref } from 'vue'
 const chinaMap = ref()
 onMounted(() => {
   drawChina()