增加伪3D柱状图、3D饼图扇形上增加标注

src/components/echarts/Pie3d.vue

@@ -157,6 +157,7 @@ const getPie3D = (pieData) => {
     for (let i = 0; i < pieData.length; i++) {
         sumValue += pieData[i].value;
         let seriesItem = {
+            id: i,
             name: !pieData[i].name ? `series${i}` : pieData[i].name,
             type: "surface",
             parametric: true,
@@ -182,14 +183,53 @@ const getPie3D = (pieData) => {
         }
         series.push(seriesItem);
     }
+    let barData = [];
     for (let i = 0; i < series.length; i++) {
-        endValue = startValue + series[i].pieData.value;
+        let pieData = series[i].pieData;
-        series[i].pieData.startRatio = startValue / sumValue;
+        endValue = startValue + pieData.value;
-        series[i].pieData.endRatio = endValue / sumValue;
+        pieData.startRatio = startValue / sumValue;
-        series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio);
+        pieData.endRatio = endValue / sumValue;
+        series[i].parametricEquation = getParametricEquation(pieData.startRatio, pieData.endRatio);
         startValue = endValue;
         legendData.push(series[i].name);
+        // 柱子，为了在饼状图上显示数字
+        let midRatio = (pieData.startRatio + pieData.endRatio) / 2;
+        barData.push({
+            name: `${pieData.name}: ${pieData.value}`,
+            // 柱子透明
+            itemStyle: {
+                color: [1, 1, 1, 0]
+            },
+            label: {
+                show: true,
+                formatter: `{b}`,
+                textStyle: {
+                    color: '#FFF',
+                    fontSize: 12
                 }
+            },
+            value: [Math.sin(midRatio * Math.PI * 2) * 0.6, Math.cos(midRatio * Math.PI * 2) * 0.6, 0.1]
+        })
+    }
+    // 添加柱子，为了在饼状图上显示数字
+    series.push({
+        type: 'bar3D',
+        data: barData,
+        shading: 'lambert',
+        label: {
+            fontSize: 16,
+            borderWidth: 1
+        },
+        emphasis: {
+            label: {
+                fontSize: 20,
+                color: '#FFFFFF'
+            },
+            itemStyle: {
+                color: '#FFFFFF'
+            }
+        }
+    })
     let option = {
         legend: {
             show: true,
@@ -229,12 +269,12 @@ const getPie3D = (pieData) => {
             left: -80,
             viewControl: {
                 //3d效果可以放大、旋转等，请自己去查看官方配置
-                alpha: 40, // 角度
+                alpha: 45, // 角度
-                beta: 180, // 饼块开始位置角度
+                beta: 0, // 饼块开始位置角度
                 rotateSensitivity: 0,
                 zoomSensitivity: 0,
                 panSensitivity: 0,
-                autoRotate: false,
+                autoRotate: true,
             },
             light: {
                 main: {
@@ -283,6 +323,7 @@ const init = () => {
     let option = getPie3D(paramsList);
     var chart = echarts.init(document.getElementById(domId.value));
     chart.setOption(option);
+
     chart.on('click', (params) => {
         emits('click', {
             index: params.seriesIndex,

src/components/scroll/ScrollPanel.vue

@@ -2,7 +2,7 @@
     <div class="scroll-panel">
         <div class="title">
             <span class="item item1">序号</span>
-            <span class="item item2">民族</span>
+            <span class="item item2">宗教</span>
             <span class="item item3">人数(人)</span>
             <span class="item item4">占有率(%)</span>
         </div>

src/module/ModuleBottom.vue

@@ -5,14 +5,14 @@
                 <div class="left">
                     <CircleWave class="circle-container" id="lnrPercent" ref="lnrPercent" :value="personData.lnr.percent" :color="personData.lnr.color" :key="personData.lnr.keyCount" @click="onLnrClick"/>
                     <CircleWave class="circle-container" id="cjrPercent" ref="cjrPercent" :value="personData.cjr.percent" :color="personData.cjr.color" :key="personData.cjr.keyCount" @click="onCjrClick"/>
-                    <CircleWave class="circle-container" id="tyfyPercent" ref="tyfyPercent" :value="personData.tyfy.percent" :color="personData.tyfy.color" :key="personData.tyfy.keyCount" @click="onCjrClick"/>
+                    <CircleWave class="circle-container" id="tyfyPercent" ref="tyfyPercent" :value="personData.tyfy.percent" :color="personData.tyfy.color" :key="personData.tyfy.keyCount" @click="onTyfyClick"/>
-                    <CircleWave class="circle-container" id="shjzPercent" ref="shjzPercent" :value="personData.shjz.percent" :color="personData.shjz.color" :key="personData.shjz.keyCount" @click="onShjzClick"/>
+                    <!-- <CircleWave class="circle-container" id="shjzPercent" ref="shjzPercent" :value="personData.shjz.percent" :color="personData.shjz.color" :key="personData.shjz.keyCount" @click="onShjzClick"/> -->
                 </div>
                 <div class="right">
                     <Process class="process" title="老年人" :icon-type="1" :value="personData.lnr.value" :process="personData.lnr.process" :color="personData.lnr.color" :bg-color="personData.lnr.bgColor" :key="personData.lnr.keyCount"  @click="onLnrClick"/>
                     <Process class="process" title="残疾人保障" :icon-type="2" :value="personData.cjr.value" :process="personData.cjr.process" :color="personData.cjr.color" :bg-color="personData.cjr.bgColor" :key="personData.cjr.keyCount" @click="onCjrClick"/>
                     <Process class="process" title="退役/服役情况" :icon-type="3" :value="personData.tyfy.value" :process="personData.tyfy.process" :color="personData.tyfy.color" :bg-color="personData.tyfy.bgColor" :key="personData.tyfy.keyCount" @click="onCjrClick"/>
-                    <Process class="process" title="社会救助信息" :icon-type="4" :value="personData.shjz.value" :process="personData.shjz.process" :color="personData.shjz.color" :bg-color="personData.shjz.bgColor" :key="personData.shjz.keyCount" @click="onShjzClick"/>
+                    <!-- <Process class="process" title="社会救助信息" :icon-type="4" :value="personData.shjz.value" :process="personData.shjz.process" :color="personData.shjz.color" :bg-color="personData.shjz.bgColor" :key="personData.shjz.keyCount" @click="onShjzClick"/> -->
                 </div>
             </div>
         </ModuleCard3>

src/module/ModuleLeft1.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="module">
         <ModuleCard1 title="少数民族分布统计">
-            <BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :p-data="barChart.pData" :data="barChart.data" title="" :key="keyCount"
+            <!-- <BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :p-data="barChart.pData" :data="barChart.data" title="" :key="keyCount" @click="onClick" /> -->
-                @click="onClick" />
+            <BarFake3d1 id="barSpike" w="440" h="300" :x-data="barChart.xData" :p-data="barChart.pData" :data="barChart.data" title="" :key="keyCount" @click="onClick" />
         </ModuleCard1>
     </div>
     
@@ -12,6 +12,7 @@
 import { ref, reactive, inject, defineEmits } from 'vue';
 import ModuleCard1 from './card/ModuleCard1.vue';
 import BarSpike from '../components/echarts/BarSpike.vue';
+import BarFake3d1 from '../components/echarts/BarFake3d1.vue';
 
 const emits = defineEmits(['click']);