This commit is contained in:
2026-01-31 16:48:47 +08:00
parent 2cc924d091
commit fa4b36bd8c
5 changed files with 25 additions and 43 deletions

View File

@ -21,7 +21,7 @@ import XxhjCount from './xxhjCount.vue'
import QygktjCount from './qygktjCount.vue' import QygktjCount from './qygktjCount.vue'
import { ref } from "vue"; import { ref } from "vue";
const butList=ref(["情报统计分析","预警统计",'全域管控统计','信息汇聚统计']) const butList=ref(["情报统计分析","预警统计",'全域管控统计','信息汇聚统计'])
const qh = ref('情报统计分析') const qh = ref('预警统计')
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<div class="echratsBox" v-loading="loading"> <div class="echratsBox" v-loading="loading">
<DbarEcharts echartsId="bar3DChart" :key="ketcount" :data="obj.cnList" @click="handleClick" /> <DbarEcharts echartsId="bar3DChart" :rotate="25" :key="ketcount" :data="obj.cnList" @click="handleClick" />
</div> </div>
</li> </li>
<li class="cnt-item"> <li class="cnt-item">
@ -58,7 +58,7 @@
<div class="title">7类重点人员预警统计</div> <div class="title">7类重点人员预警统计</div>
</div> </div>
<div class="echratsBox"> <div class="echratsBox">
<LineEcharts echartsId="seventTypeChart" color="#333333" :data="obj.sevenList" /> <LineEcharts echartsId="seventTypeChart" color="#333333" :data="obj.sevenList" name="预警数量" />
</div> </div>
</li> </li>
<li class="cnt-item"> <li class="cnt-item">
@ -160,6 +160,7 @@ const handle_yjfl = async () =>{
const handleClick = async (val) =>{ const handleClick = async (val) =>{
// 当前部门是派出所 bb // 当前部门是派出所 bb
if(userInfo?.deptLevel?.startsWith('4')) return; if(userInfo?.deptLevel?.startsWith('4')) return;
if(val.includes('派出所')) return;
let info = obj.cnList.list.find(i => i.label === val); let info = obj.cnList.list.find(i => i.label === val);
let params = {...formSearch.value } let params = {...formSearch.value }
params.ssbmdm = info.ssbmdm; params.ssbmdm = info.ssbmdm;
@ -324,7 +325,7 @@ const tabHeightFn = () => {
justify-content: space-between; justify-content: space-between;
align-content: space-between; align-content: space-between;
margin-top: 10px; margin-top: 10px;
overflow: hidden; // overflow: hidden;
.cnt-item{ .cnt-item{
width: 49.8%; width: 49.8%;
height: 49.5%; height: 49.5%;
@ -381,7 +382,7 @@ const tabHeightFn = () => {
} }
.echratsBox{ .echratsBox{
height: calc(100% - 40px); height: calc(100% - 40px);
overflow: hidden; /* overflow: hidden; */
} }
} }
} }

View File

@ -12,6 +12,10 @@ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: () => { } default: () => { }
},
rotate: {
type: Number,
default: 0
} }
}); });
const emit = defineEmits(['click']); const emit = defineEmits(['click']);
@ -108,7 +112,7 @@ function chartFn() {
top: '15%', top: '15%',
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '15%', bottom: '0%',
containLabel: true containLabel: true
}, },
tooltip: { tooltip: {
@ -140,7 +144,8 @@ function chartFn() {
}, },
axisLabel: { axisLabel: {
interval: 0, // 控制标签的显示间隔0 表示全部显示,可以根据需要调整为其他值,例如 1 表示每隔一个显示一个标签。 interval: 0, // 控制标签的显示间隔0 表示全部显示,可以根据需要调整为其他值,例如 1 表示每隔一个显示一个标签。
color: '#666666' color: '#666666',
rotate: props.rotate || 0,
} }
}, },
yAxis: { yAxis: {

View File

@ -3,7 +3,7 @@
</template> </template>
<script setup> <script setup>
import * as echarts from "echarts"; import * as echarts from "echarts";
import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue"; import { defineProps, watch, nextTick } from "vue";
const props = defineProps({ const props = defineProps({
echartsId:{ echartsId:{
type:String, type:String,
@ -18,25 +18,14 @@ const props = defineProps({
default:[] default:[]
} }
}); });
// 监听数据变化
// 保存echarts实例 watch(()=>props.data,val=>{
const myChart = ref(null); nextTick(()=>{ chartFn(val) })
},{immediate:true,deep:true})
// 定义resize处理函数
const handleResize = () => {
if (myChart.value) {
myChart.value.resize();
}
};
function chartFn() { function chartFn() {
// 如果已有实例,先销毁
if (myChart.value) {
myChart.value.dispose();
}
// 创建新实例 // 创建新实例
myChart.value = echarts.init(document.getElementById(props.echartsId)); let myChart = echarts.init(document.getElementById(props.echartsId));
var option = { var option = {
grid: { grid: {
top: "8%", top: "8%",
@ -86,6 +75,7 @@ function chartFn() {
}, },
series: [ series: [
{ {
name: props.name,
type: "line", type: "line",
smooth:true, smooth:true,
showSymbol:false, showSymbol:false,
@ -115,28 +105,14 @@ function chartFn() {
} }
] ]
}; };
option && myChart.value.setOption(option); option && myChart.setOption(option);
window.addEventListener('resize',function(){
myChart.resize();
})
} }
// 监听数据变化
watch(()=>props.data,val=>{
nextTick(()=>{ chartFn() })
},{immediate:true,deep:true})
// 组件挂载时初始化图表并添加事件监听
onMounted(()=>{
chartFn();
window.addEventListener('resize', handleResize);
});
// 组件卸载时清理资源
onUnmounted(()=>{
if (myChart.value) {
myChart.value.dispose();
myChart.value = null;
}
window.removeEventListener('resize', handleResize);
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>