孵化器

src/router/index.js

@@ -84,7 +84,7 @@ const router = createRouter({
           path: '/eleven',
           name: 'eleven',
           meta: { title: '产学研用协同创新平台-孵化器' },
-          component: () => import('@/views/main/eleven.vue')
+          component: () => import('@/views/main/elevenHatch/index.vue')
         },
         {
           path: '/twelve',

src/views/main/eleven.vue

@@ -1,35 +0,0 @@
-<template>
-  <div id="index">
-    <el-row>
-      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
-        <el-col :span="24" class="one"> </el-col>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script setup>
-// 加载中
-const loading = ref(false)
-// 请求
-onMounted(async () => {
-  loading.value = true
-  await search()
-  loading.value = false
-})
-const search = async () => {}
-</script>
-<style scoped lang="scss">
-.main {
-  .one {
-    .image {
-      width: 100%;
-      height: 200px;
-    }
-  }
-
-  .two {
-    margin: 10px 0;
-  }
-}
-</style>

src/views/main/elevenHatch/dataV/mixin/autoResize.js

@@ -0,0 +1,85 @@
+import { debounce, observerDomResize } from '../util/index'
+
+export default {
+  data () {
+    return {
+      dom: '',
+
+      width: 0,
+      height: 0,
+
+      debounceInitWHFun: '',
+
+      domObserver: ''
+    }
+  },
+  methods: {
+    async autoResizeMixinInit () {
+      const { initWH, getDebounceInitWHFun, bindDomResizeCallback, afterAutoResizeMixinInit } = this
+
+      await initWH(false)
+
+      getDebounceInitWHFun()
+
+      bindDomResizeCallback()
+
+      if (typeof afterAutoResizeMixinInit === 'function') afterAutoResizeMixinInit()
+    },
+    initWH (resize = true) {
+      const { $nextTick, $refs, ref, onResize } = this
+
+      return new Promise(resolve => {
+        $nextTick((_) => {
+          const dom = (this.dom = $refs[ref])
+          // this.width = dom ? dom.clientWidth : 0
+          // this.height = dom ? dom.clientHeight : 0
+          this.width = window.innerWidth
+          this.height = window.innerHeight
+
+          if (!dom) {
+            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
+          } else if (!this.width || !this.height) {
+            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
+          }
+
+          if (typeof onResize === 'function' && resize) onResize()
+
+          resolve()
+        })
+      })
+    },
+    getDebounceInitWHFun () {
+      const { initWH } = this
+
+      this.debounceInitWHFun = debounce(100, initWH)
+    },
+    bindDomResizeCallback () {
+      const { dom, debounceInitWHFun } = this
+
+      this.domObserver = observerDomResize(dom, debounceInitWHFun)
+
+      window.addEventListener('resize', debounceInitWHFun)
+    },
+    unbindDomResizeCallback () {
+      let { domObserver, debounceInitWHFun } = this
+
+      if (!domObserver) return
+
+      domObserver.disconnect()
+      domObserver.takeRecords()
+      domObserver = null
+
+      window.removeEventListener('resize', debounceInitWHFun)
+    }
+  },
+  mounted () {
+    const { autoResizeMixinInit } = this
+
+    autoResizeMixinInit()
+  },
+  beforeDestroy () {
+    const { unbindDomResizeCallback } = this
+
+    unbindDomResizeCallback()
+  }
+}

src/views/main/elevenHatch/dataV/myMain.vue

@@ -0,0 +1,60 @@
+<template>
+  <div id="dv-full-screen-container" :ref="ref">
+    <template v-if="ready">
+      <slot></slot>
+    </template>
+  </div>
+</template>
+
+<script>
+import autoResize from './mixin/autoResize.js'
+
+export default {
+  name: 'DvFullScreenContainer',
+  mixins: [autoResize],
+  data() {
+    return {
+      ref: 'full-screen-container',
+      allWidth: 0,
+      allHeight: 0,
+      scale: 0,
+      datavRoot: '',
+      ready: false
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit() {
+      const { initConfig, setAppScale } = this
+
+      initConfig()
+
+      setAppScale()
+
+      this.ready = true
+    },
+    initConfig() {
+      const { dom } = this
+      // const { width } = screen
+      let width = window.innerWidth
+      let height = window.innerHeight
+      this.allWidth = width
+      this.allHeight = height
+
+      dom.style.width = `${width - 17}px`
+      dom.style.height = `${height}px`
+    },
+    setAppScale() {
+      const { allWidth, allHeight, dom } = this
+      const currentWidth = window.outerWidth
+      const currentHeight = window.innerHeight
+      // dom.style.transform = `scale(${currentWidth / allWidth})`
+      dom.style.transform = `scaleY(${currentHeight / allHeight}) scaleX(${currentWidth / allWidth})`
+    },
+    onResize() {
+      const { setAppScale } = this
+
+      setAppScale()
+    }
+  }
+}
+</script>

src/views/main/elevenHatch/dataV/util/index.js

@@ -0,0 +1,47 @@
+export function randomExtend(minNum, maxNum) {
+  if (arguments.length === 1) {
+    return parseInt(Math.random() * minNum + 1, 10)
+  } else {
+    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
+  }
+}
+
+export function debounce(delay, callback) {
+  let lastTime
+
+  return function () {
+    clearTimeout(lastTime)
+
+    const [that, args] = [this, arguments]
+
+    lastTime = setTimeout(() => {
+      callback.apply(that, args)
+    }, delay)
+  }
+}
+
+export function observerDomResize(dom, callback) {
+  const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
+
+  const observer = new MutationObserver(callback)
+
+  observer.observe(dom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
+
+  return observer
+}
+
+export function getPointDistance(pointOne, pointTwo) {
+  const minusX = Math.abs(pointOne[0] - pointTwo[0])
+
+  const minusY = Math.abs(pointOne[1] - pointTwo[1])
+
+  return Math.sqrt(minusX * minusX + minusY * minusY)
+}
+
+export function uuid(hasHyphen) {
+  return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0
+    const v = c == 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}

src/views/main/elevenHatch/index.vue

@@ -0,0 +1,353 @@
+<template>
+  <myMain>
+    <div class="main">
+      <el-row>
+        <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
+          <div class="head">
+            <div class="head_1">孵化器管理驾驶舱</div>
+            <div class="head_2" id="showTime">{{ formattedTime }}</div>
+          </div>
+          <div class="center">
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <div class="center_1">
+                  <div class="boxall">
+                    <div class="alltitle">孵化进度</div>
+                    <echarts3></echarts3>
+                  </div>
+                  <div class="boxall">
+                    <div class="alltitle">孵化项目列表</div>
+                    <div class="wraptit">
+                      <span>项目名称</span><span>金额</span><span>风险概率</span><span>时间</span>
+                    </div>
+                    <div class="one">
+                      <vue3-seamless-scroll
+                        :list="oneList"
+                        :hover="true"
+                        :step="0.2"
+                        :wheel="true"
+                        :isWatch="true"
+                        class="scroll"
+                      >
+                        <div class="wrap" v-for="(item, index) in oneList" :key="index">
+                          <div class="other">{{ item.name }}</div>
+                          <div class="other">{{ item.money }}</div>
+                          <div class="other">{{ item.number }}</div>
+                          <div class="other">{{ item.time }}</div>
+                        </div>
+                      </vue3-seamless-scroll>
+                    </div>
+                  </div>
+                  <div class="boxall">
+                    <div class="alltitle">行业领域占比情况</div>
+                    <echarts1></echarts1>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="center_1">
+                  <div class="boxall" style="height: 160px">
+                    <div class="clearfix navboxall" style="height: 100%">
+                      <div class="pulll_left num">
+                        <div class="numbt">总体投资情况<span>(单位：万元)</span></div>
+                        <div class="numtxt">19382721</div>
+                      </div>
+                      <div class="pulll_right zhibiao">
+                        <div class="zb1">
+                          <span>工研院运营</span>
+                          <echarts5></echarts5>
+                        </div>
+                        <div class="zb2">
+                          <span>参股孵化器</span>
+                          <echarts6></echarts6>
+                        </div>
+                        <div class="zb3">
+                          <span>合作孵化器</span>
+                          <echarts7></echarts7>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="boxall">
+                    <div class="alltitle">年度项目完成对比</div>
+                    <echarts2></echarts2>
+                  </div>
+                  <div class="boxall">
+                    <div class="alltitle">投资收益对比</div>
+                    <echarts4></echarts4>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="center_1">
+                  <div class="boxall">
+                    <div class="alltitle">视频监控</div>
+                    <div v-for="(item, index) in twoList" :key="index">
+                      <el-image class="image" :src="item.url" fit="fill" />
+                    </div>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </myMain>
+</template>
+
+<script setup>
+import myMain from './dataV/myMain.vue'
+import echarts1 from './path/echarts1.vue'
+import echarts2 from './path/echarts2.vue'
+import echarts3 from './path/echarts3.vue'
+import echarts4 from './path/echarts4.vue'
+import echarts5 from './path/echarts5.vue'
+import echarts6 from './path/echarts6.vue'
+import echarts7 from './path/echarts7.vue'
+// 加载中
+const loading = ref(false)
+// 时间
+const formattedTime = ref('')
+const oneList = ref([
+  { name: '鱿鱼卤制品的研究', money: '110万', number: '10%', time: '2023-4-22' },
+  { name: '一种快速装置自净系统', money: '190万', number: '20%', time: '2023-6-15' },
+  { name: '玻璃表面清洁技术', money: '90万', number: '33%', time: '2023-5-30' },
+  { name: '网上信息安全处理', money: '180万', number: '14%', time: '2023-7-12' },
+  { name: '视觉检测', money: '119万', number: '10%', time: '2023-5-14' },
+  { name: '无纺布气味去除', money: '120万', number: '20%', time: '2023-6-15' },
+  { name: '功能性色母开发', money: '160万', number: '10%', time: '2023-5-30' }
+])
+import video_1 from '/images/video_1.jpg'
+import video_2 from '/images/video_2.jpg'
+import video_3 from '/images/video_3.jpg'
+import video_4 from '/images/video_4.jpg'
+const twoList = ref([{ url: video_1 }, { url: video_2 }, { url: video_3 }, { url: video_4 }])
+
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await updateTime()
+  loading.value = false
+})
+// 创建一个函数来格式化时间并更新状态
+const updateTime = () => {
+  const now = new Date()
+  const options = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+  }
+  formattedTime.value = now.toLocaleString('zh-CN', options)
+}
+
+const timer = setInterval(updateTime, 1000)
+
+onMounted(() => {
+  timer // 开始计时器
+})
+
+onBeforeUnmount(() => {
+  clearInterval(timer) // 组件卸载前清除计时器
+})
+</script>
+<style scoped lang="scss">
+.main {
+  height: 100vh;
+  width: 100%;
+  position: relative;
+  background: url('./images/bg.jpg');
+  background-size: 100% 100%;
+  padding: 0px;
+  margin: 0px;
+  color: #222;
+  font-family: '微软雅黑';
+  cursor: default; /* 将鼠标样式更改为箭头 */
+  @font-face {
+    font-family: electronicFont;
+    src: url(./font/DS-DIGIT.TTF);
+  }
+  a:hover {
+    color: #06c;
+    text-decoration: none !important;
+  }
+  .head {
+    position: relative;
+    height: 4rem;
+    background: url('./images/head_bg.png') no-repeat center center;
+    background-size: 100% 100%;
+    .head_1 {
+      color: #fff;
+      text-align: center;
+      font-size: 2.3rem;
+      line-height: 2.3rem;
+      margin: 1rem 0;
+    }
+    .head_2 {
+      position: absolute;
+      right: 1rem;
+      top: 0.2rem;
+      line-height: 1.5rem;
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 1.5rem;
+      padding-right: 0.5rem;
+      font-family: electronicFont;
+    }
+  }
+  .center {
+    margin: 0 10px;
+    .center_1 {
+      .navboxall {
+        height: calc(100% - 30px);
+      }
+      .boxall {
+        padding: 15px;
+        background: rgba(0, 0, 0, 0.2);
+        position: relative;
+        margin-bottom: 10px;
+        z-index: 10;
+      }
+
+      .alltitle {
+        font-size: 18px;
+        color: #fff;
+        position: relative;
+        padding-left: 12px;
+        margin-bottom: 10px;
+      }
+
+      .alltitle:before {
+        width: 5px;
+        height: 20px;
+        top: 2px;
+        position: absolute;
+        content: '';
+        background: #49bcf7;
+        border-radius: 20px;
+        left: 0;
+      }
+      .image {
+        width: 100%;
+        height: 135px;
+      }
+      .wraptit span {
+        display: inline-block;
+        font-size: 16px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      .wraptit {
+        text-align: center;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+        padding: 0 0 10px 0;
+        margin-bottom: 10px;
+      }
+      .wraptit span:nth-child(1) {
+        width: 30%;
+      }
+
+      .wraptit span:nth-child(2) {
+        width: 20%;
+      }
+
+      .wraptit span:nth-child(3) {
+        width: 30%;
+      }
+
+      .wraptit span:nth-child(4) {
+        width: 20%;
+      }
+
+      .clearfix {
+        display: flex;
+        align-items: center;
+      }
+      .num,
+      .zhibiao {
+        height: 100%;
+        width: 50%;
+      }
+
+      .zb1,
+      .zb2,
+      .zb3 {
+        float: left;
+        width: 33.3333%;
+        height: 100%;
+      }
+
+      #zb1,
+      #zb2,
+      #zb3 {
+        height: calc(100% - 30px);
+      }
+
+      .zhibiao span {
+        padding-top: 20px;
+        display: block;
+        text-align: center;
+        color: #fff;
+        font-size: 16px;
+      }
+
+      .num {
+        padding-right: 20px;
+      }
+
+      .numbt {
+        font-size: 24px;
+        color: #fff;
+        padding-top: 14px;
+      }
+
+      .numbt span {
+        font-size: 18px;
+        padding-left: 10px;
+        color: #fff;
+      }
+
+      .numtxt {
+        color: #fef000;
+        font-size: 40px;
+        font-family: arial;
+        border-top: 1px solid rgba(255, 255, 255, 0.1);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        padding: 10px 0;
+        margin: 18px 0;
+        font-weight: bold;
+        letter-spacing: 2px;
+      }
+      .one {
+        height: 5rem;
+        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;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/main/elevenHatch/path/echarts1.vue

@@ -0,0 +1,106 @@
+<template>
+  <div ref="echarts1" class="echarts1"></div>
+</template>
+<style scoped lang="scss">
+.echarts1 {
+  height: 150px;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts1 = ref()
+onMounted(() => {
+  echarts1View()
+})
+function echarts1View() {
+  const myChart1 = echarts.init(echarts1.value)
+  const option1 = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b} : {c} ({d}%)'
+    },
+    legend: {
+      right: 0,
+      top: 20,
+      height: 160,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 10,
+      textStyle: {
+        color: 'rgba(255,255,255,.6)',
+        fontSize: 12
+      },
+      orient: 'vertical',
+      data: ['制造业', '服务业', '农业', '金融行业', '电子商务行业']
+    },
+    calculable: true,
+    series: [
+      {
+        name: ' ',
+        color: [
+          '#62c98d',
+          '#2f89cf',
+          '#4cb9cf',
+          '#53b666',
+          '#62c98d',
+          '#205acf',
+          '#c9c862',
+          '#c98b62',
+          '#c962b9',
+          '#7562c9',
+          '#c96262',
+          '#c25775',
+          '#00b7be'
+        ],
+        type: 'pie',
+        radius: [30, 70],
+        center: ['35%', '50%'],
+        roseType: 'radius',
+        label: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        lableLine: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        data: [
+          {
+            value: 10,
+            name: '制造业'
+          },
+          {
+            value: 5,
+            name: '服务业'
+          },
+          {
+            value: 15,
+            name: '农业'
+          },
+          {
+            value: 25,
+            name: '金融行业'
+          },
+          {
+            value: 20,
+            name: '电子商务行业'
+          }
+        ]
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+</script>

src/views/main/elevenHatch/path/echarts2.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <div ref="echarts2" class="echarts2" style="height: 160px; width: 100%"></div>
+  </div>
+</template>
+<style scoped></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts2 = ref()
+onMounted(() => {
+  drawEcharts2()
+})
+function drawEcharts2() {
+  var myChart2 = echarts.init(echarts2.value)
+  var option2 = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        lineStyle: {
+          color: '#57617B'
+        }
+      }
+    },
+    legend: {
+      data: [
+        {
+          name: '省重点'
+        },
+        {
+          name: '市重点'
+        },
+        {
+          name: '完成率'
+        }
+      ],
+      top: '0%',
+      textStyle: {
+        color: 'rgba(255,255,255,0.9)'
+      }
+    },
+    xAxis: [
+      {
+        type: 'category',
+        data: [
+          '1月',
+          '2月',
+          '3月',
+          '4月',
+          '5月',
+          '6月',
+          '7月',
+          '8月',
+          '9月',
+          '10月',
+          '11月',
+          '12月'
+        ],
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        },
+        axisLabel: {
+          textStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '14'
+          }
+        }
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '金额',
+        min: 0,
+        max: 50,
+        interval: 10,
+        axisLabel: {
+          show: true
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.4)'
+          }
+        }
+      },
+      {
+        type: 'value',
+        name: '完成率',
+        show: true,
+        axisLabel: {
+          show: true
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.4)'
+          }
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#001e94'
+          }
+        }
+      }
+    ],
+    grid: {
+      top: '20%',
+      right: '30',
+      bottom: '30',
+      left: '30'
+    },
+    series: [
+      {
+        name: '省重点',
+        type: 'bar',
+        data: [4, 6, 36, 6, 8, 6, 4, 6, 30, 6, 8, 12],
+        barWidth: 'auto',
+        itemStyle: {
+          normal: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#609db8'
+                },
+                {
+                  offset: 1,
+                  color: '#609db8'
+                }
+              ],
+              globalCoord: false
+            }
+          }
+        }
+      },
+      {
+        name: '市重点',
+        type: 'bar',
+        data: [4, 2, 34, 6, 8, 6, 4, 2, 32, 6, 8, 18],
+        barWidth: 'auto',
+        itemStyle: {
+          normal: {
+            color: {
+              type: 'linear',
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: '#66b8a7'
+                },
+                {
+                  offset: 1,
+                  color: '#66b8a7'
+                }
+              ],
+              globalCoord: false
+            }
+          }
+        },
+        barGap: '0'
+      },
+      {
+        name: '完成率',
+        type: 'line',
+        yAxisIndex: 1,
+        data: [100, 50, 80, 30, 90, 40, 70, 33, 100, 40, 80, 20],
+        lineStyle: {
+          normal: {
+            width: 2
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#cdba00'
+          }
+        },
+        smooth: true
+      }
+    ]
+  }
+  myChart2.setOption(option2)
+}
+</script>

src/views/main/elevenHatch/path/echarts3.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <div ref="echarts3" class="echarts3" style="height: 140px; width: 100%"></div>
+  </div>
+</template>
+<style scoped lang="scss"></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts3 = ref()
+onMounted(() => {
+  echarts3View()
+})
+function echarts3View() {
+  var myChart3 = echarts.init(echarts3.value)
+  var option3 = {
+    tooltip: {
+      show: false
+    },
+    grid: {
+      top: '0%',
+      left: '90',
+      right: '14%',
+      bottom: '0%'
+    },
+    xAxis: {
+      min: 0,
+      max: 100,
+      splitLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      }
+    },
+    yAxis: {
+      axisLabel: {
+        color: 'rgba(255,255,255,.6)',
+        fontSize: 14,
+        width: 85, //将内容的宽度固定
+        overflow: 'truncate', //超出的部分截断
+        ellipsis: '...' //截断的部分用...代替
+      },
+      data: [
+        '鱿鱼卤制品的研究',
+        '一种快速装置自净系统',
+        '玻璃表面清洁技术',
+        '网上信息安全处理',
+        '视觉检测',
+        '无纺布气味去除',
+        '功能性色母开发'
+      ],
+      axisTick: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      }
+    },
+    series: [
+      {
+        type: 'bar',
+        label: {
+          show: true,
+          zlevel: 10000,
+          position: 'right',
+          padding: 10,
+          color: '#49bcf7',
+          fontSize: 14,
+          formatter: '{c}%'
+        },
+        itemStyle: {
+          color: '#49bcf7'
+        },
+        barWidth: '15',
+        data: [49, 80, 67, 99, 12, 19, 39, 84],
+        z: 10
+      },
+      {
+        type: 'bar',
+        barGap: '-100%',
+        itemStyle: {
+          color: '#fff',
+          opacity: 0.1
+        },
+        barWidth: '15',
+        data: [100, 100, 100, 100, 100, 100, 100, 100],
+        z: 5
+      }
+    ]
+  }
+  myChart3.setOption(option3)
+  window.addEventListener('resize', function () {
+    myChart3.resize()
+  })
+}
+</script>

src/views/main/elevenHatch/path/echarts4.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <div ref="echarts4" class="echarts4" style="height: 150px; width: 100%"></div>
+  </div>
+</template>
+<style scoped></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts4 = ref()
+onMounted(() => {
+  drawEcharts4()
+})
+function drawEcharts4() {
+  var myChart4 = echarts.init(echarts4.value)
+  var option4 = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        lineStyle: {
+          color: '#57617B'
+        }
+      }
+    },
+    legend: {
+      data: ['销售额', '利润'],
+      top: '0',
+      textStyle: {
+        color: '#fff'
+      },
+      itemGap: 20
+    },
+    grid: {
+      left: '0',
+      right: '20',
+      top: '10',
+      bottom: '20',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,.6)'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        },
+        data: [
+          '1月',
+          '2月',
+          '3月',
+          '4月',
+          '5月',
+          '6月',
+          '7月',
+          '8月',
+          '9月',
+          '10月',
+          '11月',
+          '12月'
+        ]
+      },
+      {}
+    ],
+    yAxis: [
+      {
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,.6)'
+          }
+        },
+        axisLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(255,255,255,.1)'
+          }
+        }
+      }
+    ],
+    series: [
+      {
+        name: '销售额',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 5,
+        showSymbol: false,
+        lineStyle: {
+          normal: {
+            width: 2
+          }
+        },
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: 'rgba(24, 163, 64, 0.3)'
+                },
+                {
+                  offset: 0.8,
+                  color: 'rgba(24, 163, 64, 0)'
+                }
+              ],
+              false
+            ),
+            shadowColor: 'rgba(0, 0, 0, 0.1)',
+            shadowBlur: 10
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#cdba00',
+            borderColor: 'rgba(137,189,2,0.27)',
+            borderWidth: 12
+          }
+        },
+        data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
+      },
+      {
+        name: '利润',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 5,
+        showSymbol: false,
+        lineStyle: {
+          normal: {
+            width: 2
+          }
+        },
+        areaStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(
+              0,
+              0,
+              0,
+              1,
+              [
+                {
+                  offset: 0,
+                  color: 'rgba(39, 122,206, 0.3)'
+                },
+                {
+                  offset: 0.8,
+                  color: 'rgba(39, 122,206, 0)'
+                }
+              ],
+              false
+            ),
+            shadowColor: 'rgba(0, 0, 0, 0.1)',
+            shadowBlur: 10
+          }
+        },
+        itemStyle: {
+          normal: {
+            color: '#277ace',
+            borderColor: 'rgba(0,136,212,0.2)',
+            borderWidth: 12
+          }
+        },
+        data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
+      }
+    ]
+  }
+  myChart4.setOption(option4)
+}
+</script>

src/views/main/elevenHatch/path/echarts5.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div ref="echarts5" class="echarts5" style="height: 100px; width: 100%"></div>
+  </div>
+</template>
+<style scoped></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts5 = ref()
+onMounted(() => {
+  drawEcharts5()
+})
+function drawEcharts5() {
+  var myChart5 = echarts.init(echarts5.value)
+  var b = 298
+  var c = 523
+  var d = b + c
+  var option5 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['60%', '70%'],
+        color: '#49bcf7',
+        label: {
+          normal: {
+            position: 'center'
+          }
+        },
+        data: [
+          {
+            value: c,
+            name: '女消费',
+            label: {
+              normal: {
+                formatter: c + '',
+                textStyle: {
+                  fontSize: 20,
+                  color: '#fff'
+                }
+              }
+            }
+          },
+          {
+            value: b,
+            name: '男消费',
+            label: {
+              normal: {
+                formatter: function () {
+                  return '占比' + Math.round((c / d) * 100) + '%'
+                },
+                textStyle: {
+                  color: '#aaa',
+                  fontSize: 12
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(255,255,255,.2)'
+              },
+              emphasis: {
+                color: '#fff'
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+  myChart5.setOption(option5)
+}
+</script>

src/views/main/elevenHatch/path/echarts6.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div ref="echarts6" class="echarts6" style="height: 100px; width: 100%"></div>
+  </div>
+</template>
+<style scoped></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts6 = ref()
+onMounted(() => {
+  drawEcharts6()
+})
+function drawEcharts6() {
+  var myChart6 = echarts.init(echarts6.value)
+  var b = 298
+  var c = 523
+  var d = b + c
+  var option6 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['60%', '70%'],
+        color: '#cdba00',
+        label: {
+          normal: {
+            position: 'center'
+          }
+        },
+        data: [
+          {
+            value: b,
+            name: '男消费',
+            label: {
+              normal: {
+                formatter: b + '',
+                textStyle: {
+                  fontSize: 20,
+                  color: '#fff'
+                }
+              }
+            }
+          },
+          {
+            value: c,
+            name: '女消费',
+            label: {
+              normal: {
+                formatter: function () {
+                  return '占比' + Math.round((b / d) * 100) + '%'
+                },
+                textStyle: {
+                  color: '#aaa',
+                  fontSize: 12
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(255,255,255,.2)'
+              },
+              emphasis: {
+                color: '#fff'
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+  myChart6.setOption(option6)
+}
+</script>

src/views/main/elevenHatch/path/echarts7.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div ref="echarts7" class="echarts7" style="height: 100px; width: 100%"></div>
+  </div>
+</template>
+<style scoped></style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts7 = ref()
+onMounted(() => {
+  drawEcharts7()
+})
+function drawEcharts7() {
+  var myChart7 = echarts.init(echarts7.value)
+  var b = 298
+  var c = 523
+  var d = b + c
+  var option7 = {
+    series: [
+      {
+        type: 'pie',
+        radius: ['60%', '70%'],
+        color: '#62c98d',
+        label: {
+          normal: {
+            position: 'center'
+          }
+        },
+        data: [
+          {
+            value: c,
+            name: '女消费',
+            label: {
+              normal: {
+                formatter: c + '',
+                textStyle: {
+                  fontSize: 20,
+                  color: '#fff'
+                }
+              }
+            }
+          },
+          {
+            value: b,
+            name: '男消费',
+            label: {
+              normal: {
+                formatter: function () {
+                  return '占比' + Math.round((c / d) * 100) + '%'
+                },
+                textStyle: {
+                  color: '#aaa',
+                  fontSize: 12
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(255,255,255,.2)'
+              },
+              emphasis: {
+                color: '#fff'
+              }
+            }
+          }
+        ]
+      }
+    ]
+  }
+  myChart7.setOption(option7)
+}
+</script>