修改孵化大脑

src/views/main/elevenHatch/index.vue

@@ -49,8 +49,8 @@
                   <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 class="numbt">总体情况<span>(单位：家)</span></div>
+                        <div class="numtxt">190</div>
                       </div>
                       <div class="pulll_right zhibiao">
                         <div class="zb1">

src/views/main/twelve.vue

@@ -16,7 +16,7 @@
 <script setup>
 // 组件
 import twelve1 from './hatch/twelve_1.vue'
-import twelve2 from './hatch/twelve_2.vue'
+import twelve2 from './twelveHatch/index.vue'
 // 加载中
 const loading = ref(false)
 const is_show = ref(true)

src/views/main/twelveHatch/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/twelveHatch/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/twelveHatch/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/twelveHatch/index.vue

@@ -0,0 +1,444 @@
+<template>
+  <myMain>
+    <div class="main">
+      <el-row>
+        <el-col :span="24" class="animate__animated animate__backInRight" v-loading="loading">
+          <div class="head clearfix">
+            <h1 class="pulll_left">产业孵化大脑</h1>
+            <div class="menu menu2 pulll_left">
+              <ul>
+                <li><a @click="selectMenu('one')" href="#">首页</a></li>
+                <li><a @click="selectMenu('four')" href="#">信息检索</a></li>
+                <li><a @click="selectMenu('five')" href="#">双创活动</a></li>
+                <li><a @click="selectMenu('six')" href="#">中试平台</a></li>
+                <li><a @click="selectMenu('seven')" href="#">服务支撑</a></li>
+                <li><a @click="selectMenu('eight')" href="#">产业集群</a></li>
+                <li><a @click="selectMenu('nine')" href="#">成果展示</a></li>
+                <li><a @click="selectMenu('ten')" href="#">信息库</a></li>
+                <li><a @click="selectMenu('eleven')" href="#">孵化器</a></li>
+              </ul>
+            </div>
+            <div class="time">{{ formattedTime }}</div>
+          </div>
+          <div class="mainbox">
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <div class="center_1">
+                  <div class="box">
+                    <div class="tit">各类用户人数</div>
+                    <div class="boxnav" style="height: 240px">
+                      <div class="yqlist">
+                        <ul class="clearfix">
+                          <li>
+                            <div class="yq" id="yq">2634</div>
+                            <span>正在线人数(1)</span>
+                          </li>
+                          <li>
+                            <div class="yq">567</div>
+                            <span>对接人数(2)</span>
+                          </li>
+                          <li>
+                            <div class="yq">56345</div>
+                            <span>浏览人数(3)</span>
+                          </li>
+                          <li>
+                            <div class="yq">721</div>
+                            <span>用户总数(4)</span>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="box">
+                    <div class="tit">专家分布地区</div>
+                    <div class="boxnav">
+                      <echarts1></echarts1>
+                    </div>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="12">
+                <div class="center_1">
+                  <div class="box">
+                    <div class="boxnav mapc" style="position: relative">
+                      <echarts2></echarts2>
+                    </div>
+                  </div>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div class="center_1">
+                  <div class="box">
+                    <div class="tit">赛事总数及各阶段数量</div>
+                    <echarts3></echarts3>
+                  </div>
+                  <div class="box">
+                    <div class="tit">数据统计</div>
+                    <echarts4></echarts4>
+                  </div>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </myMain>
+</template>
+
+<script setup>
+const selectMenu = inject('selectMenu')
+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'
+// 加载中
+const loading = ref(false)
+// 时间
+const formattedTime = ref('')
+// 请求
+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.png');
+  background-size: 100% 100%;
+  padding: 0px;
+  margin: 0px;
+  color: #fff;
+  font-family: '微软雅黑';
+  cursor: default; /* 将鼠标样式更改为箭头 */
+  /* CSS Document */
+  * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  li {
+    list-style-type: none;
+  }
+  i {
+    margin: 0px;
+    padding: 0px;
+    text-indent: 0px;
+  }
+  img {
+    border: none;
+    max-width: 100%;
+  }
+  a {
+    text-decoration: none;
+    color: #fff;
+  }
+  a.active,
+  a:focus {
+    outline: none !important;
+    text-decoration: none;
+  }
+  ol,
+  ul,
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    padding: 0;
+    margin: 0;
+  }
+  a:hover {
+    color: #06c;
+    text-decoration: none !important;
+  }
+  .clearfix:after,
+  .clearfix:before {
+    display: table;
+    content: ' ';
+  }
+  .clearfix:after {
+    clear: both;
+  }
+  .pulll_left {
+    float: left;
+  }
+  .pulll_right {
+    float: right;
+  }
+  i {
+    font-style: normal;
+  }
+  .text-w {
+    color: #ffe400;
+  }
+  .text-d {
+    color: #ff6316;
+  }
+  .text-s {
+    color: #14e144;
+  }
+  .text-b {
+    color: #07e5ff;
+  }
+
+  .head {
+    position: relative;
+    height: 4rem;
+    margin: 0 15px;
+  }
+  .head h1 {
+    text-align: center;
+    line-height: 4rem;
+    padding-right: 35px;
+    color: #daf9ff;
+  }
+  .head .menu ul {
+    font-size: 0;
+  }
+  .head .menu {
+    margin: 10px 0 0 0;
+  }
+
+  .head .menu li {
+    display: inline-block;
+    position: relative;
+    margin: 10px 15px;
+  }
+  .head .menu li a {
+    display: block;
+    font-size: 18px;
+    color: #fff;
+    line-height: 30px;
+    padding: 0 10px;
+  }
+  .head .time {
+    position: absolute;
+    right: 0;
+    line-height: 4rem;
+    top: 0;
+    color: #fff;
+  }
+
+  .menu li:before,
+  .menu li:after {
+    position: absolute;
+    width: 10px;
+    height: 5px;
+    opacity: 0.4;
+    content: '';
+    border-top: 2px solid #02a6b5;
+    top: -1px;
+    border-radius: 2px;
+  }
+  .menu li:before,
+  .menu li a:before {
+    border-left: 2px solid #02a6b5;
+    left: -1px;
+  }
+  .menu li:after,
+  .menu li a:after {
+    border-right: 2px solid #02a6b5;
+    right: -1px;
+  }
+  .menu li a {
+    position: relative;
+  }
+  .menu li a:before,
+  .menu li a:after {
+    position: absolute;
+    width: 10px;
+    height: 5px;
+    opacity: 0.4;
+    content: '';
+    border-bottom: 2px solid #02a6b5;
+    bottom: -1px;
+    border-radius: 2px;
+  }
+
+  .head .menu li a:hover {
+    color: #f4e925;
+  }
+  .menu li a:hover:before,
+  .menu li a:hover:after,
+  .menu li:hover:before,
+  .menu li:hover:after {
+    border-color: #f4e925;
+    opacity: 1;
+  }
+
+  .mainbox {
+    padding: 10px 10px 0 10px;
+  }
+  .nav1 {
+    margin-left: -6px;
+    margin-right: -6px;
+  }
+  .nav1 > li {
+    padding: 0 6px;
+    float: left;
+  }
+
+  .box {
+    border: 1px solid rgba(7, 118, 181, 0.5);
+    box-shadow: inset 0 0 10px rgba(7, 118, 181, 0.4);
+    margin-bottom: 12px;
+    position: relative;
+  }
+  .tit {
+    padding: 10px 10px 10px 25px;
+    border-bottom: 1px solid rgba(7, 118, 181, 0.7);
+    font-size: 16px;
+    font-weight: 500;
+    position: relative;
+  }
+  .tit:before,
+  .tit01:before {
+    position: absolute;
+    content: '';
+    width: 6px;
+    height: 6px;
+    background: rgba(22, 214, 255, 0.9);
+    box-shadow: 0 0 5px rgba(22, 214, 255, 0.9);
+    border-radius: 10px;
+    left: 10px;
+    top: 18px;
+  }
+
+  .tit:after,
+  .box:before {
+    width: 100%;
+    height: 1px;
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -1px;
+    background: linear-gradient(to right, #076ead, #4ba6e0, #076ead);
+    box-shadow: 0 0 5px rgba(131, 189, 227, 1);
+    opacity: 0.6;
+  }
+  .box:before {
+    top: -1px;
+  }
+
+  .boxnav {
+    padding: 0 10px;
+  }
+  .tit01 {
+    font-size: 16px;
+    font-weight: 500;
+    position: relative;
+    padding-left: 15px;
+  }
+  .tit01:before {
+    left: 3px;
+    top: 8px;
+  }
+
+  .mapc {
+    background: url('./images/bg3.png') no-repeat center center;
+    background-size: 100% 100%;
+  }
+  .map {
+    position: relative;
+    height: 100%;
+  }
+  .mapnav {
+    position: absolute;
+    z-index: 10;
+  }
+
+  .yqlist li {
+    float: left;
+    width: 50%;
+    padding: 7px 0;
+    text-align: center;
+  }
+  .yq {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 5px auto;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 25px;
+    font-family: electronicFont;
+    color: #fff32b;
+  }
+  .yqlist li span {
+    opacity: 0.6;
+    font-size: 14px;
+  }
+
+  .yq:before {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    content: '';
+    background: url('./images/img1.png') center center;
+    border-radius: 100px;
+    background-size: 100% 100%;
+    opacity: 0.3;
+    left: 0;
+    top: 0;
+    animation: myfirst2 15s infinite linear;
+  }
+
+  .yq:after {
+    position: absolute;
+    width: 86%;
+    background: url('./images/img2.png') center center;
+    border-radius: 100px;
+    background-size: 100% 100%;
+    opacity: 0.3;
+    height: 86%;
+    content: '';
+    left: 7%;
+    top: 7%;
+    animation: myfirst 15s infinite linear;
+  }
+
+  @keyframes myfirst {
+    to {
+      transform: rotate(-360deg);
+    }
+  }
+  @keyframes myfirst2 {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,98 @@
+<template>
+  <div ref="echarts1" class="echarts1"></div>
+</template>
+<style scoped lang="scss">
+.echarts1 {
+  height: 290px;
+  width: 100%;
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+const echarts1 = ref()
+onMounted(() => {
+  echarts1View()
+})
+function echarts1View() {
+  const myChart1 = echarts.init(echarts1.value)
+  var data = [683, 234, 234, 523, 345, 320, 280, 271, 254, 229, 210, 190, 182]
+  var titlename = [
+    '北京',
+    '上海',
+    '广州',
+    '郑州',
+    '武汉',
+    '南京',
+    '杭州',
+    '东莞',
+    '深圳',
+    '虎门',
+    '青岛',
+    '石家庄',
+    '安阳'
+  ]
+  var option1 = {
+    grid: {
+      left: '0',
+      top: '10',
+      right: '0',
+      bottom: '0%',
+      containLabel: true
+    },
+    xAxis: {
+      show: false
+    },
+    yAxis: [
+      {
+        show: true,
+        data: titlename,
+        inverse: true,
+        axisLine: { show: false },
+        splitLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: {
+          textStyle: {
+            color: '#fff'
+          }
+        }
+      },
+      {
+        show: false,
+        inverse: true,
+        data: data,
+        axisLabel: { textStyle: { color: '#fff' } },
+        axisLine: { show: false },
+        splitLine: { show: false },
+        axisTick: { show: false }
+      }
+    ],
+    series: [
+      {
+        name: '条',
+        type: 'bar',
+        yAxisIndex: 0,
+        data: data,
+        barWidth: 15,
+        itemStyle: {
+          normal: {
+            barBorderRadius: 50,
+            color: '#1089E7'
+          }
+        },
+        label: {
+          normal: {
+            show: true,
+            position: 'right',
+            formatter: '{c}',
+            textStyle: { color: 'rgba(255,255,255,.5)' }
+          }
+        }
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+</script>

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

@@ -0,0 +1,248 @@
+<template>
+  <div>
+    <div ref="echarts2" class="echarts2" style="height: 620px; width: 100%"></div>
+  </div>
+</template>
+<style scoped></style>
+<script setup>
+import * as echarts from 'echarts'
+import chinaJSON from '../json/china.json'
+const echarts2 = ref()
+onMounted(() => {
+  drawEcharts2()
+})
+
+function drawEcharts2() {
+  var myChart2 = echarts.init(echarts2.value)
+  echarts.registerMap('guangdong', chinaJSON) //注册可用的地图
+  myChart2.setOption({
+    series: [
+      {
+        type: 'map',
+        map: 'guangdong'
+      }
+    ]
+  })
+  var geoCoordMap = {
+    珠海市: [113.353986, 21.924979],
+    广州市: [113.480637, 23.125178],
+    湛江市: [110.264977, 21.274898],
+    茂名市: [110.919229, 21.659751],
+    阳江市: [111.825107, 21.859222],
+    云浮市: [112.044439, 22.629801],
+    肇庆市: [112.472529, 23.051546],
+    江门市: [112.894942, 22.090431],
+    中山市: [113.382391, 22.321113],
+    佛山市: [113.022717, 22.828762],
+    清远市: [113.051227, 23.685022],
+    韶关市: [113.601224, 24.820603],
+    河源市: [114.897802, 23.746266],
+    梅州市: [116.117582, 24.099112],
+    潮州市: [116.692301, 23.661701],
+    揭阳市: [116.255733, 23.143778],
+    汕头市: [116.708463, 22.87102],
+    汕尾市: [115.364238, 22.774485],
+    深圳市: [114.085947, 22.347],
+    东莞市: [113.746262, 22.746237],
+    惠州市: [114.412599, 23.079404]
+  }
+  var goData = [
+    {
+      name: '河源市',
+      value: 32
+    },
+    {
+      name: '湛江市',
+      value: 24
+    },
+    {
+      name: '韶关市',
+      value: 20
+    },
+    {
+      name: '汕尾市',
+      value: 18
+    },
+    {
+      name: '揭阳市',
+      value: 18
+    }
+  ]
+  var goTotal = 0 //计算总人数
+  goData.forEach(function (item, i) {
+    goTotal += item.value
+  })
+
+  var planePath = 'arrow'
+
+  var convertData = function (name, data) {
+    var res = []
+    for (var i = 0; i < data.length; i++) {
+      var fromCoord = geoCoordMap[name]
+      var toCoord = geoCoordMap[data[i].name]
+      if (fromCoord && toCoord) {
+        res.push({
+          //对换即可调整方向
+          coords: [fromCoord, toCoord]
+        })
+      }
+    }
+    return res
+  }
+  var series = []
+  ;[
+    ['广州市', goData]
+    // ['徐州', backData],
+  ].forEach(function (item, i) {
+    series.push(
+      {
+        name: item[0],
+        type: 'lines',
+        zlevel: 2,
+        //线特效配置
+        effect: {
+          show: true,
+          period: 6,
+          trailLength: 0.1,
+          symbol: planePath, //标记类型
+          symbolSize: 10
+        },
+        lineStyle: {
+          normal: {
+            width: 1,
+            opacity: 0.4,
+            curveness: 0.2, //弧线角度
+            color: 'rgba(255,255,255,.1)'
+          }
+        },
+        data: convertData(item[0], item[1])
+      },
+      {
+        //终点
+        name: item[0],
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        zlevel: 2,
+        label: {
+          normal: {
+            show: false,
+            color: 'rgba(255,255,255,.5)',
+            position: 'right',
+            formatter: '{b}'
+          }
+        },
+        symbol: 'circle',
+        //圆点大小
+        symbolSize: function (val) {
+          return (val[2] * 50) / goTotal
+        },
+        itemStyle: {
+          normal: {
+            show: true
+          }
+        },
+        data: item[1].map(function (dataItem) {
+          console.log(dataItem)
+          return {
+            name: dataItem.name,
+            value: geoCoordMap[dataItem.name].concat([dataItem.value])
+          }
+        })
+      },
+      {
+        //起点
+        name: 'item[0]',
+        type: 'scatter',
+        coordinateSystem: 'geo',
+        zlevel: 2,
+        label: {
+          normal: {
+            show: true,
+            position: 'right',
+            formatter: '{b}'
+          }
+        },
+        symbolSize: function () {
+          return 15
+        },
+        symbol: 'circle',
+
+        itemStyle: {
+          normal: {
+            show: true
+          }
+        },
+        data: [
+          {
+            name: item[0],
+            value: geoCoordMap[item[0]].concat([100])
+          }
+        ]
+      }
+    )
+  })
+
+  var option = {
+    //  backgroundColor: '#FDF7F2',
+    title: {
+      text: '业务覆盖',
+      subtext: '2024年数据',
+      left: 'center',
+      bottom: '15%',
+      textStyle: {
+        color: '#fff'
+      }
+    },
+
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}'
+    },
+    //线颜色及飞行轨道颜色
+    visualMap: {
+      show: false,
+      min: 0,
+      max: 100,
+      color: ['#fff']
+    },
+    //地图相关设置
+    geo: {
+      map: 'guangdong',
+      //视角缩放比例
+      zoom: 1,
+      //显示文本样式
+      label: {
+        normal: {
+          show: true,
+          textStyle: {
+            color: 'rgba(255,255,255,.3)'
+          }
+        },
+        emphasis: {
+          textStyle: {
+            color: '#fff'
+          }
+        }
+      },
+      //鼠标缩放和平移
+      roam: false,
+      itemStyle: {
+        normal: {
+          areaColor: '#4256ff',
+          borderColor: '#404a59'
+        },
+        emphasis: {
+          areaColor: '#2539f5'
+        }
+      }
+    },
+    series: series
+  }
+
+  myChart2.setOption(option)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+  // 使用刚指定的配置项和数据显示图表。
+}
+</script>

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

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <div ref="echarts3" class="echarts3" style="height: 260px; 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 = {
+    grid: {
+      left: '10',
+      top: '30',
+      right: '10',
+      bottom: '10',
+      containLabel: true
+    },
+    legend: {
+      top: 0,
+
+      textStyle: {
+        color: '#fff'
+      },
+
+      itemWidth: 10, // 设置宽度
+
+      itemHeight: 10 // 设置高度
+    },
+
+    tooltip: {
+      trigger: 'axis',
+
+      axisPointer: {
+        // 坐标轴指示器，坐标轴触发有效
+
+        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+      }
+    },
+
+    xAxis: {
+      type: 'category',
+
+      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+
+      axisTick: {
+        //---坐标轴 刻度
+
+        show: true //---是否显示
+      },
+
+      axisLine: {
+        //---坐标轴 轴线
+
+        show: true, //---是否显示
+
+        lineStyle: {
+          color: 'rgba(255,255,255,.1)',
+
+          width: 1,
+
+          type: 'dotted'
+        }
+      },
+
+      axisLabel: {
+        //X轴文字
+
+        textStyle: {
+          fontSize: 12,
+
+          color: '#fff'
+        }
+      }
+    },
+
+    yAxis: {
+      type: 'value',
+
+      splitLine: {
+        //分割线
+
+        show: true,
+
+        lineStyle: {
+          color: 'rgba(255,255,255,.1)',
+
+          width: 1,
+          type: 'dotted'
+        }
+      },
+
+      axisLabel: {
+        //Y轴刻度值
+
+        formatter: '{value}',
+
+        textStyle: {
+          fontSize: 12,
+
+          color: '#fff'
+        }
+      },
+
+      axisLine: {
+        //---坐标轴 轴线
+
+        show: false //---是否显示
+      }
+    },
+
+    series: [
+      {
+        name: '原方案',
+
+        type: 'bar',
+
+        data: [3, 7, 13, 9, 8, 3, 7, 4, 3, 7, 4, 2],
+
+        barWidth: 15,
+
+        barGap: 1, //柱子之间间距 //柱图宽度      两种情况都要设置，设置series 中对应数据柱形的itemStyle属性下的emphasis和normal的barBorderRadius属性初始化时候圆角  鼠标移上去圆角
+
+        itemStyle: {
+          normal: {
+            barBorderRadius: 50,
+            color: '#446ACF'
+          }
+        }
+      },
+      {
+        name: '建议方案',
+
+        type: 'bar',
+
+        data: [6, 2, 5, 6, 2, 5, 6, 2, 5, 11, 12, 5],
+
+        barWidth: 15, //柱图宽度
+
+        itemStyle: {
+          normal: {
+            //设置颜色的渐变
+            barBorderRadius: 50,
+            color: '#4fb69d'
+          }
+        }
+      }
+    ]
+  }
+  myChart3.setOption(option3)
+  window.addEventListener('resize', function () {
+    myChart3.resize()
+  })
+}
+</script>

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

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div ref="echarts4" class="echarts4" style="height: 270px; 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 = {
+    legend: {
+      orient: 'vertical',
+      itemWidth: 10,
+      itemHeight: 10,
+      textStyle: {
+        color: 'rgba(255,255,255,.5)'
+      },
+      top: '20%',
+      right: 30,
+      data: ['专家人数', '企业数量', '需求数量', '项目数量']
+    },
+    color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b} : {c} ({d}%)'
+    },
+
+    calculable: true,
+    series: [
+      {
+        type: 'pie',
+        radius: [20, 70],
+        center: ['35%', '50%'],
+        roseType: 'area',
+        data: [
+          { value: 300, name: '专家人数' },
+          { value: 200, name: '企业数量' },
+          { value: 205, name: '需求数量' },
+          { value: 180, name: '项目数量' }
+        ],
+        label: {
+          normal: {
+            formatter: function (param) {
+              return param.name + ':\n' + param.value + '\n'
+            }
+          }
+        },
+        labelLine: {
+          normal: {
+            length: 5,
+            length2: 15,
+            lineStyle: { width: 1 }
+          }
+        },
+
+        itemStyle: {
+          normal: {
+            shadowBlur: 30,
+            shadowColor: 'rgba(0, 0, 0, 0.4)'
+          }
+        }
+      }
+    ]
+  }
+  myChart4.setOption(option4)
+}
+</script>