修改名字

src/components/echarts/Bar3d.vue

@@ -1,6 +1,11 @@
 <template>
-    <div class="bar">
+    <div class="bar-3d">
         <div :id="domId" :style="{ width: w, height: h }"></div>
+        <div class="percent">
+            <ul>
+                <li v-for="item in pData" :key="item">{{ item }}</li>
+            </ul>
+        </div>
     </div>
 </template>
 
@@ -26,6 +31,10 @@ const props = defineProps({
         type: Array,
         default: []
     },
+    pData: {
+        type: Array,
+        default: []
+    },
     data: {
         type: Array,
         default: []
@@ -142,4 +151,18 @@ onMounted(() => {
 </script>
 
 <style lang="stylus" scoped>
+
+.bar-3d
+    position relative
+    .percent
+        font-size 12px
+        ul
+            position absolute
+            list-style none
+            padding 0
+            left 0
+            bottom 0
+            li
+                max-width 200px
+
 </style>

src/components/echarts/BarFake3d1.vue

@@ -244,7 +244,7 @@ onMounted(() => {
             top 0
             right 0
             li
-                width 100px
+                max-width 200px
                 text-align end
 
 </style>

src/module/ModuleLeft2.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="module">
-        <ModuleCard1 title="信访管理类人员">
+        <ModuleCard1 title="特殊人员管理">
             <PolarHalf id="polarHalf" w="500" :data="polarHalfChart.data" :unit="polarHalfChart.unit" title="" :key="keyCount" @click="onClick"/>
         </ModuleCard1>
     </div>

src/module/ModuleLeft3.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="module">
         <ModuleCard1 title="宗教信仰统计">
-            <ScrollPanel :data="scrollData" :key="keyCount" @click="onClick"/>
+            <!-- <ScrollPanel :data="scrollData" :key="keyCount" @click="onClick"/> -->
+            <BarFake3d1 id="religion" w="440" h="300" :x-data="barChart.xData" :p-data="barChart.pData" :data="barChart.data" title="" :key="keyCount" @click="onClick" />
         </ModuleCard1>
     </div>
 </template>
@@ -10,6 +11,7 @@
 import { ref, reactive, inject, defineEmits } from 'vue';
 import ModuleCard1 from './card/ModuleCard1.vue';
 import ScrollPanel from '../components/scroll/ScrollPanel.vue';
+import BarFake3d1 from '../components/echarts/BarFake3d1.vue';
 
 const emits = defineEmits(['click']);
 
@@ -23,25 +25,43 @@ const onClick = (params) => {
 }
 
 const keyCount = ref(0)
-const scrollData = reactive([])
-
+const barChart = reactive({
+    xData: [],
+    pData: [],
+    data: []
+});
 axios.get(`app/query/sqlrelease/qaf6b78b`, {}).then(res => {
     let data = res.data;
-    let total = 0;
     data.forEach((item, index) => {
-        total += item.value;
-    });
-    data.forEach((item, index) => {
-        scrollData.push({
-            name: item.name,
-            value: item.value,
-            percent: (item.value / total * 100).toFixed(2)
-        })
+        barChart.xData.push(item.name);
+        barChart.pData.push(`${item.name}：${item.percent}%`)
+        barChart.data.push(item.value);
     })
     keyCount.value++;
 }).catch(err => {
     console.error(err);
-})
+});
+
+
+// const scrollData = reactive([])
+
+// axios.get(`app/query/sqlrelease/qaf6b78b`, {}).then(res => {
+//     let data = res.data;
+//     let total = 0;
+//     data.forEach((item, index) => {
+//         total += item.value;
+//     });
+//     data.forEach((item, index) => {
+//         scrollData.push({
+//             name: item.name,
+//             value: item.value,
+//             percent: (item.value / total * 100).toFixed(2)
+//         })
+//     })
+//     keyCount.value++;
+// }).catch(err => {
+//     console.error(err);
+// })
 
 </script>
 

src/module/ModuleRight1.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="module">
         <ModuleCard2 title="年龄分布情况">
-            <Bar3d id="bar" w="400" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount" @click="onClick"/>
+            <Bar3d id="bar" w="400" h="300" :x-data="barChart.xData" :p-data="barChart.pData" :data="barChart.data" title="" :key="keyCount" @click="onClick"/>
         </ModuleCard2>
     </div>
 </template>
@@ -18,6 +18,7 @@ const keyCount = ref(0);
 
 const barChart = reactive({
     xData: [],
+    pData: [],
     data: []
 })
 
@@ -32,6 +33,7 @@ axios.get(`app/query/sqlrelease/q2c03064`, {}).then(res => {
     let data = res.data;
     data.forEach(item => {
         barChart.xData.push(item.name);
+        barChart.pData.push(`${item.name}：${item.percent}%`);
         barChart.data.push(item.value);
     })
     keyCount.value++;