| | |
| | | * @Author: shuishen 1109946754@qq.com |
| | | * @Date: 2024-11-04 16:32:04 |
| | | * @LastEditors: shuishen 1109946754@qq.com |
| | | * @LastEditTime: 2024-11-05 17:42:44 |
| | | * @LastEditTime: 2024-12-03 12:57:49 |
| | | * @FilePath: \bigScreen\src\views\survey\components\box\fireContent.vue |
| | | * @Description: |
| | | * |
| | |
| | | let $echarts = inject('echarts') |
| | | const curEcharts = ref(null) |
| | | |
| | | let myEcharts = reactive(null) |
| | | let myEcharts = reactive({ |
| | | chart: '' |
| | | }) |
| | | |
| | | let typeLevel = [ |
| | | { |
| | | name: '低', |
| | | name: '暂定', |
| | | itemStyle: { |
| | | color: '#31B5FF' |
| | | color: '#ADADAD' |
| | | } |
| | | }, |
| | | { |
| | | name: '一般', |
| | | itemStyle: { |
| | | color: '#FFC000' |
| | | color: '#FFC000' |
| | | } |
| | | }, |
| | | { |
| | | name: '较大', |
| | | itemStyle: { |
| | | |
| | | |
| | | color: '#F4090F' |
| | | } |
| | | }, |
| | |
| | | getRiskSourceStatistic().then(res => { |
| | | let data = res.data.data |
| | | let dataRsult = [] |
| | | var total = 0; |
| | | var total = 0 |
| | | data.forEach(item => { |
| | | dataRsult.push({ |
| | | name: item.riskLevel, |
| | | value: item.num, |
| | | itemStyle: typeLevel.find(i => i.name == item.riskLevel).itemStyle |
| | | }) |
| | | total = total + item.num; |
| | | total = total + item.num |
| | | }) |
| | | |
| | | myEcharts.setOption({ |
| | | myEcharts.chart.setOption({ |
| | | title: { |
| | | text: "总数", |
| | | subtext: String(total), |
| | |
| | | color: "#fff", |
| | | }, |
| | | textAlign: "center", |
| | | right: "43%", |
| | | left: "62%", |
| | | // right: "43%", |
| | | top: "36%", |
| | | }, |
| | | |
| | | legend: { |
| | | orient: "vertical", |
| | | top: '8%', |
| | | right: "8%", |
| | | top: "40%", |
| | | left: "5%", |
| | | textStyle: { |
| | | color: '#fff' |
| | | } |
| | | color: "#fff", |
| | | }, |
| | | }, |
| | | |
| | | grid: { |
| | |
| | | type: 'pie', |
| | | left: '-5%', |
| | | radius: ['45%', '75%'], |
| | | data: dataRsult |
| | | data: dataRsult, |
| | | left: "25%", |
| | | label: { |
| | | show: false, |
| | | }, |
| | | labelLine: { |
| | | show: false, |
| | | }, |
| | | } |
| | | ] |
| | | }) |
| | |
| | | } |
| | | |
| | | nextTick(() => { |
| | | myEcharts = $echarts.init(curEcharts.value) |
| | | myEcharts.chart = $echarts.init(curEcharts.value) |
| | | getRiskSource() |
| | | }) |
| | | |
| | | const echartsResize = () => { |
| | | myEcharts && myEcharts.resize() |
| | | myEcharts.chart && myEcharts.chart.resize() |
| | | } |
| | | |
| | | useEchartsResize(echartsResize) |
| | | |
| | | onUnmounted(() => { |
| | | if (myEcharts.chart) { |
| | | myEcharts.chart.clear() |
| | | myEcharts.chart.dispose() |
| | | |
| | | myEcharts.chart = null |
| | | } |
| | | }) |
| | | </script> |
| | | |
| | | <template> |