From 528929f870584fc4288849684e7482f561509d03 Mon Sep 17 00:00:00 2001
From: ylj20011123 <YLJ>
Date: Thu, 30 Oct 2025 16:28:01 +0800
Subject: [PATCH] update

---
 .../components/AreaLegend/AreaLegend.less     |  49 +-
 .../components/AreaLegend/AreaLegend.vue      |  22 +-
 .../components/BusinessCase/BusinessCase.vue  | 873 +++++++-----------
 src/page/index/components/PageMap/PageMap.vue |  11 +-
 .../RegionalRevenue/RegionalRevenue.vue       |   8 +-
 5 files changed, 397 insertions(+), 566 deletions(-)

diff --git a/src/page/index/components/AreaLegend/AreaLegend.less b/src/page/index/components/AreaLegend/AreaLegend.less
index 17532d5..dc0f4a9 100644
--- a/src/page/index/components/AreaLegend/AreaLegend.less
+++ b/src/page/index/components/AreaLegend/AreaLegend.less
@@ -9,32 +9,37 @@
         width: 100%;
         height: 100%;
         display: flex;
+        justify-content: flex-start;
         align-items: center;
+        flex-wrap: wrap;
+        /* 允许换行 */
+    }
 
-        .AreaLegendBoxItem {
-            display: flex;
-            align-items: center;
-            box-sizing: border-box;
-            padding-left: 30px;
+    .AreaLegendBoxItem {
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+        padding-left: 30px;
+        /* 每个项目占据20%的宽度，最多显示5个 */
+        min-width: 120px;
+        /* 确保每个项目有足够的空间 */
 
-            .AreaLegendBoxItemIcon {
-                width: 20px;
-                height: 20px;
-                margin-right: 8px;
-                border-radius: 50%;
-            }
-
-            .AreaLegendBoxItemLabel {
-                font-family: OPPOSans, OPPOSans;
-                font-weight: normal;
-                font-size: 14px;
-                color: #E4F3FF;
-                line-height: 18px;
-                text-align: left;
-                font-style: normal;
-            }
+        .AreaLegendBoxItemIcon {
+            width: 20px;
+            height: 20px;
+            margin-right: 8px;
+            margin-bottom: 8px;
+            border-radius: 50%;
         }
 
-
+        .AreaLegendBoxItemLabel {
+            font-family: OPPOSans, OPPOSans;
+            font-weight: normal;
+            font-size: 14px;
+            color: #E4F3FF;
+            line-height: 18px;
+            text-align: left;
+            font-style: normal;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/page/index/components/AreaLegend/AreaLegend.vue b/src/page/index/components/AreaLegend/AreaLegend.vue
index c4a0c78..5363797 100644
--- a/src/page/index/components/AreaLegend/AreaLegend.vue
+++ b/src/page/index/components/AreaLegend/AreaLegend.vue
@@ -2,15 +2,13 @@
 import { watch } from 'vue';
 import './AreaLegend.less'
 
-
-// 配色方案一
+// 配色方案，扩展为30个颜色
 let colorList1 = [
-    "#4F83FA",
-    "#A39BFF",
-    "#63B6FC",
-    "#88DFB2",
-    "#88C3BF",
-    "#d9dcf3",
+    "#4F83FA", "#A39BFF", "#63B6FC", "#88DFB2", "#88C3BF", "#d9dcf3",
+    "#FF7F50", "#87CEFA", "#8A2BE2", "#A52A2A", "#DEB887", "#5F9EA0",
+    "#7FFF00", "#D2691E", "#FF69B4", "#CD5C5C", "#8B0000", "#006400",
+    "#FFD700", "#DAA520", "#808080", "#F0E68C", "#ADFF2F", "#00008B",
+    "#008080", "#FF00FF", "#800080", "#FF6347", "#2E8B57", "#F4A460"
 ];
 
 const props = defineProps<{
@@ -24,17 +22,17 @@ watch(
     },
     { deep: true }
 );
-
 </script>
 
 <template>
     <div class="AreaLegendBox">
         <div class="AreaLegendBoxList" v-if="props.mapLegend && props.mapLegend.length > 0">
-            <div class="AreaLegendBoxItem" :style="{ width: `calc(100% / ${props.mapLegend.length})` }"
+            <div class="AreaLegendBoxItem" :style="{ width: `calc(100% / ${Math.min(props.mapLegend.length, 5)})` }"
                 v-for="(item, index) in props.mapLegend" :key="index">
-                <div class="AreaLegendBoxItemIcon" :style="{ background: item.value }"></div>
+                <div class="AreaLegendBoxItemIcon" :style="{ background: colorList1[index % colorList1.length] }"></div>
                 <div class="AreaLegendBoxItemLabel">{{ item.label }}</div>
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
+
diff --git a/src/page/index/components/BusinessCase/BusinessCase.vue b/src/page/index/components/BusinessCase/BusinessCase.vue
index d39e297..e599327 100644
--- a/src/page/index/components/BusinessCase/BusinessCase.vue
+++ b/src/page/index/components/BusinessCase/BusinessCase.vue
@@ -1,553 +1,376 @@
-<script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-import SmallTitle from '../smallTitle/smallTitle.vue'
-import RevenueYOYIcon from '../../../../assets/image/RevenueYOYIcon.png'
-import './BusinessCase.less'
-import moment from 'moment';
-import { handleCodeGetRevenueCompare, handleGetRevenueTrend } from '../../service';
-import * as echarts from 'echarts/core';
-import { BarChart, LineChart } from 'echarts/charts';
-import {
-    GridComponent,
-    TitleComponent,
-    TooltipComponent,
-    LegendComponent,
-    DatasetComponent, // 必须添加！否则 dataset 功能无效
-    TransformComponent // 如果使用 dataset.source 需要此组件
-} from 'echarts/components';
-import { CanvasRenderer } from 'echarts/renderers';
-import addIcon from '../../../../assets/image/addIcon.png'
-import reduce from '../../../../assets/image/reduce.png'
+<template>
+    <view class="business-case">
+        <!-- 营收特征标题和Tab切换 -->
+        <view class="section-header">
+            <text class="section-title">营收特征</text>
+            <view class="tab-container">
+                <view v-for="(item, index) in tabList" :key="index"
+                    :class="selectTab === item.value ? 'tab-item active-tab' : 'tab-item'"
+                    @click="handleChangeTab(item.value)">
+                    {{ item.label }}
+                </view>
+            </view>
+        </view>
 
+        <!-- 营收特征分析图表 -->
+        <view class="chart-container">
+            <QiunDataCharts type="column" :opts="chartOpts" :chartData="chartData" :canvas2d="true" :inScrollView="true"
+                canvasId="businessCaseChart" :animation="false" :ontap="true" :ontouch="true" />
+        </view>
+    </view>
+</template>
 
+<script>
+import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
+import request from "@/util/index.js";
+import moment from 'moment'
 
-// 注册组件
-echarts.use([
-    LineChart,
-    BarChart,
-    GridComponent,
-    TitleComponent,
-    TooltipComponent,
-    LegendComponent,
-    DatasetComponent, // 必须注册
-    TransformComponent, // 必须注册
-    CanvasRenderer
-]);
-
-
-let myChart: echarts.ECharts;
-let myChartBottom: echarts.ECharts;
-
-const tabList: any = [
-    { label: "营收金额", value: 1 },
-    { label: "客单量", value: 2 },
-    { label: "客单均价", value: 3 },
-]
-let selectTab = ref<number>(1)
-
-
-
-// 当前请求来的实际数据
-let realData = ref<any>()
-// 请求到的整个数据
-let getAllData = ref<any>()
-
-// 传入的数据
-const props = defineProps<{
-    currentService?: any;
-    selectTab?: any
-}>();
-
-// 监听传入的选中服务区
-watch(
-    () => props.currentService,
-    (newVal, oldVal) => {
-        handleGetData()
-        handleGetBottomData()
+export default {
+    components: {
+        QiunDataCharts
     },
-    { deep: true }
-);
 
-// 监听传入的选中服务区
-watch(
-    () => props.selectTab,
-    (newVal, oldVal) => {
-        handleShowData(newVal)
+    data() {
+        return {
+            // Tab列表
+            tabList: [
+                { label: "营收金额", value: 1 },
+                { label: "客单量", value: 2 },
+                { label: "客单均价", value: 3 }
+            ],
+            selectTab: 1, // 当前选中的Tab
+
+            // 当前请求来的实际数据
+            realData: {},
+
+            // 图表原始数据
+            rawData: {
+                category: [],
+                seriesData: []
+            }
+        }
     },
-    { deep: true }
-);
 
-onMounted(async () => {
-    // 用tab可以修改的方法
-    await handleGetData()
-    // await handleGetBottomData()
-})
+    computed: {
+        // 图表数据
+        chartData() {
+            return {
+                categories: this.rawData.category,
+                series: this.rawData.seriesData
+            }
+        },
 
+        // 图表配置
+        chartOpts() {
+            return {
+                padding: [15, 15, 40, 15],
+                dataLabel: false,
+                enableScroll: true,
+                xAxis: {
+                    disableGrid: true,
+                    itemCount: 4,
+                    scrollShow: true,
+                    scrollAlign: 'left',
+                    scrollColor: '#46B8F3',
+                    scrollWidth: 4,
+                    scrollHeight: 8,
+                    margin: 15
+                },
+                yAxis: {
+                    data: [{
+                        min: 0,
+                        title: this.getYAxisTitle()
+                    }]
+                },
+                legend: {
+                    show: true,
+                    position: 'bottom',
+                    float: 'center',
+                    backgroundColor: 'rgba(0,0,0,0)',
+                    borderColor: 'rgba(0,0,0,0)',
+                    fontSize: 12,
+                    fontColor: '#333333',
+                    margin: 0,
+                    padding: 0,
+                    itemGap: 10,
+                    textAlign: 'left'
+                },
+                extra: {
+                    column: {
+                        type: 'group',
+                        width: 12,
+                        activeBgColor: '#000000',
+                        activeBgOpacity: 0.08,
+                        seriesGap: 0,
+                        barBorderRadius: [3, 3, 0, 0]
+                    }
+                }
+            }
+        }
+    },
 
-// 切换tab的内容
-const handleChangeTab = async (value: number) => {
-    selectTab.value = value
-    handleShowData(value)
-}
+    onReady() {
+        this.handleGetBusinessCaseData()
+    },
 
-// 拿到数据的方法
-const handleGetData = async () => {
-    const req: any = {
-        ProvinceCode: "530000",
-        StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
-        ServerpartId: props.currentService?.SERVERPART_ID || "",
-    }
+    methods: {
+        // 获取营收特征数据
+        async handleGetBusinessCaseData() {
+            const req = {
+                ProvinceCode: "530000",
+                StatisticsDate: moment().subtract(1, 'd').format('YYYY-MM-DD'),
+                ServerpartId: "", // 暂时为空，如果需要传入服务区ID可以在这里添加
+            }
 
-    let BusinessCase = sessionStorage.getItem('BusinessCase')
-    let data: any = []
-    if (BusinessCase) {
-        data = JSON.parse(BusinessCase)
-    } else {
-        data = await handleCodeGetRevenueCompare(req)
-        sessionStorage.setItem("BusinessCase", JSON.stringify(data))
-    }
+            const data = await this.getRevenueCompare(req);
 
-    // const data = await handleCodeGetRevenueCompare(req)
+            // 处理数据
+            this.processChartData(data)
+        },
 
-    getAllData.value = data
+        // 发起API请求获取营收特征数据
+        async getRevenueCompare(params) {
+            const data = await request.$webGet(
+                "CommercialApi/Revenue/GetCodeRevenueCompare",
+                params
+            );
+            console.log('营收特征数据', data);
+            return data || {}
+        },
 
-    // 营收金额  
-    let category: any = ['product']
-    let monthList: number[] = []
-    let list = data.RevenueAmountList
-    if (list && list.length > 0) {
-        list.forEach((item: any, index: number) => {
-            category.push(item.name)
-            if (index === 0 && item.data && item.data.length > 0) {
-                item.data.forEach((subItem: any) => {
-                    monthList.push(subItem[0])
+        // 处理图表数据
+        processChartData(data) {
+            let monthList = []
+
+            // 获取月份列表
+            let list = data.RevenueAmountList
+            if (list && list.length > 0) {
+                list.forEach((item, index) => {
+                    if (index === 0 && item.data && item.data.length > 0) {
+                        item.data.forEach((subItem) => {
+                            monthList.push(subItem[0])
+                        })
+                    }
                 })
             }
-        })
+
+            // 营收金额数据
+            let revenueData = this.processRevenueAmount(data, monthList)
+
+            // 客单量数据
+            let ticketData = this.processTicketCount(data, monthList)
+
+            // 客单均价数据
+            let avgData = this.processAvgTicketAmount(data, monthList)
+
+            // 保存所有数据
+            this.realData = {
+                1: revenueData,
+                2: ticketData,
+                3: avgData
+            }
+
+            // 显示当前选中的数据
+            this.handleShowData(this.selectTab)
+        },
+
+        // 处理营收金额数据
+        processRevenueAmount(data, monthList) {
+            let category = []
+            let seriesData = []
+
+            let list = data.RevenueAmountList
+            if (list && list.length > 0) {
+                list.forEach((item) => {
+                    let dataValues = []
+                    if (monthList && monthList.length > 0) {
+                        monthList.forEach((month) => {
+                            let newData = item.data
+                            dataValues.push(Number(((newData[month - 1][1]) / 10000).toFixed(2)))
+                        })
+                    }
+                    seriesData.push({
+                        name: item.name,
+                        data: dataValues
+                    })
+                })
+            }
+
+            if (monthList && monthList.length > 0) {
+                monthList.forEach((month) => {
+                    category.push(`${month}月`)
+                })
+            }
+
+            return { category, seriesData }
+        },
+
+        // 处理客单量数据
+        processTicketCount(data, monthList) {
+            let category = []
+            let seriesData = []
+
+            let list = data.TicketCountList
+            if (list && list.length > 0) {
+                list.forEach((item) => {
+                    let dataValues = []
+                    if (monthList && monthList.length > 0) {
+                        monthList.forEach((month) => {
+                            let newData = item.data
+                            dataValues.push(Number(((newData[month - 1][1]) / 10000).toFixed(2)))
+                        })
+                    }
+                    seriesData.push({
+                        name: item.name,
+                        data: dataValues
+                    })
+                })
+            }
+
+            if (monthList && monthList.length > 0) {
+                monthList.forEach((month) => {
+                    category.push(`${month}月`)
+                })
+            }
+
+            return { category, seriesData }
+        },
+
+        // 处理客单均价数据
+        processAvgTicketAmount(data, monthList) {
+            let category = []
+            let seriesData = []
+
+            let list = data.AvgTicketAmountList
+            if (list && list.length > 0) {
+                list.forEach((item) => {
+                    let dataValues = []
+                    if (monthList && monthList.length > 0) {
+                        monthList.forEach((month) => {
+                            let newData = item.data
+                            dataValues.push(Number(newData[month - 1][1]))
+                        })
+                    }
+                    seriesData.push({
+                        name: item.name,
+                        data: dataValues
+                    })
+                })
+            }
+
+            if (monthList && monthList.length > 0) {
+                monthList.forEach((month) => {
+                    category.push(`${month}月`)
+                })
+            }
+
+            return { category, seriesData }
+        },
+
+        // 切换显示的数据
+        handleShowData(tabValue) {
+            const data = this.realData[tabValue]
+            if (data) {
+                this.rawData = {
+                    category: data.category,
+                    seriesData: data.seriesData
+                }
+            }
+        },
+
+        // 切换Tab
+        handleChangeTab(value) {
+            this.selectTab = value
+            this.handleShowData(value)
+        },
+
+        // 获取Y轴标题
+        getYAxisTitle() {
+            if (this.selectTab === 1) {
+                return '营收金额(万元)'
+            } else if (this.selectTab === 2) {
+                return '客单量(万笔)'
+            } else if (this.selectTab === 3) {
+                return '客单均价(元)'
+            }
+            return ''
+        },
+
     }
-
-    let aiObj1: any = {}
-    // 营收
-    let res: any = []
-    if (monthList && monthList.length > 0) {
-        monthList.forEach((item: number) => {
-            let list: any = [`${item}月`]
-            data.RevenueAmountList.forEach((subItem: any) => {
-                let newData: any = subItem.data
-                list.push(Number(((newData[item - 1][1]) / 10000).toFixed(2)))
-            })
-            aiObj1[`${item}月`] = `工作日平均${list[1]}元,周末平均${list[2]}元,节假日平均${list[3]}元`
-            res.push(list)
-        })
-    }
-
-    // 客单量
-    let res2: any = []
-    let aiObj2: any = {}
-    if (monthList && monthList.length > 0) {
-        monthList.forEach((item: number) => {
-            let list: any = [`${item}月`]
-            data.TicketCountList.forEach((subItem: any) => {
-                let newData: any = subItem.data
-                list.push(Number(((newData[item - 1][1]) / 10000).toFixed(2)))
-            })
-            aiObj2[`${item}月`] = `工作日平均${list[1]}元,周末平均${list[2]}元,节假日平均${list[3]}元`
-            res2.push(list)
-        })
-    }
-
-    // 均价
-    let res3: any = []
-    let aiObj3: any = {}
-    if (monthList && monthList.length > 0) {
-        monthList.forEach((item: number) => {
-            let list: any = [`${item}月`]
-            data.AvgTicketAmountList.forEach((subItem: any) => {
-                let newData: any = subItem.data
-                list.push(newData[item - 1][1])
-            })
-            aiObj3[`${item}月`] = `工作日平均${list[1]}元,周末平均${list[2]}元,节假日平均${list[3]}元`
-            res3.push(list)
-        })
-    }
-
-
-    let obj: any = {
-        1: [category, ...res],
-        2: [category, ...res2],
-        3: [category, ...res3],
-    }
-    realData.value = obj
-
-    let BusinessCaseAI = sessionStorage.getItem('BusinessCaseAI')
-    if (BusinessCaseAI) { } else {
-        let aiObj: any = {
-            "营收金额": aiObj1,
-            "客单量": aiObj2,
-            "客单均价": aiObj3,
-        }
-        sessionStorage.setItem("BusinessCaseAI", JSON.stringify(aiObj))
-    }
-
-    handleShowData(selectTab.value)
 }
-
-// 拿到底部的方法
-const handleGetBottomData = async () => {
-    const req: any = {
-        ProvinceCode: "530000",
-        StatisticsDate: moment().format('YYYY'),
-        StatisticsType: 1,
-        ServerpartId: props.currentService?.SERVERPART_ID || "",
-    }
-    const yesReq: any = {
-        ProvinceCode: "530000",
-        StatisticsDate: moment().subtract(1, 'y').format('YYYY'),
-        StatisticsType: 1,
-        ServerpartId: props.currentService?.SERVERPART_ID || "",
-    }
-    const data = await handleGetRevenueTrend(req)
-    const yesData = await handleGetRevenueTrend(yesReq)
-
-
-    let category: string[] = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
-    let currentYear: number[] = []
-    let lastYear: number[] = []
-
-    if (data && data.length > 0) {
-        data.forEach((item: any) => {
-            currentYear.push(Number((Number(item.value) / 10000).toFixed(2)))
-        })
-    }
-
-    if (yesData && yesData.length > 0) {
-        yesData.forEach((item: any) => {
-            lastYear.push(Number((Number(item.value) / 10000).toFixed(2)))
-        })
-    }
-
-    await handleShowBottomData({
-        category: category,
-        currentYear: currentYear,
-        lastYear: lastYear,
-    })
-
-}
-
-// 切换显示的数据源  营收特征分析的
-const handleShowData = async (value: number) => {
-    let data = realData.value[value]
-
-
-
-    const chartDom = document.getElementById('featureAnalysis');
-    if (!chartDom) return;
-
-    myChart = echarts.init(chartDom);
-
-    const option = {
-        legend: {
-            top: 15,
-            right: 0,
-            textStyle: {
-                color: '#ffffff' // 设置图例文字为白色
-            }
-        },
-        tooltip: { trigger: 'axis' },
-        dataset: { source: data },
-        xAxis: {
-            type: 'category',
-            axisLabel: {
-                width: '80',
-                interval: 0,
-                color: '#fff',
-                formatter: '{value}'  // 刻度值保持纯数字
-            },
-            axisLine: {
-                lineStyle: {
-                    color: '#fff' // 设置 y 轴线颜色为白色（可选）
-                }
-            },
-            axisTick: {
-                show: false // 隐藏刻度小线条
-            }
-        },
-        yAxis: {
-            name: `${selectTab.value === 1 ? '营收金额(万元)' : selectTab.value === 2 ? '客单量(万笔)' : selectTab.value === 3 ? '客单均价(元)' : ''}`,
-            splitLine: { show: false },  // 隐藏网格线
-            axisLine: {
-                show: true,             // 显示Y轴线
-                lineStyle: {
-                    color: '#fff'       // 轴线颜色
-                }
-            },
-            axisTick: {
-                show: false             // 隐藏刻度线（短横线）
-            },
-            axisLabel: {
-                width: '80',
-                color: '#fff'
-            },
-            nameTextStyle: {
-                color: '#fff',          // 名称颜色
-                padding: [0, 0, 35, 30]  // 名称位置调整
-            }
-        },
-        series: [{
-            type: 'bar',
-            itemStyle: {
-                color: '#0094FF' // 第一根柱子的颜色
-            }
-        },
-        {
-            type: 'bar',
-            itemStyle: {
-                color: '#69BCFF' // 第一根柱子的颜色
-            }
-        },
-        {
-            type: 'bar',
-            itemStyle: {
-                color: '#6B7C8B' // 第一根柱子的颜色
-            }
-        }],
-        grid: {
-            left: '0',    // 左侧间距
-            right: '0',   // 右侧间距
-            bottom: '0',    // 底部间距
-            top: '120',       // 顶部间距
-            containLabel: true // 确保坐标轴标签在grid内
-        },
-    };
-
-    myChart.setOption(option);
-    window.addEventListener('resize', resizeChart);
-}
-
-// 切换显示数据源  营收同比分析的
-const handleShowBottomData = async (res: any) => {
-
-    const chartDom = document.getElementById('featureAnalysisBottom');
-    if (!chartDom) return;
-    myChartBottom = echarts.init(chartDom);
-
-
-    const option = {
-        legend: {
-            top: 10,              // 距离容器底部距离
-            right: 0,
-            itemWidth: 20,          // 图例标记的图形宽度
-            itemHeight: 10,         // 图例标记的图形高度
-            textStyle: {
-                color: '#fff'       // 图例文字颜色
-            }
-        },
-        xAxis: {
-            type: 'category',
-            data: res.category,
-            boundaryGap: true,
-            axisLabel: {
-                interval: 0,
-                lineStyle: {
-                    color: '#fff' // 设置 y 轴线颜色为白色（可选）
-                }
-            },
-            axisLine: {
-                lineStyle: {
-                    color: '#fff' // 设置 y 轴线颜色为白色（可选）
-                }
-            },
-            axisTick: {
-                show: false // 隐藏刻度小线条
-            }
-        },
-        yAxis: {
-            name: `${selectTab.value === 1 ? '营收金额(万元)' : selectTab.value === 2 ? '客单量(万笔)' : selectTab.value === 3 ? '客单均价(元)' : ''}`,
-            type: 'value',
-            splitLine: { show: false },
-            axisLine: {
-                show: true,
-                lineStyle: {
-                    color: '#fff' // 设置 y 轴线颜色为白色（可选）
-                }
-            },
-            axisLabel: {
-                color: '#fff',
-            },
-            nameTextStyle: {
-                color: '#fff',          // 名称颜色
-                padding: [0, 0, 0, 20]  // 名称位置调整
-            }
-        },
-        grid: {
-            left: '10',    // 增加左侧空间
-            right: '10',   // 增加右侧空间
-            bottom: '0',
-            top: '80',
-            containLabel: true
-        },
-        series: [
-            {
-                name: '今年',
-                data: res.currentYear,
-                type: 'line',
-                lineStyle: {
-                    width: 2,
-                    color: '#0094FF'
-                },
-                itemStyle: {
-                    color: '#0094FF'
-                },
-            },
-            {
-                name: '去年',
-                data: res.lastYear,
-                type: 'line',
-                lineStyle: {
-                    width: 2,
-                    color: '#00FFB7' // 改为橙色
-                },
-                itemStyle: {
-                    color: '#00FFB7' // 改为橙色
-                },
-            }
-        ],
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'line' // 改为线条指示器
-            },
-            formatter: function (params: any) {
-                return `${params.map((item: any) => {
-                    return `<div>
-                    ${item.seriesName}：${item.value}万元
-                    </div>`
-                }).join("")}`
-            }
-        }
-    };
-
-    myChartBottom.setOption(option);
-    window.addEventListener('resize', resizeChartBottom);
-}
-
-const resizeChart = () => {
-    myChart?.resize();
-};
-const resizeChartBottom = () => {
-    myChart?.resize();
-};
-
-onBeforeUnmount(() => {
-    window.removeEventListener('resize', resizeChart);
-    myChart?.dispose();
-
-
-    window.removeEventListener('resize', resizeChartBottom);
-    myChartBottom?.dispose();
-});
-
-defineExpose({
-    handleGetData
-});
-
-
-
 </script>
 
+<style scoped lang="less">
+@primary-color: #46B8F3;
+@secondary-color: #3CD495;
+@danger-color: #FF5E5E;
+@success-color: #52C41A;
+@text-primary: #333;
+@text-secondary: #666;
+@text-light: #999;
+@bg-white: #ffffff;
+@border-radius: 16rpx;
+@shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 
+.business-case {
+    margin-top: 24rpx;
 
-<template>
-    <div class="BusinessCaseBox">
-        <div class="BusinessCaseBoxContent">
-            <SmallTitle title="营收特征">
-                <!-- <template #extra>
-                <div class="BusinessCaseTabBox">
-                    <div :class="selectTab === item.value ? 'BusinessCaseItem selectBusinessCaseItem' : 'BusinessCaseItem'"
-                        v-for="(item, index) in tabList" :key="index" @click="handleChangeTab(item.value)">
-                        {{ item.label }}
-                    </div>
-                </div>
-            </template> -->
-            </SmallTitle>
-        </div>
+    .section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 20rpx;
+        padding: 0 8rpx;
 
+        .section-title {
+            font-size: 30rpx;
+            font-weight: 600;
+            color: @text-primary;
+        }
 
-        <!-- 营收同比 -->
-        <div class="BusinessCaseRevenueYOY" v-if="false">
-            <div class="BusinessCaseLeftItem">
-                <img class="BusinessIcon" :src="RevenueYOYIcon" />
-            </div>
+        .tab-container {
+            display: inline-flex;
+            align-items: center;
+            background: linear-gradient(90deg, rgba(0, 148, 255, 0.1) 0%, rgba(0, 148, 255, 0) 100%);
+            padding: 6rpx 40rpx;
+            box-sizing: border-box;
+            border-radius: 20rpx;
 
-            <div class="BusinessCaseRightItem">
-                <div class="BusinessCaseRightItemTop">
-                    <div class="rightItemTitle">营收同比</div>
-                    <div class="rightItemUpdate">{{ moment().subtract(1, 'd').format('YYYY-MM-DD') }}</div>
-                </div>
-                <div class="BusinessCaseRightItemBottom">
-                    <div class="BusinessCaseItemBottomLeft">
-                        <div class="changeBox">
-                            <img v-if="getAllData?.RevenueAmountYOYRate || getAllData?.TicketCountYOYRate || getAllData?.AvgTicketAmountRate"
-                                class="changeIcon" :src="selectTab === 1 ? getAllData?.RevenueAmountYOYRate > 0 ? addIcon : reduce :
-                                    selectTab === 2 ? getAllData?.TicketCountYOYRate > 0 ? addIcon : reduce :
-                                        selectTab === 3 ? getAllData?.AvgTicketAmountRate > 0 ? addIcon : reduce : ''
-                                    " />
-                            <div class="changeText" :style="{
-                                color: selectTab === 1 ? getAllData?.RevenueAmountYOYRate > 0 ? '#00FF00' : '#D24343' :
-                                    selectTab === 2 ? getAllData?.TicketCountYOYRate > 0 ? '#00FF00' : '#D24343' :
-                                        selectTab === 3 ? getAllData?.AvgTicketAmountRate > 0 ? '#00FF00' : '#D24343' : ''
-                            }">{{
-                                selectTab === 1 ? getAllData?.RevenueAmountYOYRate || '-' :
-                                    selectTab === 2 ? getAllData?.TicketCountYOYRate || '-' :
-                                        selectTab === 3 ? getAllData?.AvgTicketAmountRate || '-' : ''
-                            }}%</div>
-                            <div class="compareTitle">(相比去年同日)</div>
-                        </div>
-                    </div>
+            .tab-item {
+                font-size: 30rpx;
+                color: @text-secondary;
+                margin: 0 20rpx;
+                cursor: pointer;
+                transition: all 0.3s ease;
+                position: relative;
 
-                    <div class="BusinessCaseItemBottomRight">
-                        <div class="BusinessCaseRevenueValue">{{ selectTab === 1 ?
-                            getAllData?.RevenueAmount.toLocaleString() :
-                            selectTab
-                                === 2 ?
-                                getAllData?.TicketCount.toLocaleString() : selectTab === 3 ?
-                                    getAllData?.AvgTicketAmount.toLocaleString() : ''
-                        }}</div>
-                        <div class="BusinessCaseRevenueUnit">{{ selectTab === 2 ? '笔' : '元' }}</div>
-                    </div>
-                </div>
+                &.active-tab {
+                    color: @text-primary;
+                    font-weight: 600;
 
-                <!-- <div class="rightItemLeft">
-                    <div class="rightItemTitleBox">
-                        <div class="rightItemTitle">营收同比</div>
-                        <div class="rightItemUpdate">{{ moment().subtract(1, 'd').format('YYYY-MM-DD') }}</div>
-                    </div>
-                    <div class="rightItemBottom">
-                        <div class="compareTitle">相比去年同日</div>
-                        <div class="changeBox">
-                            <img class="changeIcon" />
-                            <div class="changeText"></div>
-                        </div>
-                    </div>
-                </div> -->
+                    &::after {
+                        content: "";
+                        width: 100%;
+                        height: 2rpx;
+                        background: linear-gradient(180deg, #00F6FF 0%, #008CFF 100%);
+                        position: absolute;
+                        left: 0;
+                        bottom: -8rpx;
+                    }
+                } 
+            }
+        }
+    }
 
-                <!-- <div class="rightItemRight">
-                    <div class="BusinessCaseRevenueValue"></div>
-                    <div class="BusinessCaseRevenueUnit">元</div>
-                </div> -->
-            </div>
-        </div>
-
-        <!-- 营收特征分析 -->
-        <div class="featureAnalysis">
-            <!-- <SmallTitle title="营收特征分析" /> -->
-
-            <div class="featureAnalysisBox" id="featureAnalysis"></div>
-
-            <!-- <SmallTitle title="营收同比分析" style="margin-top: 31px;" />
-
-            <div class="featureAnalysisBottom" id="featureAnalysisBottom"></div> -->
-        </div>
-
-    </div>
-</template>
\ No newline at end of file
+    .chart-container {
+        background: @bg-white;
+        border-radius: @border-radius;
+        padding: 24rpx;
+        box-shadow: @shadow;
+        margin-bottom: 24rpx;
+        width: 100%;
+        box-sizing: border-box;
+        height: 400rpx;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/page/index/components/PageMap/PageMap.vue b/src/page/index/components/PageMap/PageMap.vue
index 26fcb9f..9ffe4df 100644
--- a/src/page/index/components/PageMap/PageMap.vue
+++ b/src/page/index/components/PageMap/PageMap.vue
@@ -12,12 +12,11 @@ import YNHighWayLine from '../../../../options/YNHighWayLine.js'
 const scene = ref<any>();
 // 配色方案一
 let colorList1 = [
-    "#4F83FA",
-    "#A39BFF",
-    "#63B6FC",
-    "#88DFB2",
-    "#88C3BF",
-    "#d9dcf3",
+    "#4F83FA", "#A39BFF", "#63B6FC", "#88DFB2", "#88C3BF", "#d9dcf3",
+    "#FF7F50", "#87CEFA", "#8A2BE2", "#A52A2A", "#DEB887", "#5F9EA0",
+    "#7FFF00", "#D2691E", "#FF69B4", "#CD5C5C", "#8B0000", "#006400",
+    "#FFD700", "#DAA520", "#808080", "#F0E68C", "#ADFF2F", "#00008B",
+    "#008080", "#FF00FF", "#800080", "#FF6347", "#2E8B57", "#F4A460"
 ];
 // 所有服务区的数据
 let defaultServerPartList = reactive<any>([]);
diff --git a/src/page/index/components/RegionalRevenue/RegionalRevenue.vue b/src/page/index/components/RegionalRevenue/RegionalRevenue.vue
index c7b2755..f5170b1 100644
--- a/src/page/index/components/RegionalRevenue/RegionalRevenue.vue
+++ b/src/page/index/components/RegionalRevenue/RegionalRevenue.vue
@@ -26,7 +26,13 @@ echarts.use([
 
 let myChart: echarts.ECharts;
 // 自定义颜色列表
-const colorList = ['#FF307C', '#FF9500', '#FFD900', '#00FFB7', '#0094FF', '#7D4CD2'];
+const colorList = [
+    "#4F83FA", "#A39BFF", "#63B6FC", "#88DFB2", "#88C3BF", "#d9dcf3",
+    "#FF7F50", "#87CEFA", "#8A2BE2", "#A52A2A", "#DEB887", "#5F9EA0",
+    "#7FFF00", "#D2691E", "#FF69B4", "#CD5C5C", "#8B0000", "#006400",
+    "#FFD700", "#DAA520", "#808080", "#F0E68C", "#ADFF2F", "#00008B",
+    "#008080", "#FF00FF", "#800080", "#FF6347", "#2E8B57", "#F4A460"
+];
 let allServiceId: string = '1143,1144,1186,1188,1189,1190,1191,1192,1193,979,999,1023,1029,1030,1031,1033,1037,1041,1078,1087,1095,1137,1141,1147,1157,1159,1164,1165,1170,1174,981,985,987,994,1007,1009,1010,1012,1016,971,996,1002,1017,1018,1022,1027,1032,1073,1076,1099,1118,1122,1140,1142,1150,1171,970,969,978,1001,1005,1015,1050,1051,1052,1053,1064,1066,1096,1097,1101,1103,1104,1105,1106,1109,1112,1114,1115,1116,1117,991,995,1039,1080,1094,1100,1107,1123,1127,1133,1154,1155,1161,1163,1179,1180,1019,1021,1048,1049,1056,1059,1062,1063,1069,1093,1067,1228,1008,1070,1072,1166,1113,1148,1153,986,1086,1075,1182,1068,1226,1218,1088,1090,1058,1044,1084,1077,1089,1081,1091,1083,1162,1036,1092,988,993,1111,1158,1194,1202,1198,1207,1216,1221,1203,1206,1209,1215,1227,1201,1205,1208,1214,1217,1229,1212,1065,1085,1055,1071,982,1168,1185,1110,977,1169,973,974,1011,1151,1121,1046,1045,1172,1146,976,1187,1156,1181,1136,1138,1211,983,1195,1131,1176,1167,1223,997,1252,1225,1043,1129,992,1149,975,1382,989,1047,1197,1025,1199,1183,1222,1178,1003,1013,1224,1139,1125,1173,1135,1038,1177,1060,1175,1184,1035,1026,1028,1079,1119,1120,1489'
 
 // 图例数据