From 9703b689b37296e6086eae4650613a8a070716d1 Mon Sep 17 00:00:00 2001
From: TS-QD1 <tskj_pc1@163.com>
Date: Wed, 20 Dec 2023 11:49:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BC=AA3D=E6=9F=B1=E7=8A=B6?=
 =?UTF-8?q?=E5=9B=BE=E3=80=813D=E9=A5=BC=E5=9B=BE=E6=89=87=E5=BD=A2?=
 =?UTF-8?q?=E4=B8=8A=E5=A2=9E=E5=8A=A0=E6=A0=87=E6=B3=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/echarts/BarFake3d1.vue | 250 ++++++++++++++++++++++++++
 src/components/echarts/Pie3d.vue      |  55 +++++-
 src/components/scroll/ScrollPanel.vue |   2 +-
 src/module/ModuleBottom.vue           |   6 +-
 src/module/ModuleLeft1.vue            |   5 +-
 5 files changed, 305 insertions(+), 13 deletions(-)
 create mode 100644 src/components/echarts/BarFake3d1.vue

diff --git a/src/components/echarts/BarFake3d1.vue b/src/components/echarts/BarFake3d1.vue
new file mode 100644
index 0000000..ddd6ca9
--- /dev/null
+++ b/src/components/echarts/BarFake3d1.vue
@@ -0,0 +1,250 @@
+<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>
+
+<script setup>
+import { ref, defineProps, defineEmits, inject } from 'vue';
+import { onMounted } from 'vue';
+const props = defineProps({
+    id: String,
+    w: {
+        type: Number,
+        default: 200
+    },
+    h: {
+        type: Number,
+        default: 200
+    },
+    title: {
+        type: String,
+        default: '3D'
+    },
+    xData: {
+        type: Array,
+        default: []
+    },
+    pData: {
+        type: Array,
+        default: []
+    },
+    data: {
+        type: Array,
+        default: []
+    }
+});
+const emits = defineEmits(['click']);
+const echarts = inject('echarts');
+const domId = ref(props.id);
+const w = ref(`${props.w}px`);
+const h = ref(`${props.h}px`);
+
+const init = () => {
+    let img1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAF8CAYAAABFdgLPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDM2MCwgMjAyMC8wMi8xMy0wMTowNzoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFDNzU4QkMzQjFGRjExRUFBRjkxQTRCMzE0QUM2OTRBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFDNzU4QkM0QjFGRjExRUFBRjkxQTRCMzE0QUM2OTRBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUM3NThCQzFCMUZGMTFFQUFGOTFBNEIzMTRBQzY5NEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUM3NThCQzJCMUZGMTFFQUFGOTFBNEIzMTRBQzY5NEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7hhRVqAAAGG0lEQVR42uyZYZLb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'
+    let img2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAD8AAAAUCAYAAAA6NOUqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkFEQUNDRkQzQUM4QTExRUE5OUVDQkFCOTgzQkVDN0NGIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkFEQUNDRkQ0QUM4QTExRUE5OUVDQkFCOTgzQkVDN0NGIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QURBQ0NGRDFBQzhBMTFFQTk5RUNCQUI5ODNCRUM3Q0YiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QURBQ0NGRDJBQzhBMTFFQTk5RUNCQUI5ODNCRUM3Q0YiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5jRYorAAAPE0lEQVR42oRYeZAc1Xn/3utzuqfnnp2ZvS+thIRWxwoBwojCNrhCMOArgMHgFCSEFInJ4TiJ4+DC/sdxxYlTOAfEIRUnJcqpChUkMIk5JAQSkpAipF1ppb2P2Tl2ZnqOvq+XN7MKRxHsrvqmel6/9/r7fcfv+14j+HUCv/RqULn7G3D/sy7c9/IP4I/hK3DDP/jwW80n4amvvwzq1yMgfjMGK/wd6BuH5sRX3/iJmNul8c58jKtEBqxQapdnJpaDtXSvu2VojDTWVGa93CCcwmCXhLl8RRdsr5UR8xcdeWyolOgfYfc+9yJ5ce8yPs1x8O0fXwy6594yZr/9neDUtffZmfM/D/761SLsr8Wh51t/Dgee+TH8x7Pfgc/ln4dcYQ2K2RwMHHsSho88AUai72NhseD+AtCkMwMgoOI0ICTUIQEWKHQgP1+WpzMlxbwBkl1xT157qWhB40X7iYYL4thurOMkhEZElN6cAyHjGlFrh7v5sk22qXk/2Uv8yZ4qlFQXs6Npcvcg72srPa3DTC/yGBuxRQMVH3kAxm3MZkrF0Ev3V7JiUQ0TNlZnz5aMYoNHuzf3OWOE1W11p5kIaU3JmLXbKpcFtqN6KxoBxt2AgD7GvwgeqH8U8MYTAMxC2NYh2rDBuO9nzFeyZ/qGTj7cfdRZgjpnuiibFMQ+xUvYyLx0bE6XXM3ouyqu26PbzX2pXgcjA/FNC1/FRPzTJ1iIyutojgGwsg5hqg48dOYUKL+5HUoDW2BxZQ1qFy3g+Sj8i2jDUJ8MtzAiaEIIphyDq6lBEtQAgdEQABMxLCuMqmmSW/KFSLeHUzOTzEQl7x26/bOFxFJ+7lzhByTf+DlE+DC4Ugh8n3QgfQj8I7XyByxBwDJY8KpNcFkELYlFA1MroWRejZxNjk40wB6o+aUpLpSb70r1t7KyG1Tclhd3kP3b3SmkZUJBQZwOHoRugKUIBCQAK0fga6+68PKpJtx1C4PyFMP1QwBawSBjh54D56u3wmyyFx3034I/i6XIzmAIvrlaQU+EBRj2ODikqXBK1MkmF8GOdBdcYgnM11qwXnPBrGKolRqcCx7f3LpbYRlu+953jm8dW8m7q+lWsTc3c+EUvDrzM3HVj3ZFwKTREGDcwdnB+3sPvkB/A/ADDuxmAFu3lyF7x170jpsJm6aaWWy4KY8EiqKWzLLrrXdtHSl+Zs8mfZsE6MUFj1y6uAA/3Jf1czGFqHTDP6JyreXDVZMr6LreFDGzAtz+3wvQjITgruu60dSPHMKLIfiDgg9P3cHAEZqSt5kmfGklBMmrAe4/3UC3Z6JwTxbIWgjgLyjhLM43YXT1MiKchSLyKHl0IAsBvV8XQsQ1fGQUW4wm8r4ZloKpEwV5abm+QxRSu3aN5lIDcVVHEX5SnDn7+panD9g844PNyRQyAWZbagLsYgWk4jmQR2x0cmy454QGg6XlarzkWJzLuVZsYU3n2fgq2zXeumdHr3F/AtxeygRHpkwktxjy+Z1xoro+OtoGjxEcdJrokFCGZ7MR+EfHBH5MArtbBGQQ2HltAMGeOkROATAZAdISgK9ziLMBzVOHLAYGbGIdeF4Q4a9YA1QarqGuGEymkzClsyhmGTBo6WCm+kAtG1grB8hLK0QM8dhlXaYYENvnuDzPaxfPX5idKRbMCs+wm4VY7pOOp0iLR5fm1i/rUGn5gD77wBOQi0TA2D4hNpP8dsdjRA5ZpjI6XGKJ0JII6wuaxhyfr/J3jfe1/mQiYQJ6P3t+qmlYtRy4V1HIcZYhjzMYptsPLAeBSzlIkqmJ8QaZEAKjfgDjhg67Ls5DDOsQCAyU9QBdUiYhnHqFpCMa4pi3ycvc43AheAJC7VfpGhKrdfTYYC/5Av3//SPHcLg7Qx7u6SFhWwRDJnjWNuFM1WAcL0C3j6bdrZTmXltuMkfKZlCtFoT6Qvk6acvYTkfBaFdM/Tet7JXQ7zz0N1AZ7Eq7E0NDVpmA4FlI7pVXpexQk2uFOJs4KMhG3AnZd+Oebq87BGGE2vwBOYWHL2Yk+KlpoDeqKjzV29NJpgkqZ6hwhoWo4gCpVGe8XTT8K3bb5S7BLY0S1Bl2g135CjDEAg8NI0cwybwbwFG0nZbZFkBdRYdHR+AmhiWfmptHo28ehUdyfWTw2uuBFRDUbQ9mNJM1aPR0RWViNm1smB60wigwwhiKdV84N11mi4XlEUtRNo31ZjLJauUFtv8Lg3wesmnXZgwxxOpCKMpoNVNozsxHAp4hlPiYHOpu3bY7afVLMThvE6h7AXR8SSPAobDGWZ6cRhgW6X03lQBfKRw8R0Bvz9sA/sGKc84ZgB36AJAIDRKfwm8CCHSSIAPROYCS355FB22rs1WIElV7fYYE5N6dOyHSOwJzHl1HdQlhBrhwGA4cW2RGlCrs3D0QtOhmvMzC/OW8fH62yDC54ZqYpT4rFi+vrqzP6pywhT3jdqeYZNq083mRFzjLN01eBg6Gx9NmIiv6kUTIGQ5h5zINqbcLPo7yyGeCtraoUzoOtomD3l0PAhxfqgLvEfhqmIenIwJc6Kj7PuSoQ4mQxTBMeWGCp+NRH95tOJDgMNg8CzXbB5Zw4NE5fHuBR6OCRsY1sgxRalyKFf51dBTw/1OzaYIFZ/eNkZnJVSzxLrBdEfLGdDm1OGcogSsZfqmWdp3AF6kvPdctaKH0WdasM4rA2DyPaXaZHpfZnDaSkUiD4kYK68JUo4KmbYnZxgokREP+0LslbPjEZxmm81Lc9io1gEnFohLiEGQ0Ex5RGIjtHwOSiEGSzntLDaBwdBb++dMDlAdEmhMIjsVYOHxsGR4dleDqsSzkHQynqYcnL5Xgzvw07LhmHLhcFlJ0bJruecH1IMmxIDAIGGqMADZqtxdQL1MEd/cw/lTPQHBEM1BLb+G1mhHEe1NqUK6mVc0iof7wumsEJtdQhwPLMll+5syqKe7YD3XTtiVUFw3LovTCzec1dKGpor6bNvv3KpJfVpvkHc0GZVs3bEkooFEvIs8DWaCeohboot7KtvOchuzfHVuDIUpmDyjie56Zp8GSp3lsUG2lK2NaOy4oEEzXh+n9Zh7T+AGo1nXoKpdhl0dbNArco0Sp2C7MrVfhpG7BquWCZtnA0+gT6X7tys0Sj4lwgKW+RNBAMqrXXNZpeCaTcE2HAUbAgZj0PMey3Fglj+XouGCyObOir1QKZhBP94nZ7DuVMMt2WwYuBJ5TSOVI15KK3qkv8DO0rUJJhWSYpr9erEFPOgIkqcC/n5yB22i9unekvwPIofI09epa3fpQ02iLGMoUvEOj4//AK20ip3necv335lKKAJNGRpNasUYXJtodNgU5kYx0pH1Nmi68TYmwQYGr1Dgcfd5wjOB/Fsts80SNi7TKDC9IiOuBoFQvi07ZbkpRFtaWKzc6NV7pzcZOJEbdFdbO7YCUph1BfGPQaIaTq8ivrtcbHO+idF9SaZSq8epKSxRGc4hTaB2hbI2H01Gc4mR0rmajHEHkallq8xm0G+WXGxYO0xK3ry/+XsLPBYCWFut4f1YKwjz7HgmcqTm4mzZYQ/GN9Vf2QNDUQKLRoPD8R7rytpmGQhz0h9qnDNobUDnfSfoos1vO0R6UBPV1lZSLTZTYMdhki6Xw2uK5PdS/43y4R0kPhA+ms8Zccv48oNu+fwgwpWffdqAZjsRjV0/IXX0Ky5lVaCytZFCDICaVXBq6oXtdiHEdr9UWHC5fKKFtA3JwU08ioI0YWaXy4nKVkXUTPTiQ8oclkdTo2GFC8CvnCsy9Eht8elNXx8VFqvAzZR1rlyv4yd1ZT5AEYhCCTiOEXjk1j4eWLwT79o6T7r5+0k4NGvzI3iA1MN4nuHbPhGjlwZMEMzYLPqUov74OSC85nLp4ickvr8rX7Bj+vBTz07XllkrMEy9dij03U0/44NgRqsSRx6l7NogDU0KJeRp38GJfYsH8hNgncNHVSDwrU26L9EWX+bjQcGuBraoVb9PNW814XHDtthYU0vSxEnB+Be751W20VkBbMFUc/+TUKrc/EgQPb+53L9H/bRa/TOWfjs9yj41GvRvTaX+JjpvUUK/VW1h7/TC+9cY9foSmXIVuTdMItQ+eZhtsOy18gmlBAYtFxL3SOth1wJUlVc7PV8JarcE5PBvtk9md+8fqQ5v6s/bKSeEYqXNvNuAtf1kpgENTENOV6KrpX/vgGQ9YWl2qepI21ght91Py9dbNyKXnzoWWMQYVFs8ZM7YdBntkoCejJOU4hCJlXoyWcK1mhQntvUf72xWLdkrUSXEwi7O6z5YKsGnPIA4J7extnyQALSw6bFAoBlsmul3TB7x4vsC08st4cM+An+nrDarUINSmtB9s94VA6D3xoFPlmMClYgccbWRRbb6UmF1vjdhmqivtE3Hs2tXgVmY98HXSeO3wtrlDF5pT9WkRcFwBAaUh5KEO8M5RVzp524dPtHSUpwdhV8ZgWDX4xIwJDhuBhhZwUTYl7Q1/WQ63RiJvezUOi1JmxBzoF+KxbKy/wfcQz1luOeslHam1uuE7DMGSwHktzVg3eS/fs7lXl4WwRzwfOEKC5YsVsWWoIi/LxKipREqkCJ9JEsswQXA8MSpyDArJgc8RNiFZHPYFB5nYMkIKXkxxXPDmSYaU9XAvz4X4xFHNQ4t68/lvNfurleayrhtHCje32ySgToBOk/CR8/zf/oIPGe1SLlzpS9tCS/R/7jsAd8j3wOnvvgFlYRX+9M4FwJMVNNi4SylGEoxfWePoSTiphyRJtkzB9YVMNp0xFLO2vFKsIjmXNbuTCc3Va1hkHdF1GbZgekRUsHf1cK+v6x7myyXWbbSE2UBA1ACapNZ9i8SCJuv4JYYJrPWL9pcnTfum372VPMPa3q985kcwnnwGfuMpgKlPzsIKjHQgTNDu+DStv4L5cV9ywr/8K1bHCO5GHWsZPNRlgKuqKYjAKpztPkDfOEXi5p1N73Pb4ff/UoOLzkONJvNFVL3ua/7W6lm/ap0KTu26hRksdosJR0WGormuQCSoRzlOYM24APqI4Dv16XeDOwcG/dLecbBo5H2phuH46gtQmn4X/v57j8ItfzgL7o0+qP/1Otz93Eno+t5jkAobtAM2O61xgJMQ5jZ07WqTAXelPHzM9b8CDADSK39CqOmjfQAAAABJRU5ErkJggg=='
+    let img3 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAQCAYAAACRBXRYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDM2MCwgMjAyMC8wMi8xMy0wMTowNzoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjg4RjIwODIxQjFERjExRUFBNzI5QTE3MkE4QTdGQkNEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjg4RjIwODIyQjFERjExRUFBNzI5QTE3MkE4QTdGQkNEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODhGMjA4MUZCMURGMTFFQUE3MjlBMTcyQThBN0ZCQ0QiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODhGMjA4MjBCMURGMTFFQUE3MjlBMTcyQThBN0ZCQ0QiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6HHksnAAAA5ElEQVR42uyXTQrCMBSEW3VpxQO4VLyCB/BQQvfF0+QA0gN4hBZdegBFt1KnkJW0gYChP34fDIFkMfCYvOTFVVVFAF0xoQRAAIEAAnTBjBL4Mb3e6mUjHaW93c6lg3QJaN3q+V6vBlvPmCHEO4BbLWdp+XV0l3ZSGcDW6akAlkOtJ0+wP1lDECK7l43Ikw7Y0w740LJoOX5JSQBbp6c6YDLUevIH/C1ziRvNExyU3HFm6lclgIzD80QA/4vUfv6jhoEgHZEnAewphZ126670tDJ2rxiRJ0MI8AcEIIBAAAGC8BFgAE/fO8+F5WVHAAAAAElFTkSuQmCC'
+
+    let color1 = {
+        type: 'linear',
+        colorStops: [{
+                offset: 0,
+                color: 'rgb(27,124,177)'
+            },
+            {
+                offset: 0.2,
+                color: 'rgb(23,196,230)'
+            },
+            {
+                offset: 0.5,
+                color: 'rgb(6,120,221)'
+            },
+            {
+                offset: 0.8,
+                color: 'rgb(27,196,227)'
+            },
+            {
+                offset: 1,
+                color: 'rgb(43,113,164)'
+            }
+        ]
+    }
+    let color2 = {
+        type: 'radial',
+        colorStops: [{
+                offset: 0,
+                color: 'rgba(13,47,85,.8)'
+            }, {
+                offset: 0.5,
+                color: 'rgba(33,74,118,.8)'
+            },
+            {
+                offset: 1,
+                color: 'rgba(33,74,118,.8)'
+            }
+        ]
+    }
+    let color3 = {
+        type: 'radial',
+        colorStops: [{
+                offset: 0,
+                color: 'rgba(17,47,75,.7)'
+            },
+            {
+                offset: 1,
+                color: 'rgba(51,205,207,.7)'
+            }
+        ]
+    }
+
+    var chart = echarts.init(document.getElementById(domId.value));
+    chart.setOption({
+        title: {
+            text: props.title
+        },
+        tooltip: {},
+        grid: {
+            left: 50,
+            top: 10,
+            right: 100,
+        },
+        xAxis: {
+            type: 'category',
+            data: props.xData,
+            axisLine: {
+                lineStyle: {
+                    color: '#FFF'
+                }
+            },
+        },
+        yAxis: {
+            type: 'value',
+            axisLine: {
+                lineStyle: {
+                    color: '#FFF'
+                }
+            },
+        },
+        series: [{ //空柱子label
+            type: 'bar',
+            itemStyle: {
+                normal: {
+                    color: 'transparent'
+                }
+            },
+            label: {
+                show: true,
+                position: 'insideTop',
+                distance: -10,
+                rich: {
+                    a: {
+                        color: 'rgb(2,219,227)',
+                        fontSize: 16,
+                        align: 'left',
+                        padding: [0, 0, 0, 120],
+                        width: 40,
+                        height: 16,
+                        lineHeight: 16,
+                        backgroundColor: {
+                            image: img3
+                        },
+                    }
+                },
+                formatter: (params) => {
+                    return `{a|${params.value}}`
+                }
+            },
+            z: 5,
+            data: props.data
+        }, {
+            type: 'pictorialBar',
+            itemStyle: {
+                normal: {
+                    color: color1
+                }
+            },
+            emphasis: {
+                itemStyle: {
+                    opacity: 1
+                }
+            },
+            symbol: 'rect',
+            symbolClip: true,
+            symbolSize: [35, '100%'],
+            symbolOffset: [0, 0],
+            symbolPosition: 'start',
+            z: 5,
+            animation: false,
+            data: props.data,
+        }, { //蓝色柱子顶部椭圆
+            type: 'pictorialBar',
+            itemStyle: {
+                normal: {
+                    color: 'rgb(51,255,207)'
+                }
+            },
+            symbolSize: [35, 10],
+            symbolOffset: [0, -5],
+            symbolPosition: 'end',
+            z: 6,
+            animation: false,
+            data: props.data
+        }, { //蓝色柱子底部椭圆
+            type: 'pictorialBar',
+            itemStyle: {
+                normal: {
+                    color: color1
+                }
+            },
+            symbolSize: [35, 10],
+            symbolOffset: [0, 5],
+            symbolPosition: 'start',
+            z: 5,
+            animation: false,
+            data: props.data
+        }]
+    })
+    chart.on('click', (params) => {
+        emits('click', {
+            index: params.dataIndex,
+            name: props.xData[params.dataIndex],
+            value: props.data[params.dataIndex]
+        })
+    })
+    let count = 0;
+    setInterval(() => {
+        chart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: (count) % props.xData.length
+        })
+        count++;
+    }, 1000)
+}
+
+onMounted(() => {
+    init();
+});
+
+</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>
\ No newline at end of file
diff --git a/src/components/echarts/Pie3d.vue b/src/components/echarts/Pie3d.vue
index 7c05b2c..54fb736 100644
--- a/src/components/echarts/Pie3d.vue
+++ b/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;
-        series[i].pieData.startRatio = startValue / sumValue;
-        series[i].pieData.endRatio = endValue / sumValue;
-        series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio);
+        let pieData = series[i].pieData;
+        endValue = startValue + pieData.value;
+        pieData.startRatio = startValue / sumValue;
+        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, // 角度
-                beta: 180, // 饼块开始位置角度
+                alpha: 45, // 角度
+                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,
diff --git a/src/components/scroll/ScrollPanel.vue b/src/components/scroll/ScrollPanel.vue
index e065e35..7db9807 100644
--- a/src/components/scroll/ScrollPanel.vue
+++ b/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>
diff --git a/src/module/ModuleBottom.vue b/src/module/ModuleBottom.vue
index e317958..6b02d12 100644
--- a/src/module/ModuleBottom.vue
+++ b/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="shjzPercent" ref="shjzPercent" :value="personData.shjz.percent" :color="personData.shjz.color" :key="personData.shjz.keyCount" @click="onShjzClick"/>
+                    <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"/> -->
                 </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>
diff --git a/src/module/ModuleLeft1.vue b/src/module/ModuleLeft1.vue
index 2feec45..d5e2286 100644
--- a/src/module/ModuleLeft1.vue
+++ b/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"
-                @click="onClick" />
+            <!-- <BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :p-data="barChart.pData" :data="barChart.data" title="" :key="keyCount" @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']);