| | |
| | | * @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' |
| | | |
| | |
| | | const curEcharts = ref(null) |
| | | |
| | | let myEcharts = reactive(null) |
| | | |
| | | onMounted(() => { |
| | | nextTick(() => { |
| | | myEcharts = $echarts.init(curEcharts.value) |
| | | getEmergencySpace() |
| | | |
| | | }) |
| | | }) |
| | | |
| | | function getEmergencySpace () { |
| | | getEmergencySpaceStatistic().then(res => { |
| | |
| | | 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' |
| | | }, |
| | |
| | | { |
| | | // name: 'Access From', |
| | | type: 'pie', |
| | | radius: ['40%', '70%'], |
| | | left: '10%', |
| | | radius: ['30%', '60%'], |
| | | // avoidLabelOverlap: false, |
| | | // padAngle: 5, |
| | | // itemStyle: { |
| | |
| | | }) |
| | | } |
| | | |
| | | 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> |