| | |
| | | |
| | | <!-- |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-11-04 16:32:04 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-04 16:32:58 |
| | | * @FilePath: \bigScreen\src\views\survey\components\box\fireContent.vue |
| | | * @Description: |
| | | * |
| | | * Copyright (c) 2024 by shuishen, All Rights Reserved. |
| | | --> |
| | | <script setup> |
| | | // import publicContent from './publicContent.vue' |
| | | |
| | | import publicContent from './publicContent.vue' |
| | | |
| | | import { getRiskSourceStatistic } from '../../../../api/indParkInfo' |
| | | |
| | |
| | | let myEcharts = reactive(null) |
| | | |
| | | onMounted(() => { |
| | | myEcharts = $echarts.init(curEcharts.value) |
| | | getRiskSource() |
| | | myEcharts = $echarts.init(curEcharts.value) |
| | | getRiskSource() |
| | | |
| | | }) |
| | | |
| | | |
| | | function getRiskSource() { |
| | | getRiskSourceStatistic().then(res => { |
| | | let xaxis_data = [] |
| | | let yaxis_data = [] |
| | | res.data.data.forEach(element => { |
| | | xaxis_data.push(element.riskLevel) |
| | | yaxis_data.push(element.num) |
| | | }); |
| | | myEcharts.setOption({ |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | } |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | containLabel: true |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | data: xaxis_data, |
| | | axisTick: { |
| | | alignWithLabel: true |
| | | } |
| | | } |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | type: 'value' |
| | | } |
| | | ], |
| | | series: [ |
| | | { |
| | | name: 'Direct', |
| | | type: 'bar', |
| | | barWidth: '30%', |
| | | data: yaxis_data |
| | | } |
| | | ] |
| | | }) |
| | | function getRiskSource () { |
| | | getRiskSourceStatistic().then(res => { |
| | | let xaxis_data = [] |
| | | let yaxis_data = [] |
| | | res.data.data.forEach(element => { |
| | | xaxis_data.push(element.riskLevel) |
| | | yaxis_data.push(element.num) |
| | | }) |
| | | myEcharts.setOption({ |
| | | tooltip: { |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | } |
| | | }, |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | containLabel: true |
| | | }, |
| | | xAxis: [ |
| | | { |
| | | type: 'category', |
| | | data: xaxis_data, |
| | | axisTick: { |
| | | alignWithLabel: true |
| | | } |
| | | } |
| | | ], |
| | | yAxis: [ |
| | | { |
| | | type: 'value' |
| | | } |
| | | ], |
| | | series: [ |
| | | { |
| | | name: 'Direct', |
| | | type: 'bar', |
| | | barWidth: '30%', |
| | | data: yaxis_data |
| | | } |
| | | ] |
| | | }) |
| | | }) |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <!-- <public-content> |
| | | <template #content> --> |
| | | <div class="fireContent-box"> |
| | | <public-content> |
| | | <template #content> |
| | | <div class="fireContent-box"> |
| | | |
| | | <div> |
| | | <div class="fire-content-echarts" ref="curEcharts"> |
| | | <div class="fire-content-echarts" ref="curEcharts"> |
| | | |
| | | |
| | | </div> |
| | | </div> |
| | | |
| | | </div> |
| | | |
| | | </div> |
| | | <!-- </template> |
| | | </public-content> --> |
| | | </div> |
| | | </template> |
| | | </public-content> |
| | | </template> |
| | | |
| | | <style lang="scss" scoped> |
| | | .fireContent-box { |
| | | color: #fff; |
| | | color: #fff; |
| | | } |
| | | |
| | | .fire-content-echarts { |
| | | height: 200px; |
| | | height: 200px; |
| | | } |
| | | </style> |