修改饼图

src/components/echarts/BarSpike.vue

@@ -1,6 +1,11 @@
 <template>
     <div class="bar-spike">
         <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>
 
@@ -25,6 +30,10 @@ const props = defineProps({
         type: Array,
         default: []
     },
+    pData: {
+        type: Array,
+        default: []
+    },
     data: {
         type: Array,
         default: []
@@ -45,7 +54,8 @@ const init = () => {
         tooltip: {},
         grid: {
             left: 50,
-            top: 10
+            top: 10,
+            right: 100
         },
         xAxis: {
             type: 'category',
@@ -86,4 +96,17 @@ onMounted(() => {
 </script>
 
 <style lang="stylus" scoped>
+.bar-spike
+    position relative
+    .percent
+        font-size 12px
+        ul
+            position absolute
+            list-style none
+            top 0
+            right 0
+            li
+                width 100px
+                text-align end
+
 </style>

src/module/ModuleLeft1.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="module">
-        <ModuleCard1 title="民族分布统计">
-            <BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount"
+        <ModuleCard1 title="少数民族分布统计">
+            <BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :p-data="barChart.pData" :data="barChart.data" title="" :key="keyCount"
                 @click="onClick" />
         </ModuleCard1>
     </div>
@@ -27,12 +27,14 @@ const axios = inject('axios');
 const keyCount = ref(0);
 const barChart = reactive({
     xData: [],
+    pData: [],
     data: []
 });
 axios.get(`app/query/sqlrelease/q419513e`, {}).then(res => {
     let data = res.data;
     data.forEach((item, index) => {
         barChart.xData.push(item.name);
+        barChart.pData.push(`${item.name}：${item.percent}%`)
         barChart.data.push(item.value);
     })
     keyCount.value++;