update

pages/DigitalIntelligenceDashboard/components/RegionalServiceAreaAnalysis.vue

@@ -76,7 +76,20 @@
       <view class="chart-content">
         <view class="pie-chart-container">
           <QiunDataCharts type="pie" :opts="distributionChartOpts" :chartData="distributionChartData" :canvas2d="true"
-            :inScrollView="true" canvasId="distributionChart" />
+            :inScrollView="true" canvasId="distributionChart" tooltipFormat="distributionChartData" />
+        </view>
+        <!-- 自定义可滚动图例 -->
+        <view class="custom-region-legend">
+          <scroll-view class="legend-scroll" scroll-x="true" show-scrollbar="false">
+            <view class="legend-items">
+              <view v-for="(item, index) in regionLegendData" :key="index" class="legend-item"
+                @tap="onLegendTap(index)">
+                <view class="legend-color" :style="{ backgroundColor: item.color }"></view>
+                <text class="legend-name">{{ item.name }}</text>
+                <!-- 只显示名称，不显示百分比 -->
+              </view>
+            </view>
+          </scroll-view>
         </view>
       </view>
     </view>
@@ -480,9 +493,11 @@ export default {
 
     // 区域分布饼图数据
     distributionChartData() {
+      // 按服务区数量从大到小排序
+      const sortedData = [...this.distributionData].sort((a, b) => b.value - a.value);
       return {
         series: [{
-          data: this.distributionData.map(item => ({
+          data: sortedData.map(item => ({
             name: item.name,
             value: item.value
           }))
@@ -493,10 +508,11 @@ export default {
     // 区域分布饼图配置
     distributionChartOpts() {
       return {
+        color: ['#576EFF', '#52C41A', '#FAAD14', '#FF4D4F', '#13C2C2', '#722ED1', '#FA541C', '#EB2F96'],
         padding: [5, 5, 5, 5],
-        dataLabel: true,
+        dataLabel: false, // 关闭数据标签，避免拥挤
         legend: {
-          show: true
+          show: false // 关闭原生图例
         },
         extra: {
           pie: {
@@ -565,6 +581,18 @@ export default {
           }
         }
       }
+    },
+
+    // 区域分布图例数据
+    regionLegendData() {
+      const colors = ['#576EFF', '#52C41A', '#FAAD14', '#FF4D4F', '#13C2C2', '#722ED1', '#FA541C', '#EB2F96'];
+      // 按服务区数量从大到小排序，确保与饼图顺序一致
+      const sortedData = [...this.distributionData].sort((a, b) => b.value - a.value);
+      return sortedData.map((item, index) => ({
+        name: item.name,
+        value: item.value,
+        color: colors[index % colors.length]
+      }));
     }
   },
   onReady() {
@@ -664,6 +692,11 @@ export default {
 
     exportData() {
       console.log('导出区域服务区数据');
+    },
+
+    // 图例点击事件
+    onLegendTap(index) {
+      console.log('点击图例', index);
     }
   }
 }
@@ -913,6 +946,51 @@ export default {
         width: 100%;
       }
 
+      .custom-region-legend {
+        width: 100%;
+        margin-top: 16rpx;
+
+        .legend-scroll {
+          width: 100%;
+          white-space: nowrap;
+
+          .legend-items {
+            display: inline-flex;
+            padding: 0 8rpx;
+            gap: 24rpx;
+
+            .legend-item {
+              display: flex;
+              align-items: center;
+              gap: 8rpx;
+              padding: 8rpx 12rpx;
+              background: #f8f9fa;
+              border-radius: 16rpx;
+              white-space: nowrap;
+              transition: all 0.3s ease;
+
+              &:active {
+                background: #e6f7ff;
+                transform: scale(0.95);
+              }
+
+              .legend-color {
+                width: 16rpx;
+                height: 16rpx;
+                border-radius: 50%;
+                flex-shrink: 0;
+              }
+
+              .legend-name {
+                font-size: 24rpx;
+                color: @text-secondary;
+                font-weight: 500;
+              }
+            }
+          }
+        }
+      }
+
       .type-legend {
         display: flex;
         justify-content: center;

pages/DigitalIntelligenceDashboard/components/qiun-data-charts/js_sdk/u-charts/config-ucharts.js

@@ -95,11 +95,14 @@ const cfu = {
 	"option": {},
 	//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
 	"formatter": {
-		"regionDistributionData": function (item, category, index, opts) {
+		"distributionChartData": function (item, category, index, opts) {
 			console.log('', item);
 			console.log('', category);
 			console.log('', index);
 			console.log('', opts);
+			return `${item.name}：${item.data}对`
+		},
+		"regionDistributionData": function (item, category, index, opts) {
 			return `${item.name}：${item.data.toLocaleString()}元`
 		},
 		"timeDistributionChartData": function (item, category, index, opts) {