lcw

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>