更新

src/views/backOfficeSystem/ResearchJudgment/InformationFlows/ReportStatisticalAnalysis/index.vue

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

src/views/backOfficeSystem/ResearchJudgment/InformationFlows/ReportStatisticalAnalysis/yjCount.vue

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

src/views/home/echarts/3DbarEcharts.vue

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

src/views/home/echarts/lineEcharts.vue

@@ -3,7 +3,7 @@
 </template>
 <script setup>
 import * as echarts from "echarts";
-import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
+import { defineProps,  watch, nextTick } from "vue";
 const props = defineProps({
   echartsId:{
     type:String,
@@ -18,25 +18,14 @@ const props = defineProps({
     default:[]
   }
 });
-
-// 保存echarts实例
-const myChart = ref(null);
-
-// 定义resize处理函数
-const handleResize = () => {
-  if (myChart.value) {
-    myChart.value.resize();
-  }
-};
+// 监听数据变化
+watch(()=>props.data,val=>{
+  nextTick(()=>{ chartFn(val) })
+},{immediate:true,deep:true})
 
 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 = {
     grid: {
       top: "8%",
@@ -86,6 +75,7 @@ function chartFn() {
     },
     series: [
       {
+        name: props.name,
         type: "line",
         smooth:true,
         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>
 
 <style lang="scss" scoped>

src/views/home/echarts/moreLineEcharts.vue

@@ -100,7 +100,7 @@ function chartFn(series) {
       axisTick: { alignWithLabel: true },
       axisLine: { show: false },
       axisLabel: {
-           rotate:props.rotate, // 设置标签旋转角度为45度
+        rotate:props.rotate, // 设置标签旋转角度为45度
         show: true,
         color: props.data.labelColor || "#fff",
         interval: props.data.interval || 0, // 强制显示所有标签