zd 优化俩图

src/views/efficiencyAnalysis/jcxx/components/CurveGraph.vue

@@ -82,7 +82,7 @@ export default {
                 crosshairLines.push({
                     name: '十字线',
                     type: 'line',
-                    data: [[crosshair.x - 10, crosshair.y], [crosshair.x + 10, crosshair.y]],
+                    data: [[crosshair.y - 10, crosshair.x], [crosshair.y + 10, crosshair.x]],
                     lineStyle: { color: 'black', width: 1, type: 'dashed' },
                     symbol: 'none',
                     tooltip: { show: false } // 十字线不显示tooltip
@@ -90,7 +90,7 @@ export default {
                 crosshairLines.push({
                     name: '十字线',
                     type: 'line',
-                    data: [[crosshair.x, crosshair.y - 500], [crosshair.x, crosshair.y + 500]],
+                    data: [[crosshair.y, crosshair.x - 500], [crosshair.y, crosshair.x + 500]],
                     lineStyle: { color: 'black', width: 1, type: 'dashed' },
                     symbol: 'none',
                     tooltip: { show: false } // 十字线不显示tooltip
@@ -98,7 +98,7 @@ export default {
                 crosshairCenter.push({
                     name: '十字线中心',
                     type: 'scatter',
-                    data: [[crosshair.x, crosshair.y]],
+                    data: [[crosshair.y, crosshair.x]],
                     symbolSize: 12,
                     itemStyle: { color: 'orange', borderColor: '#fff', borderWidth: 2 }
                 });
@@ -136,9 +136,16 @@ export default {
                     }
                 },
                 legend: {
-                    data: ['优化曲线',],
+                    data: ['指标', '钻速均值', '进尺均值', '优化曲线',],
                     top: '10%',
-                    left: 'center'
+                    right: '5%'
+                },
+                grid: {
+                    left: '2%',
+                    right: '5%',
+                    top: '15%',
+                    bottom: '10%',
+                    containLabel: true
                 },
                 xAxis: {
                     name: '钻速 (m/h)',
@@ -146,13 +153,21 @@ export default {
                     min: axisRange.xAxis.min,
                     max: axisRange.xAxis.max,
                     interval: axisRange.xAxis.interval,
-                    axisLabel: { formatter: '{value} m/h' }
+                    axisLabel: { formatter: '{value} m/h' },
+                    nameLocation: 'center',
+                    nameGap: 30,
+                    axisTick: { show: true },
+                    axisLine: { show: true }
                 },
                 yAxis: {
                     name: '进尺',
                     type: 'value',
                     min: axisRange.yAxis.min,
-                    interval: axisRange.yAxis.interval
+                    interval: axisRange.yAxis.interval,
+                    nameLocation: 'center',
+                    nameGap: 40,
+                    axisTick: { show: true },
+                    axisLine: { show: true }
                 },
                 series: [
                     {
@@ -166,14 +181,43 @@ export default {
                         emphasis: { showSymbol: false },
                         lineStyle: { color: 'red', width: 2 }
                     },
+                    {
+                        name: '钻速均值',
+                        type: 'line',
+                        data: [[crosshair.x, axisRange.yAxis.min], [crosshair.x, axisRange.yAxis.max]],
+                        lineStyle: { color: '#9eca7f', width: 2, type: 'dashed' },
+                        symbol: 'none',
+                        tooltip: { show: false }
+                    },
+                    {
+                        name: '进尺均值',
+                        type: 'line',
+                        data: [[crosshair.x - 500, crosshair.y], [crosshair.x + 500, crosshair.y]],
+                        lineStyle: { color: '#f2ca6b', width: 2 },
+                        symbol: 'none',
+                        tooltip: { show: false }
+                    },
                     ...crosshairLines,
                     ...crosshairCenter,
                     ...drillTypes.map(type => ({
                         name: type,
                         type: 'scatter',
                         data: scatter.filter(item => item[2] === type),
-                        symbolSize: 10,
-                        itemStyle: { color: 'blue' }
+                        symbolSize: 12,
+                        itemStyle: { 
+                            color: 'blue',
+                            borderColor: 'red',
+                            borderWidth: 3,
+                            shadowColor: 'red',
+                            shadowBlur: 8
+                        },
+                        label: {
+                            show: true,
+                            position: 'top',
+                            formatter: type,
+                            fontSize: 10,
+                            color: '#333'
+                        }
                     }))
                 ]
             };
@@ -202,7 +246,7 @@ export default {
 .drilling-chart-container {
     width: 100%;
     height: 100%;
-    padding: 20px;
+    /* padding: 20px; */
     box-sizing: border-box;
 }
 

src/views/efficiencyAnalysis/jcxx/components/HistogramGraph.vue

 <template>
     <div class="chart-container">
         <div id="mainzft" class="chart" ref="chartRef"></div>
+        <div v-if="loading" class="loading-overlay">
+            <div class="loading-spinner"></div>
+            <span>加载中...</span>
+        </div>
     </div>
 </template>
 
 <script>
 import * as echarts from "echarts";
 import { getZft } from "@/api/optimization/initialization";
+import { text } from "d3";
 
 export default {
     name: "HistogramGraph",
@@ -15,6 +20,12 @@ export default {
             type: String,
             default: "",
         },
+        // 美化配置选项
+        theme: {
+            type: String,
+            default: "modern", // modern, elegant, vibrant
+            validator: value => ["modern", "elegant", "vibrant"].includes(value)
+        }
     },
     data() {
         return {
@@ -23,41 +34,197 @@ export default {
             initRetryCount: 0,
             maxRetryCount: 5,
             resizeObserver: null,
+            loading: false,
+            debounceTimer: null,
         };
     },
+    computed: {
+        // 根据主题获取颜色配置
+        colorScheme() {
+            const schemes = {
+                modern: {
+                    primary: "#3B82F6",
+                    secondary: "#10B981", 
+                    accent: "#F59E0B",
+                    background: "#F8FAFC",
+                    text: "#1F2937",
+                    border: "#E5E7EB",
+                    gradient: {
+                        start: "#3B82F6",
+                        end: "#1D4ED8"
+                    }
+                },
+                elegant: {
+                    primary: "#6366F1",
+                    secondary: "#8B5CF6",
+                    accent: "#EC4899",
+                    background: "#FAFAFA",
+                    text: "#374151",
+                    border: "#D1D5DB",
+                    gradient: {
+                        start: "#6366F1",
+                        end: "#4F46E5"
+                    }
+                },
+                vibrant: {
+                    primary: "#EF4444",
+                    secondary: "#06B6D4",
+                    accent: "#F97316",
+                    background: "#FEFEFE",
+                    text: "#111827",
+                    border: "#F3F4F6",
+                    gradient: {
+                        start: "#EF4444",
+                        end: "#DC2626"
+                    }
+                }
+            };
+            return schemes[this.theme];
+        }
+    },
+    watch: {
+        jh: {
+            handler(newVal) {
+                if (newVal) {
+                    this.refreshChart();
+                }
+            },
+            immediate: true
+        }
+    },
     mounted() {
-        // 使用更长的延迟确保父容器完全渲染
-        this.$nextTick(() => {
-            setTimeout(() => {
-                this.initChart();
-                this.observeParentResize();
-            }, 800);
-        });
-
-        window.addEventListener("resize", this.handleResize);
+        this.initChart();
+        this.setupEventListeners();
     },
     beforeDestroy() {
-        window.removeEventListener("resize", this.handleResize);
-        if (this.myChart) {
-            this.myChart.dispose();
-        }
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
+        this.cleanup();
     },
     methods: {
+        // 初始化图表
+        async initChart() {
+            try {
+                this.loading = true;
+                
+                const chartDom = this.$refs.chartRef;
+                if (!chartDom) {
+                    throw new Error("未找到图表容器 DOM");
+                }
+
+                this.setChartDimensions(chartDom);
+                
+                // 重试机制优化
+                if (this.shouldRetry()) {
+                    this.scheduleRetry();
+                    return;
+                }
+
+                this.resetRetryCount();
+                this.disposeChart();
+                this.createChart(chartDom);
+                
+                const mockData = await this.getList();
+                if (!this.hasValidData(mockData)) {
+                    this.renderEmpty(chartDom);
+                    return;
+                }
+
+                await this.renderRealData(mockData);
+                
+            } catch (error) {
+                console.error("图表初始化失败:", error);
+                this.handleError(error);
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        // 设置图表尺寸
+        setChartDimensions(chartDom) {
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const availableHeight = viewportHeight - 120;
+            const availableWidth = viewportWidth - 80;
+            
+            chartDom.style.width = `${availableWidth}px`;
+            chartDom.style.height = `${availableHeight}px`;
+            chartDom.offsetHeight; // 强制重排
+        },
+
+        // 检查是否需要重试
+        shouldRetry() {
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const availableHeight = viewportHeight - 120;
+            const availableWidth = viewportWidth - 80;
+            return (availableWidth <= 0 || availableHeight <= 0) && this.initRetryCount < this.maxRetryCount;
+        },
+
+        // 安排重试
+        scheduleRetry() {
+            this.initRetryCount++;
+            setTimeout(() => this.initChart(), 500);
+        },
+
+        // 重置重试计数
+        resetRetryCount() {
+            this.initRetryCount = 0;
+        },
+
+        // 销毁图表
+        disposeChart() {
+            if (this.myChart) {
+                this.myChart.dispose();
+            }
+        },
+
+        // 创建图表实例
+        createChart(chartDom) {
+            this.myChart = echarts.init(chartDom, null, {
+                renderer: 'canvas',
+                useDirtyRect: true
+            });
+        },
+
+        // 检查数据有效性
+        hasValidData(mockData) {
+            return mockData && 
+                   mockData.wellData && 
+                   mockData.wellData.depthLine && 
+                   mockData.wellData.depthLine.length > 0;
+        },
+
+        // 设置事件监听器
+        setupEventListeners() {
+            window.addEventListener("resize", this.handleResize);
+            this.observeParentResize();
+        },
+
+        // 清理资源
+        cleanup() {
+            window.removeEventListener("resize", this.handleResize);
+            if (this.myChart) {
+                this.myChart.dispose();
+            }
+            if (this.resizeObserver) {
+                this.resizeObserver.disconnect();
+            }
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
+            }
+        },
+
+        // 观察父容器大小变化
         observeParentResize() {
             const parentDom = this.$refs.chartRef?.parentElement;
             if (parentDom && window.ResizeObserver) {
                 this.resizeObserver = new ResizeObserver(() => {
-                    if (this.myChart) {
-                        this.myChart.resize();
-                    }
+                    this.debouncedResize();
                 });
                 this.resizeObserver.observe(parentDom);
             }
         },
 
+        // 获取数据
         async getList() {
             try {
                 const res = await getZft({ jh: this.jh });
@@ -65,82 +232,116 @@ export default {
                 return this.mockData;
             } catch (error) {
                 console.error("获取数据失败:", error);
-                return {};
+                throw error;
             }
         },
 
-        async initChart() {
-            const chartDom = this.$refs.chartRef;
-            if (!chartDom) {
-                console.error("未找到图表容器 DOM");
-                return;
-            }
-
-            // 获取视口尺寸
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-
-            // 计算可用空间（减去导航栏等固定元素的高度）
-            const availableHeight = viewportHeight - 120; // 减去导航栏等高度
-            const availableWidth = viewportWidth - 80; // 减去左右边距，增加边距
-
-            // 设置图表容器尺寸
-            chartDom.style.width = `${availableWidth}px`;
-            chartDom.style.height = `${availableHeight}px`;
-
-            // 强制重排
-            chartDom.offsetHeight;
+        // 处理窗口大小变化
+        handleResize() {
+            this.debouncedResize();
+        },
 
-            // 重试机制
-            if ((availableWidth <= 0 || availableHeight <= 0) && this.initRetryCount < this.maxRetryCount) {
-                this.initRetryCount++;
-                setTimeout(() => this.initChart(), 500);
-                return;
+        // 防抖处理resize
+        debouncedResize() {
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
             }
+            this.debounceTimer = setTimeout(() => {
+                this.performResize();
+            }, 200);
+        },
 
-            this.initRetryCount = 0;
+        // 执行resize操作
+        performResize() {
             if (this.myChart) {
-                this.myChart.dispose();
+                const chartDom = this.$refs.chartRef;
+                if (chartDom) {
+                    this.setChartDimensions(chartDom);
+                }
+                this.myChart.resize();
             }
-            this.myChart = echarts.init(chartDom);
+        },
 
-            const mockData = await this.getList();
-            if (!mockData || !mockData.wellData || !mockData.wellData.depthLine.length) {
-                this.renderEmpty(chartDom);
-                return;
+        // 刷新图表
+        async refreshChart() {
+            if (this.myChart) {
+                await this.initChart();
             }
-
-            await this.renderRealData(chartDom, mockData);
         },
 
-        handleResize() {
-            this.debounce(() => {
-                if (this.myChart) {
-                    // 重新计算尺寸
-                    const viewportHeight = window.innerHeight;
-                    const viewportWidth = window.innerWidth;
-                    const availableHeight = viewportHeight - 120;
-                    const availableWidth = viewportWidth - 80;
-
-                    const chartDom = this.$refs.chartRef;
-                    if (chartDom) {
-                        chartDom.style.width = `${availableWidth}px`;
-                        chartDom.style.height = `${availableHeight}px`;
-                    }
+        // 渲染真实数据
+        async renderRealData(mockData) {
+            try {
+                const { wellData } = mockData;
+                const xAxisLabels = wellData.depthLine.map((point) => point.x);
+                
+                // 优化区域系列处理
+                const areaSeries = await this.processAreaSeries(wellData.stackedAreas);
+                
+                const option = {
+                    ...this.getDefaultChartOption(),
+                    xAxis: this.createXAxis(xAxisLabels),
+                    yAxis: this.createYAxis(mockData.chartConfig),
+                    series: this.createSeries(wellData, areaSeries)
+                };
 
+                this.myChart.setOption(option, true);
+                
+                // 确保图表完全渲染后再resize
+                this.$nextTick(() => {
                     this.myChart.resize();
+                });
+                
+            } catch (error) {
+                console.error("渲染数据失败:", error);
+                this.handleError(error);
+            }
+        },
+
+        // 获取默认图表配置
+        getDefaultChartOption() {
+            const colors = this.colorScheme;
+            return {
+                title: { text: "", subtext: "" },
+                aria: { enabled: false },
+                backgroundColor: colors.background,
+                tooltip: {
+                    trigger: "axis",
+                    axisPointer: { 
+                        type: "cross", 
+                        label: { backgroundColor: colors.primary },
+                        crossStyle: { color: colors.border }
+                    },
+                    backgroundColor: 'rgba(255,255,255,0.95)',
+                    borderColor: colors.border,
+                    borderWidth: 1,
+                    textStyle: { color: colors.text },
+                    extraCssText: 'box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-radius: 8px;'
+                },
+                grid: {
+                    top: 30,
+                    left: "2%",
+                    right: "2%",
+                    bottom: "2%",
+                    containLabel: true,
+                    show: false,
+                },
+                animation: true,
+                animationDuration: 1500,
+                animationEasing: 'cubicOut',
+                animationDelay: function (idx) {
+                    return idx * 100;
                 }
-            }, 200)();
+            };
         },
 
-        async renderRealData(chartDom, mockData) {
-            const { wellData } = mockData;
-            const xAxisLabels = wellData.depthLine.map((point) => point.x);
-            const areaSeries = await Promise.all(
-                wellData.stackedAreas
+        // 处理区域系列
+        async processAreaSeries(stackedAreas) {
+            return await Promise.all(
+                stackedAreas
                     .filter(area => area.svg !== null)
                     .map(async (area) => {
-                        let areaStyle = { opacity: 0.8 };
+                        let areaStyle = { opacity: 0.6 };
                         if (area.svg) {
                             try {
                                 const svgImage = await this.createSvgImage(area.svg);
@@ -163,133 +364,303 @@ export default {
                         };
                     })
             );
+        },
 
-            const option = {
-                title: { text: "", subtext: "" },
-                aria: {
-                    enabled: false,
+        // 创建X轴配置
+        createXAxis(xAxisLabels) {
+            const colors = this.colorScheme;
+            return [
+                {
+                    type: "category",
+                    boundaryGap: true,
+                    position: "top",
+                    data: xAxisLabels,
+                    axisLabel: { 
+                        interval: 0, 
+                        rotate: 0, 
+                        margin: 12, 
+                        align: "center", 
+                        fontSize: 13,
+                        color: colors.text,
+                        fontWeight: 500
+                    },
+                    axisTick: { 
+                        alignWithLabel: true, 
+                        length: 6,
+                        lineStyle: { color: colors.border }
+                    },
+                    splitLine: { show: false },
+                    axisLine: { 
+                        show: true, 
+                        lineStyle: { 
+                            color: colors.border,
+                            width: 2
+                        } 
+                    }
                 },
-                tooltip: {
-                    trigger: "axis",
-                    axisPointer: { type: "cross", label: { backgroundColor: "#6a7985" } },
+                { 
+                    type: "category", 
+                    boundaryGap: false, 
+                    position: "top", 
+                    show: false, 
+                    data: xAxisLabels 
                 },
-                grid: {
-                    top: 80,
-                    left: "8%",
-                    right: "8%",
-                    bottom: "8%",
-                    containLabel: true,
-                    show: false,
+            ];
+        },
+
+        // 创建Y轴配置
+        createYAxis(chartConfig) {
+            const colors = this.colorScheme;
+            return [
+                {
+                    type: "value",
+                    name: "井深(m)",
+                    nameTextStyle: { 
+                        color: colors.text, 
+                        fontSize: 13,
+                        fontWeight: 600,
+                        padding: [0, 0, 0, 8]
+                    },
+                    min: chartConfig.yAxis.min,
+                    max: chartConfig.yAxis.max,
+                    interval: chartConfig.yAxis.interval,
+                    inverse: true,
+                    axisLabel: { 
+                        formatter: "{value}", 
+                        fontSize: 12,
+                        color: colors.text,
+                        fontWeight: 500
+                    },
+                    splitLine: { 
+                        show: true,
+                        lineStyle: {
+                            color: colors.border,
+                            type: 'dashed',
+                            opacity: 0.3
+                        }
+                    },
+                    axisLine: { 
+                        show: true, 
+                        lineStyle: { 
+                            color: colors.border,
+                            width: 2
+                        } 
+                    },
+                    axisTick: { 
+                        show: true,
+                        lineStyle: { color: colors.border }
+                    }
                 },
-                xAxis: [
-                    {
-                        type: "category",
-                        boundaryGap: true,
-                        position: "top",
-                        data: xAxisLabels,
-                        axisLabel: { interval: 0, rotate: 90, margin: 8, align: "left", fontSize: 12 },
-                        axisTick: { alignWithLabel: true, length: 5 },
-                        splitLine: { show: false },
-                        axisLine: { show: true }
+                {
+                    type: "value",
+                    name: "深度(m)",
+                    nameTextStyle: { 
+                        color: colors.text, 
+                        fontSize: 13,
+                        fontWeight: 600,
+                        padding: [0, 8, 0, 0]
                     },
-                    { type: "category", boundaryGap: false, position: "top", show: false, data: xAxisLabels },
-                ],
-                yAxis: [
-                    {
-                        type: "value",
-                        name: "井深(m)",
-                        min: mockData.chartConfig.yAxis.min,
-                        max: mockData.chartConfig.yAxis.max,
-                        interval: mockData.chartConfig.yAxis.interval,
-                        inverse: true,
-                        axisLabel: { formatter: "{value}", fontSize: 12 },
-                        splitLine: { show: false },
-                        axisLine: { show: true },
-                        axisTick: { show: false }
+                    min: chartConfig.yAxis2.min,
+                    max: chartConfig.yAxis2.max,
+                    interval: chartConfig.yAxis2.interval,
+                    position: "right",
+                    axisLabel: { 
+                        formatter: "{value}", 
+                        fontSize: 12,
+                        color: colors.text,
+                        fontWeight: 500
                     },
-                    {
-                        type: "value",
-                        name: "深度(m)",
-                        min: mockData.chartConfig.yAxis2.min,
-                        max: mockData.chartConfig.yAxis2.max,
-                        interval: mockData.chartConfig.yAxis2.interval,
-                        position: "right",
-                        axisLabel: { formatter: "{value}", fontSize: 12 },
-                        splitLine: { show: false },
-                        axisLine: { show: true },
-                        axisTick: { show: false }
+                    splitLine: { show: false },
+                    axisLine: { 
+                        show: true, 
+                        lineStyle: { 
+                            color: colors.border,
+                            width: 2
+                        } 
                     },
-                ],
-                series: [
-                    {
-                        name: "井深数据",
-                        type: "line",
-                        yAxisIndex: 1,
-                        symbol: "circle",
-                        symbolSize: 8,
-                        itemStyle: { color: "#ff0000" },
-                        lineStyle: { color: "#00ff00" },
-                        label: {
-                            show: true,
-                            position: "top",
-                            formatter: "{c}",
-                            fontSize: 12,
-                            color: "#ff0000",
-                            backgroundColor: "rgba(255,255,255,0.8)",
-                            padding: [2, 4],
-                            borderRadius: 2
-                        },
-                        data: wellData.depthLine.map((point) => point.y),
+                    axisTick: { 
+                        show: true,
+                        lineStyle: { color: colors.border }
+                    }
+                },
+            ];
+        },
+
+        // 创建系列配置
+        createSeries(wellData, areaSeries) {
+            const colors = this.colorScheme;
+            
+            return [
+                {
+                    name: "井深数据",
+                    type: "line",
+                    yAxisIndex: 1,
+                    symbol: "circle",
+                    symbolSize: 10,
+                    itemStyle: { 
+                        color: colors.accent,
+                        borderColor: '#fff',
+                        borderWidth: 3,
+                        shadowColor: 'rgba(0,0,0,0.2)',
+                        shadowBlur: 8
+                    },
+                    lineStyle: { 
+                        color: colors.accent,
+                        width: 3,
+                        type: 'solid',
+                        shadowColor: 'rgba(0,0,0,0.1)',
+                        shadowBlur: 4
+                    },
+                    label: {
+                        show: true,
+                        position: "top",
+                        formatter: "{c}",
+                        fontSize: 13,
+                        fontWeight: 600,
+                        color: colors.accent,
+                        backgroundColor: "rgba(255,255,255,0.95)",
+                        padding: [6, 8],
+                        borderRadius: 6,
+                        borderColor: colors.accent,
+                        borderWidth: 2,
+                        shadowColor: 'rgba(0,0,0,0.1)',
+                        shadowBlur: 4
+                    },
+                    data: wellData.depthLine.map((point) => point.y),
+                },
+                {
+                    name: "占位",
+                    type: "bar",
+                    stack: "total",
+                    silent: true,
+                    barWidth: "8%",
+                    itemStyle: { 
+                        borderColor: "transparent", 
+                        color: "transparent" 
                     },
-                    {
-                        name: "占位",
-                        type: "bar",
-                        stack: "total",
-                        silent: true,
-                        barWidth: "13%",
-                        itemStyle: { borderColor: "transparent", color: "transparent" },
-                        emphasis: { itemStyle: { borderColor: "transparent", color: "transparent" } },
-                        data: wellData.depthIntervals.map((item) => item.placeholder),
+                    emphasis: { 
+                        itemStyle: { 
+                            borderColor: "transparent", 
+                            color: "transparent" 
+                        } 
                     },
-                    {
-                        name: "深度区间",
-                        type: "bar",
-                        stack: "total",
-                        barWidth: "20%",
-                        label: {
-                            show: true,
-                            position: (params) => params.data <= 200 ? "top" : "inside",
-                            color: "#03df6d",
-                            backgroundColor: "rgba(255,255,255,0.8)",
-                            padding: [2, 4],
-                            borderRadius: 2
+                    data: wellData.depthIntervals.map((item) => item.placeholder),
+                },
+                {
+                    name: "深度区间",
+                    type: "bar",
+                    stack: "total",
+                    barWidth: "6%",
+                    label: {
+                        show: true,
+                        position: (params) => params.data <= 200 ? "top" : "inside",
+                        color: '#fff',
+                        fontSize: 11,
+                        fontWeight: 600,
+                        backgroundColor: "rgba(0,0,0,0.1)",
+                        padding: [2, 3],
+                        borderRadius: 4,
+                        borderColor: 'rgba(255,255,255,0.3)',
+                        borderWidth: 1,
+                    },
+                    itemStyle: { 
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [
+                                { offset: 0, color: colors.gradient.start },
+                                { offset: 1, color: colors.gradient.end }
+                            ]
                         },
-                        itemStyle: { color: "#00aafe" },
-                        data: wellData.depthIntervals.map((item) => item.interval),
+                        borderRadius: [4, 4, 0, 0],
+                        shadowColor: 'rgba(0,0,0,0.2)',
+                        shadowBlur: 8,
+                        shadowOffsetY: 2
                     },
-                    ...areaSeries,
-                ],
-            };
+                    emphasis: {
+                        itemStyle: {
+                            color: {
+                                type: 'linear',
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                colorStops: [
+                                    { offset: 0, color: this.adjustColor(colors.gradient.start, 1.2) },
+                                    { offset: 1, color: this.adjustColor(colors.gradient.end, 1.2) }
+                                ]
+                            },
+                            shadowBlur: 12,
+                            shadowOffsetY: 4
+                        }
+                    },
+                    data: wellData.depthIntervals.map((item) => item.interval),
+                },
+                ...areaSeries,
+            ];
+        },
 
-            this.myChart.setOption(option);
-            // 确保图表完全渲染后再resize
-            this.$nextTick(() => {
-                this.myChart.resize();
-            });
+        // 颜色调整工具方法
+        adjustColor(color, factor) {
+            if (color.startsWith('#')) {
+                const r = parseInt(color.slice(1, 3), 16);
+                const g = parseInt(color.slice(3, 5), 16);
+                const b = parseInt(color.slice(5, 7), 16);
+                const newR = Math.min(255, Math.round(r * factor));
+                const newG = Math.min(255, Math.round(g * factor));
+                const newB = Math.min(255, Math.round(b * factor));
+                return `rgb(${newR}, ${newG}, ${newB})`;
+            }
+            return color;
         },
 
+        // 渲染空状态
         renderEmpty(chartDom) {
-            chartDom.innerHTML = '<div style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#999;">暂无数据</div>';
+            const colors = this.colorScheme;
+            chartDom.innerHTML = `
+                <div class="empty-state" style="
+                    width: 100%; 
+                    height: 100%; 
+                    display: flex; 
+                    flex-direction: column;
+                    align-items: center; 
+                    justify-content: center; 
+                    color: ${colors.text};
+                    font-size: 16px;
+                    background: ${colors.background};
+                    border-radius: 12px;
+                    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+                ">
+                    <div style="
+                        font-size: 48px; 
+                        margin-bottom: 16px; 
+                        opacity: 0.6;
+                        color: ${colors.primary};
+                    ">📊</div>
+                    <div style="
+                        font-size: 18px; 
+                        color: ${colors.text};
+                        font-weight: 500;
+                    ">暂无数据</div>
+                    <div style="
+                        font-size: 14px; 
+                        color: ${colors.text};
+                        opacity: 0.6;
+                        margin-top: 8px;
+                    ">请检查数据配置</div>
+                </div>
+            `;
         },
 
-        debounce(fn, delay) {
-            let timer = null;
-            return function () {
-                if (timer) clearTimeout(timer);
-                timer = setTimeout(() => fn.apply(this, arguments), delay);
-            };
+        // 处理错误
+        handleError(error) {
+            console.error("图表错误:", error);
         },
 
+        // 创建SVG图片
         createSvgImage(svgString) {
             return new Promise((resolve, reject) => {
                 const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
@@ -311,23 +682,108 @@ export default {
 </script>
 
 <style scoped>
-/* 确保容器占满可用空间 */
+/* 容器样式优化 */
 .chart-container {
     width: 100%;
-    height: 100vh;
-    padding: 0 20px;
+    /* height: 100vh; */
+    /* padding: 0 20px; */
     margin: 0;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
+    position: relative;
 }
 
-/* 图表容器样式 - 占满整个容器 */
+/* 图表容器样式 */
 .chart {
     flex: 1;
     width: 100%;
+   
     height: 100%;
     min-height: 400px;
     display: block;
+    border-radius: 16px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
+.chart:hover {
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    /* transform: translateY(-2px); */
+}
+
+/* 加载状态样式 */
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.95);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+    border-radius: 16px;
+    backdrop-filter: blur(10px);
+}
+
+.loading-spinner {
+    width: 48px;
+    height: 48px;
+    border: 4px solid #f3f4f6;
+    border-top: 4px solid #3b82f6;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 16px;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* 响应式优化 */
+@media (max-width: 768px) {
+    .chart-container {
+        padding: 0 10px;
+    }
+    
+    .chart {
+        min-height: 300px;
+        border-radius: 12px;
+    }
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+    .chart {
+        /* background: linear-gradient(135deg, #1f2937 0%, #111827 100%); */
+        /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); */
+        border: 1px solid rgba(255, 255, 255, 0.1);
+    }
+/*     
+    .chart:hover {
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
+    } */
+    
+    .loading-overlay {
+        background: rgba(17, 24, 39, 0.95);
+    }
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.chart-container {
+    animation: fadeIn 0.6s ease-out;
 }
 </style>
\ No newline at end of file

src/views/efficiencyAnalysis/jcxx/detail.vue

@@ -12,6 +12,8 @@
 
             <el-tab-pane label="直方图形" name="histogramGraph">
                 <HistogramGraph :jh="queryParams.jh" />
+                <!-- <HistogramGraph :jh="wellId" theme="elegant" />
+                <HistogramGraph :jh="wellId" theme="vibrant" /> -->
             </el-tab-pane>
 
             <el-tab-pane label="测井数据" name="loggingData">