1

src/components/baseEcharts/pieChart.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="container-echart">
+        <div :id="'echart' + timeId" class="interface-echart"></div>
+    </div>
+</template>
+<script lang="ts" setup>
+import * as echarts from 'echarts'
+import { EChartsType } from 'echarts'
+import { onMounted, ref, watch, onBeforeUnmount, nextTick } from 'vue'
+
+const props = defineProps({
+    xDataArray: {
+        // 柱形图x轴数据
+        type: Array,
+        default: function () {
+            return ['1', '2', '3', '4', '5']
+        }
+    },
+    yDataArray: {
+        //图标信息提示
+        type: Array,
+        default: function () {
+            return [
+                {
+                    name: '图例二',
+                    type: 'pie',
+                    label: {
+                        // 柱状图上的文字设置
+                        show: true, // 是否显示
+                        //   rotate: 60, // 文字旋转角度
+                        position: 'top' // 显示位置
+                    },
+                    // barWidth: '50%', // 柱的宽度
+                    barGap: '5%', // 多个并排柱子设置柱子之间的间距
+                    data: [2, 2, 7, 5, 7, 4]
+                }
+            ]
+        }
+    }
+})
+let myEchart: EChartsType
+const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
+const myEchartData = () => {
+    const option = {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            top: '5%',
+            left: 'center'
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: ['40%', '70%'],
+                avoidLabelOverlap: false,
+                padAngle: 5,
+                itemStyle: {
+                    borderRadius: 10
+                },
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                emphasis: {
+                    label: {
+                        show: true,
+                        fontSize: 40,
+                        fontWeight: 'bold'
+                    }
+                },
+                labelLine: {
+                    show: false
+                },
+                data: [
+                    { value: 1048, name: 'Search Engine' },
+                    { value: 735, name: 'Direct' },
+                    { value: 580, name: 'Email' },
+                    { value: 484, name: 'Union Ads' },
+                    { value: 300, name: 'Video Ads' }
+                ]
+            }
+        ]
+    }
+    // { notMerge: true } 解决删除数据时,数据不刷新的问题
+    myEchart.setOption(option, { notMerge: true })
+}
+
+watch(
+    //监控数据变化
+    () => props.xDataArray,
+    () => {
+        setTimeout(() => {
+            myEchartData()
+        }, 500)
+    },
+    { deep: true }
+)
+watch(
+    //监控数据变化
+    () => props.yDataArray,
+    () => {
+        setTimeout(() => {
+            myEchartData()
+        }, 500)
+    },
+    { deep: true }
+)
+onMounted(() => {
+    setTimeout(() => {
+        const dom = document.getElementById(`echart${timeId.value}`) as any
+        myEchart = echarts.init(dom)
+        myEchartData()
+    }, 500)
+
+    // 当窗口发生变化时
+    window.addEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+onBeforeUnmount(() => {
+    window.removeEventListener('resize', () => {
+        myEchart.resize()
+    })
+})
+</script>
+<style scoped lang="scss">
+.container-echart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.interface-echart {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/views/visualization/index.vue

@@ -15,34 +15,60 @@
             </div>
             <div class="left">
                 <div class="leftOneBox">
-                    <div class="leftOBTitle">标题一</div>
+                    <div class="leftOBTitle">评价分析</div>
+                    <div class="leftOBContent">
+                        <PieEcharts></PieEcharts>
+                    </div>
+                </div>
+                <div class="leftOneBox">
+                    <div class="leftOBTitle">生产总值</div>
                     <div class="leftOBContent">
                         <baseEcharts></baseEcharts>
                     </div>
                 </div>
                 <div class="leftOneBox">
-                    <div class="leftOBTitle">标题一</div>
+                    <div class="leftOBTitle">税收TOP10</div>
                     <div class="leftOBContent">
                         <baseEcharts></baseEcharts>
                     </div>
                 </div>
                 <!-- <div>2</div> -->
             </div>
+
+            <div class="boxBottom">
+                <div class="boxBttOne">
+                    <div class="leftOBTitle">税收TOP10</div>
+                    <div class="leftOBContent">
+                        <baseEcharts></baseEcharts>
+                    </div>
+                </div>
+                <div class="boxBttTwo">
+                    <div class="leftOBTitle">税收TOP10</div>
+                    <div class="leftOBContent">
+                        <baseEcharts></baseEcharts>
+                    </div>
+                </div>
+            </div>
+
             <div class="right">
                 <div class="leftOneBox">
-                    <div class="leftOBTitle">标题一</div>
+                    <div class="leftOBTitle">园区概况</div>
                     <div class="leftOBContent">
                         <baseEcharts></baseEcharts>
                     </div>
                 </div>
                 <div class="leftOneBox">
-                    <div class="leftOBTitle">标题一</div>
+                    <div class="leftOBTitle">行业合规</div>
+                    <div class="leftOBContent">
+                        <baseEcharts></baseEcharts>
+                    </div>
+                </div>
+                <div class="leftOneBox">
+                    <div class="leftOBTitle">风险预警</div>
                     <div class="leftOBContent">
                         <baseEcharts></baseEcharts>
                     </div>
                 </div>
-                <!-- <div>1</div> -->
-                <!-- <div>2</div> -->
             </div>
         </div>
     </div>
@@ -51,24 +77,34 @@
 <script setup>
 import { ref, onMounted } from 'vue';
 import baseEcharts from '@/components/baseEcharts/index.vue'
+import PieEcharts from '@/components/baseEcharts/pieChart.vue'
 
 const mapContainer = ref(null);
 let map = null;
 
 const gradationMun = [{
-    name: "3A企业",
+    name: "3A级企业",
     state: 3
 }, {
-    name: "2A企业",
+    name: "2A级企业",
     state: 2
 }, {
-    name: "1A企业",
+    name: "1A级企业",
     state: 1
+}, {
+    name: "B级企业",
+    state: 4
+}, {
+    name: "C级企业",
+    state: 5
+}, {
+    name: "D级企业",
+    state: 6
 }, {
     name: "取消选择",
     state: 0
 }]
-const activeTab = ref(3); // 默认激活第一个tab  
+const activeTab = ref(6); // 默认激活第一个tab  
 
 const setActiveTab = (index, value) => {
     activeTab.value = index;
@@ -76,14 +112,34 @@ const setActiveTab = (index, value) => {
 onMounted(async () => {
     // 初始化地图
     map = new BMapGL.Map(mapContainer.value);
-    var point = new BMapGL.Point(109.94023319075, 27.395641605743);
-
+    var point = new BMapGL.Point(109.94211746215822, 27.377939585109653);
     map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
     map.enableScrollWheelZoom(true);
+    map.setMinZoom(15);
+    map.setMaxZoom(17);
     map.setMapStyleV2({
         styleId: '62ce43ad2a1362c23e612b783d7406e7'
     });
     map.setTilt(50);
+    map.disableInertialDragging();
+
+    // 定义允许的拖拽范围
+    const allowedBounds = new BMapGL.Bounds(
+        new BMapGL.Point(109.90207672119142, 27.365250190931242), // 西南角
+        new BMapGL.Point(109.97014045715333, 27.422461872492594)  // 东北角
+    );
+
+    // 监听拖拽结束事件
+    map.addEventListener('dragend', function () {
+        // 获取当前地图的中心点
+        const center = map.getCenter();
+        // 检查中心点是否在允许的范围内
+        if (!allowedBounds.containsPoint(center)) {
+            // 如果不在范围内，将地图中心调整回允许范围的中心点
+            const adjustCenter = allowedBounds.getCenter();
+            map.panTo(adjustCenter);
+        }
+    });
     // map.addControl(new BMapGL.NavigationControl());
 
     // var convertor = new BMapGL.Convertor();
@@ -117,7 +173,6 @@ onMounted(async () => {
                 topFillOpacity: 0.5,
                 sideFillColor: '#5679ea',
                 sideFillOpacity: 0.5
-
             });
             map.addOverlay(prism);
         })
@@ -164,9 +219,9 @@ onBeforeUnmount(() => {
             align-items: center;
 
             .tab {
-                width: 130px;
+                width: 100px;
                 height: 40px;
-                margin: 0 30px;
+                margin: 0 10px;
                 text-align: center;
                 line-height: 40px;
                 color: white;
@@ -191,14 +246,64 @@ onBeforeUnmount(() => {
             position: relative;
             margin-left: -100%;
             width: 500px;
-            background-color: rgba($color: #000000, $alpha: 0.2);
+            // background-color: rgba($color: #000000, $alpha: 0.2);
             height: 100%;
             top: 60px;
             z-index: 999;
 
             .leftOneBox {
-                height: 45%;
-                background-color: rgba($color: #000000, $alpha: .5);
+                height: 30%;
+                background-color: rgba($color: #000000, $alpha: .3);
+                margin-bottom: 14px;
+
+                .leftOBTitle {
+                    height: 40px;
+                    color: white;
+                    line-height: 40px;
+                    padding-left: 60px;
+                    font-weight: bold;
+                    background-image: url("../../assets/visualizationimg/centertitle.png");
+                    background-size: 100% 100%;
+                }
+
+                .leftOBContent {
+                    height: calc(100% - 40px);
+                }
+            }
+        }
+
+        .boxBottom {
+            position: absolute;
+            z-index: 999;
+            height: 270px;
+            bottom: 0;
+            width: 900px;
+            left: 510px;
+            display: flex;
+            background-color: rgba($color: #000000, $alpha: .3);
+
+            .boxBttOne {
+                width: 50%;
+                height: 100%;
+
+                .leftOBTitle {
+                    height: 40px;
+                    color: white;
+                    line-height: 40px;
+                    padding-left: 60px;
+                    font-weight: bold;
+                    background-image: url("../../assets/visualizationimg/centertitle.png");
+                    background-size: 100% 100%;
+                }
+
+                .leftOBContent {
+                    height: calc(100% - 40px);
+                }
+            }
+
+            .boxBttTwo {
+                width: 50%;
+                height: 100%;
 
                 .leftOBTitle {
                     height: 40px;
@@ -236,14 +341,15 @@ onBeforeUnmount(() => {
             position: relative;
             margin-left: -500px;
             width: 500px;
-            background-color: rgba($color: #000000, $alpha: 0.2);
+            // background-color: rgba($color: #000000, $alpha: 0.2);
             height: 100%;
             top: 60px;
             z-index: 999;
 
             .leftOneBox {
-                height: 45%;
-                background-color: rgba($color: #000000, $alpha: .5);
+                height: 30%;
+                background-color: rgba($color: #000000, $alpha: .3);
+                margin-bottom: 14px;
 
                 .leftOBTitle {
                     height: 40px;