智慧园区前端大屏
src/views/survey/components/box/unitContent.vue
@@ -2,14 +2,14 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-03-13 14:54:26
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-11-04 13:58:17
 * @LastEditTime: 2024-11-05 17:15:55
 * @FilePath: \bigScreen\src\views\survey\components\box\unitContent.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<script setup>
import publicContent from './publicContent.vue'
import { useEchartsResize } from 'hooks/useEchartsResize'
import { getEmergencySpaceStatistic } from '../../../../api/indParkInfo'
@@ -17,14 +17,6 @@
const curEcharts = ref(null)
let myEcharts = reactive(null)
onMounted(() => {
  nextTick(() => {
    myEcharts = $echarts.init(curEcharts.value)
    getEmergencySpace()
  })
})
function getEmergencySpace () {
  getEmergencySpaceStatistic().then(res => {
@@ -41,8 +33,21 @@
    myEcharts.setOption({
      legend: {
        orient: "vertical",
        left: "left",
        top: '5%',
        left: "5%",
        textStyle: {
          color: '#fff'
        }
      },
      grid: {
        top: '6%',
        left: '6%',
        right: '6%',
        bottom: '6%',
        containLabel: true
      },
      tooltip: {
        trigger: 'item'
      },
@@ -51,7 +56,8 @@
        {
          // name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          left: '10%',
          radius: ['30%', '60%'],
          // avoidLabelOverlap: false,
          // padAngle: 5,
          // itemStyle: {
@@ -80,26 +86,22 @@
  })
}
nextTick(() => {
  myEcharts = $echarts.init(curEcharts.value)
  getEmergencySpace()
})
const echartsResize = () => {
  myEcharts && myEcharts.resize()
}
useEchartsResize(echartsResize)
</script>
<template>
  <public-content>
    <template #content>
      <div class="unit-content">
        <div class="unit-content-echarts" ref="curEcharts">
  <div class="w100 h100" ref="curEcharts">
        </div>
      </div>
    </template>
  </public-content>
  </div>
</template>
<style lang="scss" scoped>
.unit-content {
  color: #fff;
}
.unit-content-echarts {
  height: 200px;
}
</style>
<style lang="scss" scoped></style>