Skip to content

P
pdczt_qd
Commit d976850e by cat
Options

zd 优化俩图

parent e3b1119c
Showing with 701 additions and 198 deletions
src/views/efficiencyAnalysis/jcxx/components/CurveGraph.vue
...@@ -82,7 +82,7 @@ export default { ...@@ -82,7 +82,7 @@ export default {
crosshairLines.push({ crosshairLines.push({
name: '十字线', name: '十字线',
type: 'line', 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' }, lineStyle: { color: 'black', width: 1, type: 'dashed' },
symbol: 'none', symbol: 'none',
tooltip: { show: false } // 十字线不显示tooltip tooltip: { show: false } // 十字线不显示tooltip
...@@ -90,7 +90,7 @@ export default { ...@@ -90,7 +90,7 @@ export default {
crosshairLines.push({ crosshairLines.push({
name: '十字线', name: '十字线',
type: 'line', 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' }, lineStyle: { color: 'black', width: 1, type: 'dashed' },
symbol: 'none', symbol: 'none',
tooltip: { show: false } // 十字线不显示tooltip tooltip: { show: false } // 十字线不显示tooltip
...@@ -98,7 +98,7 @@ export default { ...@@ -98,7 +98,7 @@ export default {
crosshairCenter.push({ crosshairCenter.push({
name: '十字线中心', name: '十字线中心',
type: 'scatter', type: 'scatter',
data: [[crosshair.x, crosshair.y]], data: [[crosshair.y, crosshair.x]],
symbolSize: 12, symbolSize: 12,
itemStyle: { color: 'orange', borderColor: '#fff', borderWidth: 2 } itemStyle: { color: 'orange', borderColor: '#fff', borderWidth: 2 }
}); });
...@@ -136,9 +136,16 @@ export default { ...@@ -136,9 +136,16 @@ export default {
} }
}, },
legend: { legend: {
data: ['优化曲线',], data: ['指标', '钻速均值', '进尺均值', '优化曲线',],
top: '10%', top: '10%',
left: 'center' right: '5%'
},
grid: {
left: '2%',
right: '5%',
top: '15%',
bottom: '10%',
containLabel: true
}, },
xAxis: { xAxis: {
name: '钻速 (m/h)', name: '钻速 (m/h)',
...@@ -146,13 +153,21 @@ export default { ...@@ -146,13 +153,21 @@ export default {
min: axisRange.xAxis.min, min: axisRange.xAxis.min,
max: axisRange.xAxis.max, max: axisRange.xAxis.max,
interval: axisRange.xAxis.interval, 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: { yAxis: {
name: '进尺', name: '进尺',
type: 'value', type: 'value',
min: axisRange.yAxis.min, min: axisRange.yAxis.min,
interval: axisRange.yAxis.interval interval: axisRange.yAxis.interval,
nameLocation: 'center',
nameGap: 40,
axisTick: { show: true },
axisLine: { show: true }
}, },
series: [ series: [
{ {
...@@ -166,14 +181,43 @@ export default { ...@@ -166,14 +181,43 @@ export default {
emphasis: { showSymbol: false }, emphasis: { showSymbol: false },
lineStyle: { color: 'red', width: 2 } 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, ...crosshairLines,
...crosshairCenter, ...crosshairCenter,
...drillTypes.map(type => ({ ...drillTypes.map(type => ({
name: type, name: type,
type: 'scatter', type: 'scatter',
data: scatter.filter(item => item[2] === type), data: scatter.filter(item => item[2] === type),
symbolSize: 10, symbolSize: 12,
itemStyle: { color: 'blue' } 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 { ...@@ -202,7 +246,7 @@ export default {
.drilling-chart-container { .drilling-chart-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 20px; /* padding: 20px; */
box-sizing: border-box; box-sizing: border-box;
} }
......
src/views/efficiencyAnalysis/jcxx/components/HistogramGraph.vue
<template> <template>
<div class="chart-container"> <div class="chart-container">
<div id="mainzft" class="chart" ref="chartRef"></div> <div id="mainzft" class="chart" ref="chartRef"></div>
<div v-if="loading" class="loading-overlay">
<div class="loading-spinner"></div>
<span>加载中...</span>
</div>
</div> </div>
</template> </template>
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import { getZft } from "@/api/optimization/initialization"; import { getZft } from "@/api/optimization/initialization";
import { text } from "d3";
export default { export default {
name: "HistogramGraph", name: "HistogramGraph",
...@@ -15,6 +20,12 @@ export default { ...@@ -15,6 +20,12 @@ export default {
type: String, type: String,
default: "", default: "",
}, },
// 美化配置选项
theme: {
type: String,
default: "modern", // modern, elegant, vibrant
validator: value => ["modern", "elegant", "vibrant"].includes(value)
}
}, },
data() { data() {
return { return {
...@@ -23,41 +34,197 @@ export default { ...@@ -23,41 +34,197 @@ export default {
initRetryCount: 0, initRetryCount: 0,
maxRetryCount: 5, maxRetryCount: 5,
resizeObserver: null, 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() { mounted() {
// 使用更长的延迟确保父容器完全渲染 this.initChart();
this.$nextTick(() => { this.setupEventListeners();
setTimeout(() => {
this.initChart();
this.observeParentResize();
}, 800);
});
window.addEventListener("resize", this.handleResize);
}, },
beforeDestroy() { beforeDestroy() {
window.removeEventListener("resize", this.handleResize); this.cleanup();
if (this.myChart) {
this.myChart.dispose();
}
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
}, },
methods: { 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() { observeParentResize() {
const parentDom = this.$refs.chartRef?.parentElement; const parentDom = this.$refs.chartRef?.parentElement;
if (parentDom && window.ResizeObserver) { if (parentDom && window.ResizeObserver) {
this.resizeObserver = new ResizeObserver(() => { this.resizeObserver = new ResizeObserver(() => {
if (this.myChart) { this.debouncedResize();
this.myChart.resize();
}
}); });
this.resizeObserver.observe(parentDom); this.resizeObserver.observe(parentDom);
} }
}, },
// 获取数据
async getList() { async getList() {
try { try {
const res = await getZft({ jh: this.jh }); const res = await getZft({ jh: this.jh });
...@@ -65,82 +232,116 @@ export default { ...@@ -65,82 +232,116 @@ export default {
return this.mockData; return this.mockData;
} catch (error) { } catch (error) {
console.error("获取数据失败:", error); console.error("获取数据失败:", error);
return {}; throw error;
} }
}, },
async initChart() { // 处理窗口大小变化
const chartDom = this.$refs.chartRef; handleResize() {
if (!chartDom) { this.debouncedResize();
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;
// 重试机制 // 防抖处理resize
if ((availableWidth <= 0 || availableHeight <= 0) && this.initRetryCount < this.maxRetryCount) { debouncedResize() {
this.initRetryCount++; if (this.debounceTimer) {
setTimeout(() => this.initChart(), 500); clearTimeout(this.debounceTimer);
return;
} }
this.debounceTimer = setTimeout(() => {
this.performResize();
}, 200);
},
this.initRetryCount = 0; // 执行resize操作
performResize() {
if (this.myChart) { 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) { async refreshChart() {
this.renderEmpty(chartDom); if (this.myChart) {
return; await this.initChart();
} }
await this.renderRealData(chartDom, mockData);
}, },
handleResize() { // 渲染真实数据
this.debounce(() => { async renderRealData(mockData) {
if (this.myChart) { try {
// 重新计算尺寸 const { wellData } = mockData;
const viewportHeight = window.innerHeight; const xAxisLabels = wellData.depthLine.map((point) => point.x);
const viewportWidth = window.innerWidth;
const availableHeight = viewportHeight - 120; // 优化区域系列处理
const availableWidth = viewportWidth - 80; const areaSeries = await this.processAreaSeries(wellData.stackedAreas);
const chartDom = this.$refs.chartRef; const option = {
if (chartDom) { ...this.getDefaultChartOption(),
chartDom.style.width = `${availableWidth}px`; xAxis: this.createXAxis(xAxisLabels),
chartDom.style.height = `${availableHeight}px`; yAxis: this.createYAxis(mockData.chartConfig),
} series: this.createSeries(wellData, areaSeries)
};
this.myChart.setOption(option, true);
// 确保图表完全渲染后再resize
this.$nextTick(() => {
this.myChart.resize(); 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; async processAreaSeries(stackedAreas) {
const xAxisLabels = wellData.depthLine.map((point) => point.x); return await Promise.all(
const areaSeries = await Promise.all( stackedAreas
wellData.stackedAreas
.filter(area => area.svg !== null) .filter(area => area.svg !== null)
.map(async (area) => { .map(async (area) => {
let areaStyle = { opacity: 0.8 }; let areaStyle = { opacity: 0.6 };
if (area.svg) { if (area.svg) {
try { try {
const svgImage = await this.createSvgImage(area.svg); const svgImage = await this.createSvgImage(area.svg);
...@@ -163,133 +364,303 @@ export default { ...@@ -163,133 +364,303 @@ export default {
}; };
}) })
); );
},
const option = { // 创建X轴配置
title: { text: "", subtext: "" }, createXAxis(xAxisLabels) {
aria: { const colors = this.colorScheme;
enabled: false, 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", type: "category",
axisPointer: { type: "cross", label: { backgroundColor: "#6a7985" } }, boundaryGap: false,
position: "top",
show: false,
data: xAxisLabels
}, },
grid: { ];
top: 80, },
left: "8%",
right: "8%", // 创建Y轴配置
bottom: "8%", createYAxis(chartConfig) {
containLabel: true, const colors = this.colorScheme;
show: false, 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: "value",
type: "category", name: "深度(m)",
boundaryGap: true, nameTextStyle: {
position: "top", color: colors.text,
data: xAxisLabels, fontSize: 13,
axisLabel: { interval: 0, rotate: 90, margin: 8, align: "left", fontSize: 12 }, fontWeight: 600,
axisTick: { alignWithLabel: true, length: 5 }, padding: [0, 8, 0, 0]
splitLine: { show: false },
axisLine: { show: true }
}, },
{ type: "category", boundaryGap: false, position: "top", show: false, data: xAxisLabels }, min: chartConfig.yAxis2.min,
], max: chartConfig.yAxis2.max,
yAxis: [ interval: chartConfig.yAxis2.interval,
{ position: "right",
type: "value", axisLabel: {
name: "井深(m)", formatter: "{value}",
min: mockData.chartConfig.yAxis.min, fontSize: 12,
max: mockData.chartConfig.yAxis.max, color: colors.text,
interval: mockData.chartConfig.yAxis.interval, fontWeight: 500
inverse: true,
axisLabel: { formatter: "{value}", fontSize: 12 },
splitLine: { show: false },
axisLine: { show: true },
axisTick: { show: false }
}, },
{ splitLine: { show: false },
type: "value", axisLine: {
name: "深度(m)", show: true,
min: mockData.chartConfig.yAxis2.min, lineStyle: {
max: mockData.chartConfig.yAxis2.max, color: colors.border,
interval: mockData.chartConfig.yAxis2.interval, width: 2
position: "right", }
axisLabel: { formatter: "{value}", fontSize: 12 },
splitLine: { show: false },
axisLine: { show: true },
axisTick: { show: false }
}, },
], axisTick: {
series: [ show: true,
{ lineStyle: { color: colors.border }
name: "井深数据", }
type: "line", },
yAxisIndex: 1, ];
symbol: "circle", },
symbolSize: 8,
itemStyle: { color: "#ff0000" }, // 创建系列配置
lineStyle: { color: "#00ff00" }, createSeries(wellData, areaSeries) {
label: { const colors = this.colorScheme;
show: true,
position: "top", return [
formatter: "{c}", {
fontSize: 12, name: "井深数据",
color: "#ff0000", type: "line",
backgroundColor: "rgba(255,255,255,0.8)", yAxisIndex: 1,
padding: [2, 4], symbol: "circle",
borderRadius: 2 symbolSize: 10,
}, itemStyle: {
data: wellData.depthLine.map((point) => point.y), 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"
}, },
{ emphasis: {
name: "占位", itemStyle: {
type: "bar", borderColor: "transparent",
stack: "total", color: "transparent"
silent: true, }
barWidth: "13%",
itemStyle: { borderColor: "transparent", color: "transparent" },
emphasis: { itemStyle: { borderColor: "transparent", color: "transparent" } },
data: wellData.depthIntervals.map((item) => item.placeholder),
}, },
{ data: wellData.depthIntervals.map((item) => item.placeholder),
name: "深度区间", },
type: "bar", {
stack: "total", name: "深度区间",
barWidth: "20%", type: "bar",
label: { stack: "total",
show: true, barWidth: "6%",
position: (params) => params.data <= 200 ? "top" : "inside", label: {
color: "#03df6d", show: true,
backgroundColor: "rgba(255,255,255,0.8)", position: (params) => params.data <= 200 ? "top" : "inside",
padding: [2, 4], color: '#fff',
borderRadius: 2 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" }, borderRadius: [4, 4, 0, 0],
data: wellData.depthIntervals.map((item) => item.interval), 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 adjustColor(color, factor) {
this.$nextTick(() => { if (color.startsWith('#')) {
this.myChart.resize(); 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) { 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; handleError(error) {
return function () { console.error("图表错误:", error);
if (timer) clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, arguments), delay);
};
}, },
// 创建SVG图片
createSvgImage(svgString) { createSvgImage(svgString) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' }); const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
...@@ -311,23 +682,108 @@ export default { ...@@ -311,23 +682,108 @@ export default {
</script> </script>
<style scoped> <style scoped>
/* 确保容器占满可用空间 */ /* 容器样式优化 */
.chart-container { .chart-container {
width: 100%; width: 100%;
height: 100vh; /* height: 100vh; */
padding: 0 20px; /* padding: 0 20px; */
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
} }
/* 图表容器样式 - 占满整个容器 */ /* 图表容器样式 */
.chart { .chart {
flex: 1; flex: 1;
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 400px; min-height: 400px;
display: block; 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> </style>
\ No newline at end of file
src/views/efficiencyAnalysis/jcxx/detail.vue
...@@ -12,6 +12,8 @@ ...@@ -12,6 +12,8 @@
<el-tab-pane label="直方图形" name="histogramGraph"> <el-tab-pane label="直方图形" name="histogramGraph">
<HistogramGraph :jh="queryParams.jh" /> <HistogramGraph :jh="queryParams.jh" />
<!-- <HistogramGraph :jh="wellId" theme="elegant" />
<HistogramGraph :jh="wellId" theme="vibrant" /> -->
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="测井数据" name="loggingData"> <el-tab-pane label="测井数据" name="loggingData">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment