修改数据分析

package-lock.json

@@ -17,6 +17,7 @@
         "@wangeditor/editor-for-vue": "5.1.10",
         "animate.css": "^4.1.1",
         "ant-design-vue": "^4.0.8",
+        "aos": "^2.3.4",
         "axios": "^1.6.7",
         "dayjs": "^1.11.10",
         "default-passive-events": "^2.0.0",
@@ -1838,6 +1839,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/aos": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmmirror.com/aos/-/aos-2.3.4.tgz",
+      "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
+      "dependencies": {
+        "classlist-polyfill": "^1.0.3",
+        "lodash.debounce": "^4.0.6",
+        "lodash.throttle": "^4.0.1"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz",
@@ -2186,6 +2197,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
+    },
     "node_modules/claygl": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
@@ -8801,6 +8817,16 @@
         "picomatch": "^2.0.4"
       }
     },
+    "aos": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmmirror.com/aos/-/aos-2.3.4.tgz",
+      "integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
+      "requires": {
+        "classlist-polyfill": "^1.0.3",
+        "lodash.debounce": "^4.0.6",
+        "lodash.throttle": "^4.0.1"
+      }
+    },
     "argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/argparse/-/argparse-2.0.1.tgz",
@@ -9067,6 +9093,11 @@
         }
       }
     },
+    "classlist-polyfill": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmmirror.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
+      "integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
+    },
     "claygl": {
       "version": "1.3.0",
       "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "@wangeditor/editor-for-vue": "5.1.10",
     "animate.css": "^4.1.1",
     "ant-design-vue": "^4.0.8",
+    "aos": "^2.3.4",
     "axios": "^1.6.7",
     "dayjs": "^1.11.10",
     "default-passive-events": "^2.0.0",

src/main.js

@@ -27,14 +27,18 @@ import vue3TreeOrg from 'vue3-tree-org'
 import 'vue3-tree-org/lib/vue3-tree-org.css'
 
 import 'animate.css/animate.min.css'
+import AOS from 'aos'
+import 'aos/dist/aos.css'
 
 const app = createApp(App)
+const appAOS = new AOS.init({ disable: 'phone' })
 globalComponents(app)
 setupStore(app)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 app.use(router)
+app.use(appAOS)
 app.use(Antd)
 app.use(vue3TreeOrg)
 app.use(ElementPlus, { locale })

src/store/api/util.js

@@ -14,5 +14,25 @@ export const UtilStore = defineStore('util', () => {
     const res = await axios.$post(`/util/toTotal`, payload)
     return res
   }
-  return { toImport, toExport, toTotal }
+  const cstatistics = async (payload) => {
+    const res = await axios.$get(`/util/cstatistics`, payload)
+    return res
+  }
+  const sstatistics = async (payload) => {
+    const res = await axios.$get(`/util/sstatistics`, payload)
+    return res
+  }
+  const dstatistics = async (payload) => {
+    const res = await axios.$get(`/util/dstatistics`, payload)
+    return res
+  }
+  const pstatistics = async (payload) => {
+    const res = await axios.$get(`/util/pstatistics`, payload)
+    return res
+  }
+  const astatistics = async (payload) => {
+    const res = await axios.$get(`/util/astatistics`, payload)
+    return res
+  }
+  return { toImport, toExport, toTotal, cstatistics, sstatistics, dstatistics, pstatistics, astatistics }
 })

src/utils/animation.js

@@ -0,0 +1,27 @@
+// from 起始数字
+// to 最终数字
+// duration 延迟间隔(ms)
+// onProgress 更新回调函数
+export const useNumberAnimation = (options) => {
+  const { from, to, duration, onProgress } = options
+  let value = from
+  // 算出增长速度
+  const speed = (to - from) / duration
+  // 起始时间
+  const startTime = Date.now()
+  const run = () => {
+    //时间间隔
+    const t = Date.now() - startTime //当时间间隔大于延迟时间时终止
+    if (t >= duration) {
+      value = to
+      onProgress?.(value)
+      return
+    }
+    // 当前值 = 起始值 + 时间间隔 *增长速度
+    value = from + t * speed
+    onProgress?.(value)
+    // 继续执行
+    requestAnimationFrame(run)
+  }
+  run()
+}

src/views/brain/six/echarts1.vue

@@ -87,7 +87,7 @@ function echarts1View() {
         }),
         shading: 'lambert',
         label: {
-          fontSize: 16,
+          fontSize: 18,
           borderWidth: 1
         },
         emphasis: {

src/views/one/page.vue

@@ -5,7 +5,7 @@
       <div class="title_center">新闻资讯</div>
       <el-image class="image" :src="right" fit="fill" />
     </div>
-    <div class="one">
+    <div class="one" data-aos="fade-up" data-aos-duration="1000">
       <div class="one_left">
         <el-carousel height="680px">
           <el-carousel-item v-for="(item, index) in carouselList" :key="index">
@@ -43,40 +43,38 @@
         </div>
       </div>
     </div>
-    <div class="title">
-      <el-image class="image" :src="left" fit="fill" />
-      <div class="title_center">数据展示</div>
-      <el-image class="image" :src="right" fit="fill" />
-    </div>
-    <div class="two">
+    <div class="two" data-aos="fade-up" data-aos-duration="1000">
+      <div class="title">
+        <el-image class="image" :src="left" fit="fill" />
+        <div class="title_center">数据展示</div>
+        <el-image class="image" :src="right" fit="fill" />
+      </div>
       <div class="two_1">
         <div class="twoList" v-for="(item, index) in recordList" :key="index" @click="toSelect(item)">
           <div class="two_num">
-            <span>{{ item.num || 0 }}</span>
+            <span>{{ item.num || 0 }}+</span>
             <span>{{ item.unit || '' }}</span>
           </div>
           <div class="two_title">{{ item.name || '暂无名称' }}</div>
         </div>
       </div>
       <div class="two_2">
-        <div class="two_title">数据分析</div>
+        <div class="two_title">{{ recordInfo.name }}数据分析</div>
         <div class="two_content">
-          <div class="left">
-            <cecharts1></cecharts1>
-          </div>
-          <div class="right">
-            <cecharts2></cecharts2>
-          </div>
+          <cecharts1 v-if="recordInfo.id == '1'"></cecharts1>
+          <secharts1 v-if="recordInfo.id == '2'"></secharts1>
+          <decharts1 v-if="recordInfo.id == '3'"></decharts1>
+          <pecharts1 v-if="recordInfo.id == '4'"></pecharts1>
+          <aecharts1 v-if="recordInfo.id == '5'"></aecharts1>
         </div>
       </div>
     </div>
-
-    <div class="title">
-      <el-image class="image" :src="left" fit="fill" />
-      <div class="title_center">成果展示</div>
-      <el-image class="image" :src="right" fit="fill" />
-    </div>
-    <div class="thr">
+    <div class="thr" data-aos="fade-up" data-aos-duration="1000">
+      <div class="title">
+        <el-image class="image" :src="left" fit="fill" />
+        <div class="title_center">成果展示</div>
+        <el-image class="image" :src="right" fit="fill" />
+      </div>
       <div class="more">
         <div class="more_title" @click="toMore(2)">查看更多</div>
       </div>
@@ -94,12 +92,12 @@
         </div>
       </div>
     </div>
-    <div class="title">
-      <el-image class="image" :src="left" fit="fill" />
-      <div class="title_center">孵化体系</div>
-      <el-image class="image" :src="right" fit="fill" />
-    </div>
-    <div class="four">
+    <div class="four" data-aos="fade-up" data-aos-duration="1000">
+      <div class="title">
+        <el-image class="image" :src="left" fit="fill" />
+        <div class="title_center">孵化体系</div>
+        <el-image class="image" :src="right" fit="fill" />
+      </div>
       <div class="more">
         <div class="more_title" @click="toMore(1)">查看更多</div>
       </div>
@@ -161,6 +159,7 @@
 <script setup>
 import moment from 'moment'
 import { get } from 'lodash-es'
+import { useNumberAnimation } from '@/utils/animation'
 // 图片引入
 import left from '/images/top-left.png'
 import right from '/images/top-right.png'
@@ -168,8 +167,11 @@ import new_4 from '/images/new_4.png'
 import friend from '/images/friend.jpeg'
 import baseLogo from '/images/base.jpg'
 // 组件
-import cecharts1 from './parts/company/echarts1.vue'
-import cecharts2 from './parts/company/echarts2.vue'
+import cecharts1 from './parts/echarts1.vue'
+import secharts1 from './parts/echarts2.vue'
+import decharts1 from './parts/echarts3.vue'
+import pecharts1 from './parts/echarts4.vue'
+import aecharts1 from './parts/echarts5.vue'
 // 用户信息
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
@@ -187,11 +189,12 @@ const props = defineProps({
   list: { type: Array, default: () => [] }
 })
 
-const { carouselList, incubatorList } = toRefs(props)
+const { carouselList, incubatorList, recordList } = toRefs(props)
 
 const emits = defineEmits(['toActive'])
 
 const active = ref('0')
+const recordInfo = ref({})
 const newList = ref([
   { value: '0', label: '政策信息' },
   { value: '1', label: '新闻通知' },
@@ -254,12 +257,38 @@ const handleMousOut = (index) => {
 }
 // 选择数据分析
 const toSelect = (item) => {
-  console.log(item)
+  recordInfo.value = item
 }
-// 点击echarts
-const dataChange = (item) => {
-  console.log(item)
+// 请求
+onMounted(() => {
+  setTimeout(async () => {
+    await Animation()
+  }, 2000)
+})
+// 选择数据分析
+const Animation = () => {
+  if (recordList.value && recordList.value.length > 0) {
+    for (const val of recordList.value) {
+      useNumberAnimation({
+        from: 0,
+        to: val.num,
+        duration: 3000,
+        onProgress: (v) => {
+          if (v) val.num = v.toFixed(0)
+        }
+      })
+    }
+  }
 }
+watch(
+  recordList,
+  (item) => {
+    recordInfo.value = item[0]
+  },
+  {
+    deep: true
+  }
+)
 </script>
 <style scoped lang="scss">
 .page {
@@ -420,18 +449,15 @@ const dataChange = (item) => {
         color: #323232;
       }
       .two_content {
-        display: flex;
-        justify-content: space-between;
-        .left {
-          width: 50%;
-        }
-        .right {
-          width: 50%;
-        }
+        margin: 20px 0 0 0;
       }
     }
   }
   .thr {
+    background: #f1f6f9;
+    background-image: url(/images/con1-bg.png);
+    background-size: 100% 100%;
+    padding: 10px 0 0 0;
     .more {
       max-width: 1700px;
       margin: 0 auto 10px;
@@ -450,10 +476,7 @@ const dataChange = (item) => {
       }
     }
     .thr_1 {
-      background: #f1f6f9;
-      background-image: url(/images/con1-bg.png);
-      background-size: 100% 100%;
-      padding: 30px 0 10px;
+      padding: 10px 0 10px;
       .w_1700 {
         max-width: 1700px;
         margin: 0 auto;

src/views/one/parts/company/echarts1.vue

@@ -1,91 +0,0 @@
-<template>
-  <div ref="echarts1" class="echarts1"></div>
-</template>
-<style scoped lang="scss">
-.echarts1 {
-  height: 300px;
-  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: 260,
-      itemWidth: 10,
-      itemHeight: 10,
-      itemGap: 10,
-      textStyle: {
-        fontSize: 18
-      },
-      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/one/parts/company/echarts2.vue

@@ -1,91 +0,0 @@
-<template>
-  <div ref="echarts2" class="echarts2"></div>
-</template>
-<style scoped lang="scss">
-.echarts2 {
-  height: 300px;
-  width: 100%;
-}
-</style>
-<script setup>
-import * as echarts from 'echarts'
-const echarts2 = ref()
-onMounted(() => {
-  echarts2View()
-})
-function echarts2View() {
-  const myChart2 = echarts.init(echarts2.value)
-  const option2 = {
-    tooltip: {
-      trigger: 'item',
-      formatter: '{b} : {c} ({d}%)'
-    },
-    legend: {
-      right: 0,
-      top: 20,
-      height: 260,
-      itemWidth: 10,
-      itemHeight: 10,
-      itemGap: 10,
-      textStyle: {
-        fontSize: 18
-      },
-      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: '电子商务行业'
-          }
-        ]
-      }
-    ]
-  }
-  myChart2.setOption(option2)
-  window.addEventListener('resize', function () {
-    myChart2.resize()
-  })
-}
-</script>

src/views/one/parts/echarts1.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="echarts">
+    <div class="left">
+      <div ref="echarts1" class="echarts1"></div>
+    </div>
+    <div class="right">
+      <div ref="echarts2" class="echarts2"></div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  .left {
+    width: 50%;
+    .echarts1 {
+      height: 600px;
+      width: 100%;
+    }
+  }
+  .right {
+    width: 50%;
+    .echarts2 {
+      height: 600px;
+      width: 100%;
+    }
+  }
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+// 接口
+import { UtilStore } from '@/store/api/util'
+const utilStore = UtilStore()
+const info = ref({})
+const echarts1 = ref()
+const echarts2 = ref()
+onMounted(async () => {
+  await search()
+  await echarts1View()
+  await echarts2View()
+})
+const search = async () => {
+  let res = await utilStore.cstatistics()
+  if (res.errcode == '0') info.value = res.data
+}
+function echarts1View() {
+  const myChart1 = echarts.init(echarts1.value)
+  const option1 = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b} : {c} ({d}%)'
+    },
+    legend: {
+      right: 0,
+      top: 20,
+      height: 600,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 10,
+      textStyle: {
+        fontSize: 18
+      },
+      orient: 'vertical',
+      data: info.value.one.nameList
+    },
+    calculable: true,
+    series: [
+      {
+        name: '企业行业数据分析',
+        color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262', '#c25775', '#00b7be'],
+        type: 'pie',
+        radius: [30, 100],
+        center: ['25%', '70%'],
+        roseType: 'radius',
+        label: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        lableLine: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        data: info.value.one.list
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+function echarts2View() {
+  var myChart2 = echarts.init(echarts2.value)
+  var option2 = {
+    tooltip: {
+      // 鼠标悬浮提示数据
+      trigger: 'axis',
+      borderWidth: 15,
+      textStyle: {
+        // 文字提示样式
+        fontSize: '16'
+      },
+      axisPointer: {
+        // 坐标轴虚线
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '18%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          fontSize: '14'
+        }
+      },
+      data: info.value.two.nameList
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          fontSize: '14'
+        }
+      }
+    },
+    series: [
+      {
+        data: info.value.two.list,
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        itemStyle: {
+          normal: {
+            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
+            borderRadius: [12, 12, 0, 0],
+            /*--------设置柱形图渐变色 -------------*/
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(0,244,255,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,77,167,1)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  option2 && myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+</script>

src/views/one/parts/echarts2.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="echarts">
+    <div class="left">
+      <div ref="echarts1" class="echarts1"></div>
+    </div>
+    <div class="right">
+      <div ref="echarts2" class="echarts2"></div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  .left {
+    width: 50%;
+    .echarts1 {
+      height: 600px;
+      width: 100%;
+    }
+  }
+  .right {
+    width: 50%;
+    .echarts2 {
+      height: 600px;
+      width: 100%;
+    }
+  }
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+// 接口
+import { UtilStore } from '@/store/api/util'
+const utilStore = UtilStore()
+const info = ref({})
+const echarts1 = ref()
+const echarts2 = ref()
+onMounted(async () => {
+  await search()
+  await echarts1View()
+  await echarts2View()
+})
+const search = async () => {
+  let res = await utilStore.sstatistics()
+  if (res.errcode == '0') info.value = res.data
+}
+function echarts1View() {
+  const myChart1 = echarts.init(echarts1.value)
+  const option1 = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b} : {c} ({d}%)'
+    },
+    legend: {
+      right: 0,
+      top: 20,
+      height: 600,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 10,
+      textStyle: {
+        fontSize: 18
+      },
+      orient: 'vertical',
+      data: info.value.one.nameList
+    },
+    calculable: true,
+    series: [
+      {
+        name: '企业行业数据分析',
+        color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262', '#c25775', '#00b7be'],
+        type: 'pie',
+        radius: [30, 100],
+        center: ['25%', '70%'],
+        roseType: 'radius',
+        label: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        lableLine: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        data: info.value.one.list
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+function echarts2View() {
+  var myChart2 = echarts.init(echarts2.value)
+  var option2 = {
+    tooltip: {
+      // 鼠标悬浮提示数据
+      trigger: 'axis',
+      borderWidth: 15,
+      textStyle: {
+        // 文字提示样式
+        fontSize: '16'
+      },
+      axisPointer: {
+        // 坐标轴虚线
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '18%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          fontSize: '14'
+        }
+      },
+      data: info.value.two.nameList
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          fontSize: '14'
+        }
+      }
+    },
+    series: [
+      {
+        data: info.value.two.list,
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        itemStyle: {
+          normal: {
+            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
+            borderRadius: [12, 12, 0, 0],
+            /*--------设置柱形图渐变色 -------------*/
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(0,244,255,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,77,167,1)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  option2 && myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+</script>

src/views/one/parts/echarts3.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="echarts">
+    <div class="left">
+      <div ref="echarts1" class="echarts1"></div>
+    </div>
+    <div class="right">
+      <div ref="echarts2" class="echarts2"></div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  .left {
+    width: 50%;
+    .echarts1 {
+      height: 600px;
+      width: 100%;
+    }
+  }
+  .right {
+    width: 50%;
+    .echarts2 {
+      height: 600px;
+      width: 100%;
+    }
+  }
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+// 接口
+import { UtilStore } from '@/store/api/util'
+const utilStore = UtilStore()
+const info = ref({})
+const echarts1 = ref()
+const echarts2 = ref()
+onMounted(async () => {
+  await search()
+  await echarts1View()
+  await echarts2View()
+})
+const search = async () => {
+  let res = await utilStore.dstatistics()
+  if (res.errcode == '0') info.value = res.data
+}
+function echarts1View() {
+  const myChart1 = echarts.init(echarts1.value)
+  const option1 = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b} : {c} ({d}%)'
+    },
+    legend: {
+      right: 0,
+      top: 20,
+      height: 600,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 10,
+      textStyle: {
+        fontSize: 18
+      },
+      orient: 'vertical',
+      data: info.value.one.nameList
+    },
+    calculable: true,
+    series: [
+      {
+        name: '企业行业数据分析',
+        color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262', '#c25775', '#00b7be'],
+        type: 'pie',
+        radius: [30, 100],
+        center: ['25%', '70%'],
+        roseType: 'radius',
+        label: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        lableLine: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        data: info.value.one.list
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+function echarts2View() {
+  var myChart2 = echarts.init(echarts2.value)
+  var option2 = {
+    tooltip: {
+      // 鼠标悬浮提示数据
+      trigger: 'axis',
+      borderWidth: 15,
+      textStyle: {
+        // 文字提示样式
+        fontSize: '16'
+      },
+      axisPointer: {
+        // 坐标轴虚线
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '18%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          fontSize: '14'
+        }
+      },
+      data: info.value.two.nameList
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          fontSize: '14'
+        }
+      }
+    },
+    series: [
+      {
+        data: info.value.two.list,
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        itemStyle: {
+          normal: {
+            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
+            borderRadius: [12, 12, 0, 0],
+            /*--------设置柱形图渐变色 -------------*/
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(0,244,255,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,77,167,1)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  option2 && myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+</script>

src/views/one/parts/echarts4.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="echarts">
+    <div class="left">
+      <div ref="echarts1" class="echarts1"></div>
+    </div>
+    <div class="right">
+      <div ref="echarts2" class="echarts2"></div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  .left {
+    width: 50%;
+    .echarts1 {
+      height: 600px;
+      width: 100%;
+    }
+  }
+  .right {
+    width: 50%;
+    .echarts2 {
+      height: 600px;
+      width: 100%;
+    }
+  }
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+// 接口
+import { UtilStore } from '@/store/api/util'
+const utilStore = UtilStore()
+const info = ref({})
+const echarts1 = ref()
+const echarts2 = ref()
+onMounted(async () => {
+  await search()
+  await echarts1View()
+  await echarts2View()
+})
+const search = async () => {
+  let res = await utilStore.pstatistics()
+  if (res.errcode == '0') info.value = res.data
+}
+function echarts1View() {
+  const myChart1 = echarts.init(echarts1.value)
+  const option1 = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b} : {c} ({d}%)'
+    },
+    legend: {
+      right: 0,
+      top: 20,
+      height: 600,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 10,
+      textStyle: {
+        fontSize: 18
+      },
+      orient: 'vertical',
+      data: info.value.one.nameList
+    },
+    calculable: true,
+    series: [
+      {
+        name: '企业行业数据分析',
+        color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262', '#c25775', '#00b7be'],
+        type: 'pie',
+        radius: [30, 100],
+        center: ['25%', '70%'],
+        roseType: 'radius',
+        label: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        lableLine: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        data: info.value.one.list
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+function echarts2View() {
+  var myChart2 = echarts.init(echarts2.value)
+  var option2 = {
+    tooltip: {
+      // 鼠标悬浮提示数据
+      trigger: 'axis',
+      borderWidth: 15,
+      textStyle: {
+        // 文字提示样式
+        fontSize: '16'
+      },
+      axisPointer: {
+        // 坐标轴虚线
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '18%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          fontSize: '14'
+        }
+      },
+      data: info.value.two.nameList
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          fontSize: '14'
+        }
+      }
+    },
+    series: [
+      {
+        data: info.value.two.list,
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        itemStyle: {
+          normal: {
+            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
+            borderRadius: [12, 12, 0, 0],
+            /*--------设置柱形图渐变色 -------------*/
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(0,244,255,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,77,167,1)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  option2 && myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+</script>

src/views/one/parts/echarts5.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="echarts">
+    <div class="left">
+      <div ref="echarts1" class="echarts1"></div>
+    </div>
+    <div class="right">
+      <div ref="echarts2" class="echarts2"></div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+.echarts {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  .left {
+    width: 50%;
+    .echarts1 {
+      height: 600px;
+      width: 100%;
+    }
+  }
+  .right {
+    width: 50%;
+    .echarts2 {
+      height: 600px;
+      width: 100%;
+    }
+  }
+}
+</style>
+<script setup>
+import * as echarts from 'echarts'
+// 接口
+import { UtilStore } from '@/store/api/util'
+const utilStore = UtilStore()
+const info = ref({})
+const echarts1 = ref()
+const echarts2 = ref()
+onMounted(async () => {
+  await search()
+  await echarts1View()
+  await echarts2View()
+})
+const search = async () => {
+  let res = await utilStore.astatistics()
+  if (res.errcode == '0') info.value = res.data
+}
+function echarts1View() {
+  const myChart1 = echarts.init(echarts1.value)
+  const option1 = {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b} : {c} ({d}%)'
+    },
+    legend: {
+      right: 0,
+      top: 20,
+      height: 600,
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 10,
+      textStyle: {
+        fontSize: 18
+      },
+      orient: 'vertical',
+      data: info.value.one.nameList
+    },
+    calculable: true,
+    series: [
+      {
+        name: '企业行业数据分析',
+        color: ['#62c98d', '#2f89cf', '#4cb9cf', '#53b666', '#62c98d', '#205acf', '#c9c862', '#c98b62', '#c962b9', '#7562c9', '#c96262', '#c25775', '#00b7be'],
+        type: 'pie',
+        radius: [30, 100],
+        center: ['25%', '70%'],
+        roseType: 'radius',
+        label: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        lableLine: {
+          normal: {
+            show: true
+          },
+          emphasis: {
+            show: true
+          }
+        },
+        data: info.value.one.list
+      }
+    ]
+  }
+  myChart1.setOption(option1)
+  window.addEventListener('resize', function () {
+    myChart1.resize()
+  })
+}
+function echarts2View() {
+  var myChart2 = echarts.init(echarts2.value)
+  var option2 = {
+    tooltip: {
+      // 鼠标悬浮提示数据
+      trigger: 'axis',
+      borderWidth: 15,
+      textStyle: {
+        // 文字提示样式
+        fontSize: '16'
+      },
+      axisPointer: {
+        // 坐标轴虚线
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+
+    // },
+    grid: {
+      // 控制图表的位置
+      left: '5%',
+      right: '5%',
+      top: '18%',
+      bottom: '5%',
+      containLabel: true
+    },
+    xAxis: {
+      axisLabel: {
+        // X轴线 标签修改
+        textStyle: {
+          fontSize: '14'
+        }
+      },
+      data: info.value.two.nameList
+    },
+    yAxis: {
+      axisLabel: {
+        // y轴线 标签修改
+        textStyle: {
+          fontSize: '14'
+        }
+      }
+    },
+    series: [
+      {
+        data: info.value.two.list,
+        type: 'bar',
+        barWidth: '48%', //调整柱状图宽度
+        itemStyle: {
+          normal: {
+            /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
+            borderRadius: [12, 12, 0, 0],
+            /*--------设置柱形图渐变色 -------------*/
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(0,244,255,1)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(0,77,167,1)'
+              }
+            ])
+          }
+        }
+      }
+    ]
+  }
+  option2 && myChart2.setOption(option2)
+  window.addEventListener('resize', function () {
+    myChart2.resize()
+  })
+}
+</script>

src/views/thr/demand.vue

@@ -195,7 +195,6 @@ const sizeChange = (limits) => {
           display: block;
           margin: 0 auto;
           width: 90px;
-          height: 28px;
           text-align: center;
           line-height: 28px;
           border-radius: 28px;

src/views/thr/supply.vue

@@ -186,7 +186,6 @@ const sizeChange = (limits) => {
           display: block;
           margin: 0 auto;
           width: 90px;
-          height: 28px;
           text-align: center;
           line-height: 28px;
           border-radius: 28px;