更新大屏

src/views/home/model/qbfkCount.vue

@@ -3,152 +3,34 @@
     <span class="title">情报反馈统计</span>
   </div> 
   <div class="comom-cnt">
-    <div id="qbfk" class="qbfkBox" style="width: 100%; height: 100%"></div>
+    <pieEcharts echartsId='qbfk' :data="countData"></pieEcharts>
+    <!-- <div id="qbfk" class="qbfkBox" style="width: 100%; height: 100%"></div> -->
   </div>
 </template>
 
 <script setup>
+import pieEcharts from "@/views/home/echarts/pieEcharts.vue";
+import { qcckPost } from "@/api/qcckApi.js";
 import { ref, onMounted } from 'vue';
-import * as echarts from 'echarts';
-import 'echarts-gl';
-
-const initChart = () => {
-  const chartDom = document.getElementById('qbfk');
-  const myChart = echarts.init(chartDom);
-  
-  const option = {
-    backgroundColor: 'transparent',
-    tooltip: {
-      trigger: 'item',
-      formatter: '{a} <br/>{b}: {c} ({d}%)',
-      backgroundColor: 'rgba(0,0,0,0.7)',
-      borderColor: '#0C2E5A',
-      textStyle: {
-        color: '#fff'
-      }
-    },
-    legend: {
-      top: 'middle',
-      right: '5%',
-      orient: 'vertical',
-      itemGap: 20,
-      textStyle: {
-        color: '#fff',
-        fontSize: 14
-      },
-      itemWidth: 15,
-      itemHeight: 15,
-      icon: 'roundRect',
-      formatter: function(name) {
-        const data = option.series[0].data;
-        const target = data.find(item => item.name === name);
-        if (target) {
-          return `${name}  ${target.value}  ${(target.value / 50 * 100).toFixed(0)}%`;
-        }
-        return name;
-      }
-    },
-    series: [
-      {
-        name: '情报反馈统计',
-        type: 'pie',
-        radius: ['40%', '75%'],
-        center: ['30%', '50%'],
-        startAngle: 90,
-        zlevel: 10,
-        itemStyle: {
-          borderRadius: 10,
-          borderWidth: 2,
-          borderColor: '#0C2E5A'
-        },
-        selectedMode: 'single',
-        selectedOffset: 30,
-        animation: true,
-        animationType: 'scale',
-        animationEasing: 'elasticOut',
-        animationDelay: function (idx) {
-          return Math.random() * 200;
-        },
-        label: {
-          show: false,
-        },
-        labelLine: {
-          show: false,
-        },
-        itemStyle: {
-          borderWidth: 2,
-          borderColor: '#0C2E5A',
-          opacity: 0.8,
-          shadowBlur: 20,
-          shadowColor: 'rgba(0,0,0,0.5)'
-        },
-        data: [
-          { 
-            value: 18, 
-            name: '实反馈', 
-            itemStyle: { 
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#FF6B9A' },
-                { offset: 1, color: '#FF4B7A' }
-              ])
-            } 
-          },
-          { 
-            value: 13, 
-            name: '超时反馈', 
-            itemStyle: { 
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#FFAA33' },
-                { offset: 1, color: '#FF8A00' }
-              ])
-            } 
-          },
-          { 
-            value: 17, 
-            name: '处置下发', 
-            itemStyle: { 
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#FFE699' },
-                { offset: 1, color: '#FFD666' }
-              ])
-            } 
-          },
-          { 
-            value: 2, 
-            name: '未反馈', 
-            itemStyle: { 
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#66B5FF' },
-                { offset: 1, color: '#3AA1FF' }
-              ])
-            } 
-          }
-        ],
-        zlevel: 10,
-        emphasis: {
-          scale: true,
-          scaleSize: 10,
-          itemStyle: {
-            shadowBlur: 30,
-            shadowColor: 'rgba(0,0,0,0.6)'
-          }
-        }
-      }
-    ],
-    
-  };
-
-  option && myChart.setOption(option);
-
-  // 监听窗口大小变化
-  window.addEventListener('resize', () => {
-    myChart.resize();
-  });
-};
+const countData = ref([
+  { label:'实反馈',value:0,color:['#FF6B9A','#FF4B7A']},
+  { label:'超时反馈',value:0,color:['#FFAA33','#FF8A00']},
+  { label:'处置下发',value:0,color:['#FFE699','#FFD666']},
+  { label:'未反馈',value:0,color:['#66B5FF','#3AA1FF']},
+])
 
 onMounted(() => {
-  initChart();
+  getCount();
 });
+
+const getCount = () =>{
+  // 获取处置状态统计 
+  qcckPost({cjLx:0}, '/mosty-gsxt/qbcj/getXscjTjByCzzt').then(res => {
+    console.log(res,'=====');
+    
+  });
+}
+
 </script>
 
 <style lang="scss" scoped>