lcw

src/components/GdMap/index.vue

@@ -44,7 +44,7 @@ import { getItem } from "@/utils/storage";
 const conditionRoute = ref(true); //路况
 const mMap = ref(null); //地图对象
 const mapUtil = ref(null); //地图工具对象
-const zoomTarget = ref(6);
+const zoomTarget = ref(15);
 
 const props = defineProps({
   mapid: {

src/components/GdMap/mapUtil.js

@@ -759,13 +759,13 @@ export function MapUtil(map) {
     if (!data) return false;
     // 使用传入的颜色参数，如果没有则使用默认值
     const fillColorValue = fillColor || 'rgba(27, 205, 211, 0.3)';
-    const borderColorValue = borderColor || '#cf1010';
+    const borderColorValue = borderColor || 'rgba(209,112,65,1)';
     const highlightColorValue = color || 'red';
     // 创建多边形
     const polygon = map.createPolygon(data, {
       color: fillColorValue,
       outLineColor: borderColorValue,
-      outLineWidth: 5,
+      outLineWidth: 1,
       highlightColor: highlightColorValue,
       type: 'solid',
       labelOption: {

src/components/MyComponents/Pie3D.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="chartRef" :style="{ width: '100%', height: '100%' }"></div>
+  <div ref="chartRef" class="chart-container"></div>
 </template>
 
 <script setup>
@@ -31,9 +31,11 @@ const initChart = () => {
       }
     },
     legend: {
+      type: 'scroll', // 启用滚动图例
+      selectedMode: 'multiple',
       orient: 'vertical',
       right: '0%',
-      top: '1%',
+      top: 'center',
       textStyle: {
         color: '#fff'
       },
@@ -43,7 +45,15 @@ const initChart = () => {
         const target = data.find(item => item.name === name)
         const percentage = ((target.value / total) * 100).toFixed(0)
         return `${name}  ${target.value}`
-      }
+      },
+      // 图例翻页配置
+      pageIconColor: '#fff', // 翻页按钮颜色
+      pageTextStyle: { color: '#fff' }, // 翻页文字颜色
+      pageIconSize: 12, // 翻页按钮大小
+      pageButtonItemGap: 5, // 分页按钮之间的间距
+      pageButtonGap: 10, // 分页按钮与图例项之间的间距
+      pageIconInactiveColor: '#555', // 不激活的翻页按钮颜色
+      pageButtonPosition: 'end' // 翻页按钮的位置
     },
     series: [{
       type: 'pie',
@@ -166,4 +176,9 @@ onUnmounted(() => {
 
 </script>
 
-<style scoped></style>
+<style scoped>
+.chart-container {
+  width: 100%;
+  height: 100%;
+}
+</style>