统计分析去掉点击效果

src/views/common/analyse.vue

@@ -42,47 +42,53 @@
 
 <script setup name="addressEdit">
 
-import { onBeforeUnmount } from 'vue';
-import util from "@/util/area";
-import {queryStatisticalData} from '@/api/enforce';
-import * as echarts from 'echarts';
-const { useCommon, useShopCard } = $globalStore;
-const router = useRouter();
-const route = useRoute();
-let queryaddressId = ref("");
-const data = reactive({
+    import {onBeforeUnmount} from 'vue';
+    import util from "@/util/area";
+    import {queryStatisticalData} from '@/api/enforce';
+    import * as echarts from 'echarts';
+
+    const {useCommon, useShopCard} = $globalStore;
+    const router = useRouter();
+    const route = useRoute();
+    let queryaddressId = ref("");
+    const data = reactive({
         searchResult: [],
         areaList: util.areaList,
         addressInfo: {},
         areaColumns: ["请选择", "请选择", "请选择"],
         allTotal: 0,
         complaintCount: 0
-});
+    });
 
-// 返回
-const goBack = () => {
+    // 返回
+    const goBack = () => {
         router.go(-1);
-};
+    };
 
-onBeforeUnmount(() => {
+    onBeforeUnmount(() => {
         // 当前路由不是首页，且用户确认离开时
         router.replace('/enforceHome'); // 替换到首页
-});
+    });
+
+    onUnmounted(() => {
+        console.log("=============销毁完毕=============")
+    });
 
-// 保存地址操作
-const onSave = () => {
-	router.replace({ name: "addressList" });
-};
+    // 保存地址操作
+    const onSave = () => {
+        router.replace({name: "addressList"});
+    };
 
-// 删除地址操作
-const onDelete = () => {
-	router.replace({ name: "addressList" });
-};
+    // 删除地址操作
+    const onDelete = () => {
+        router.replace({name: "addressList"});
+    };
 
-// 修改详细地址
-const onChangeDetail = () => {};
+    // 修改详细地址
+    const onChangeDetail = () => {
+    };
 
-const echartInit = (data,targetId) =>{
+    const echartInit = (data, targetId) => {
         var myChart = echarts.init(document.getElementById(targetId));
         // 指定图表的配置项和数据
         let option = {
@@ -93,6 +99,7 @@ const echartInit = (data,targetId) =>{
                 {
                     name: '统计图表',
                     type: 'pie',
+                    silent: true,   // 设置所有的点击事件为静默模式
                     radius: ['33%', '50%'],
                     avoidLabelOverlap: false,
                     itemStyle: {
@@ -126,15 +133,15 @@ const echartInit = (data,targetId) =>{
                     },
                     // ... 其他配置项
                     data: data,
-        color: ['#0038bb','#0047eb','#1c60ff','#3f78ff','#6592ff','#8aadff'],
+                    color: ['#0038bb', '#0047eb', '#1c60ff', '#3f78ff', '#6592ff', '#8aadff'],
                 }
             ]
         };
         // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
-};
+    };
 
-const initSchedule = (dataAll,targetId) =>{
+    const initSchedule = (dataAll, targetId) => {
         let _this = this;
         var myChartLine = echarts.init(document.getElementById(targetId));
         let myColor = ['#3C83FF']
@@ -183,7 +190,7 @@ const initSchedule = (dataAll,targetId) =>{
                 axisLabel: {
                     color: 'rgba(0,0,0,.7)',
                     fontSize: 14,
-        formatter: function(data) {
+                    formatter: function (data) {
                         var traceValue;
                         for (var i = 0; i < dataAll.dataX.length; i++) {
                             if (data === dataAll.dataX[i]) {
@@ -234,6 +241,7 @@ const initSchedule = (dataAll,targetId) =>{
                 {
                     name: '', //系列名称
                     type: 'bar', //柱状、条形图
+                    silent: true,   // 设置所有柱子的点击事件为静默模式
                     barWidth: 15, //柱条的宽度,默认自适应
                     data: dataAll.dataPercent, //系列中数据内容数组
                     label: { //图形上的文本标签
@@ -241,7 +249,7 @@ const initSchedule = (dataAll,targetId) =>{
                         position: 'right', //标签的位置
                         offset: [0, 40], //标签文字的偏移，此处表示向上偏移40
                         //formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
-          formatter: function(data) {
+                        formatter: function (data) {
                             //.toFixed(0)去掉小数位，如果为2就是保留两位小数
                             //let b = data.percent.toFixed(0) + "%";
                             //subText = b;
@@ -256,7 +264,7 @@ const initSchedule = (dataAll,targetId) =>{
                             barBorderRadius: 10, //柱条圆角半径,单位px.
                             //此处统一设置4个角的圆角大小;
                             //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
-            color: function(params) {
+                            color: function (params) {
                                 let num = myColor.length; //得到myColor颜色数组的长度
                                 return myColor[params.dataIndex % num]; //返回颜色数组中的一个对应的颜色值
                             },
@@ -268,12 +276,13 @@ const initSchedule = (dataAll,targetId) =>{
                 {
                     name: '',
                     type: 'bar',
+                    silent: true,   // 设置所有柱子的点击事件为静默模式
                     label: { //图形上的文本标签
                         show: true,
                         position: 'right', //标签的位置
                         offset: [0, 0], //标签文字的偏移，此处表示向上偏移40
                         //formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
-          formatter: function(data) {
+                        formatter: function (data) {
                             //.toFixed(0)去掉小数位，如果为2就是保留两位小数
                             var traceValue;
                             for (var i = 0; i < dataAll.dataX.length; i++) {
@@ -323,9 +332,9 @@ const initSchedule = (dataAll,targetId) =>{
             ]
         };
         myChartLine.setOption(option, true);
-};
+    };
 
-const initData = (dataX,dataY,dataPercent,targetId) => {
+    const initData = (dataX, dataY, dataPercent, targetId) => {
 
 
         // var dataX = ['生态环境检查', '卫生健康检查', '商务领域检查', '财务领域检查', '水务领域检查']
@@ -338,19 +347,19 @@ const initData = (dataX,dataY,dataPercent,targetId) => {
             dataSum: dataSum,
             dataPercent: dataPercent,
         }
-  initSchedule(data,targetId);
-};
+        initSchedule(data, targetId);
+    };
 
 
-onMounted(() => {
+    onMounted(() => {
 
         queryStatisticalData({
             "dataScopeId": useCommon.userId
-  },success =>{
+        }, success => {
             var arrData = [];
             var arrCompanyData = [];
-    var countTotal= 0;
-    var userTotal= 0;
+            var countTotal = 0;
+            var userTotal = 0;
             //执法类别参数
             var dataX = [];
             var dataY = [];
@@ -365,13 +374,13 @@ onMounted(() => {
 
             console.log(success.data.item)
 
-    success.data.item.forEach(res =>{
+            success.data.item.forEach(res => {
                 countTotal += res.total;
             })
-    success.data.lawEnforcer.forEach(res =>{
+            success.data.lawEnforcer.forEach(res => {
                 userTotal += res.total;
             })
-    success.data.item.forEach(res =>{
+            success.data.item.forEach(res => {
                 console.log(res)
                 arrData.push({
                     "name": res.lawEnforcementItem,
@@ -382,14 +391,14 @@ onMounted(() => {
                 dataPercent.push((res.total / countTotal * 100).toFixed(2));
             })
 
-    success.data.lawEnforcer.forEach(res =>{
+            success.data.lawEnforcer.forEach(res => {
                 console.log(res)
                 userDataX.push(res.lawEnforcer);
                 userDataY.push(res.total);
                 userDataPercent.push((res.total / userTotal * 100).toFixed(2));
             })
             console.log(userDataPercent)
-    success.data.enterpriseType.forEach(res =>{
+            success.data.enterpriseType.forEach(res => {
                 console.log(res)
                 arrCompanyData.push({
                     "name": res.dictLabel,
@@ -408,34 +417,37 @@ onMounted(() => {
             })
 
             nextTick(() => {
-      echartInit(arrData,'echartRing');
+                echartInit(arrData, 'echartRing');
                 //执法类别统计
-      initData(dataX,dataY,dataPercent,"echartLine");
+                initData(dataX, dataY, dataPercent, "echartLine");
                 //执法人员
-      initData(userDataX,userDataY,userDataPercent,"echartLineUser");
+                initData(userDataX, userDataY, userDataPercent, "echartLineUser");
                 //企业类型统计
-      echartInit(arrCompanyData,'echartLineCompany');
+                echartInit(arrCompanyData, 'echartLineCompany');
                 //本月案件数量
-      echartInit(arrCountData,'echarCount');
+                echartInit(arrCountData, 'echarCount');
             });
-  },error =>{})
+        }, error => {
+        })
 
-});
+    });
 </script>
 
 
 <style lang="less" scoped>
-.address_edit {
+    .address_edit {
         display: flex;
         flex-direction: column;
         height: 100%;
         overflow: hidden;
         background-color: #ebf3fb;
-}
-.warp_body {
+    }
+
+    .warp_body {
         background-image: linear-gradient(to bottom, #ebf3fb, transparent);
-}
-.countbox, .analybox {
+    }
+
+    .countbox, .analybox {
         position: relative;
         margin: 2% 3%;
         padding: 2% 0 0;
@@ -444,31 +456,32 @@ onMounted(() => {
         background: #fff url("../../assets/images/bg_count.jpg") no-repeat right;
         background-size: auto 100%;
         border-radius: 0.25rem;
-}
+    }
 
-.countbox span {
+    .countbox span {
         display: block;
         margin: 1.75% 4.5%;
         color: #999;
         font-size: 0.3rem;
         line-height: 1.25;
-}
+    }
 
-.countbox span.count-tit {
+    .countbox span.count-tit {
         color: #666;
         font-size: 0.45rem;
-}
+    }
 
-.countbox span.count-tot {
+    .countbox span.count-tot {
         font-size: 0.3rem;
+
         b {
             margin-right: 0.15rem;
             color: #085dff;
             font-size: 0.85rem;
         }
-}
+    }
 
-.countbox span.count-com {
+    .countbox span.count-com {
         float: right;
         margin-top: -0.1rem;
         font-size: 0.3rem;
@@ -477,28 +490,31 @@ onMounted(() => {
             font-size: 0.4rem;
             font-style: normal;
         }
-  b{
+
+        b {
             margin-right: 5px;
             color: #f00;
             font-size: 0.6rem;
         }
-}
+    }
 
-.analybox {
+    .analybox {
         height: auto;
         min-height: 7rem;
         background: #fff none;
+
         .title {
             margin: 2% 2.5%;
             font-size: 0.4rem;
             font-weight: 600;
         }
-}
-.chartbox {
+    }
+
+    .chartbox {
         margin: 2% 5% 3%;
         width: 90%;
         height: 7rem;
-}
+    }
 
 
 </style>