|
|
<template>
|
|
|
<div class="draggable-chart" :style="{ top: `${position.top}px`, left: `${position.left}px` }"
|
|
|
@mousedown="startDrag">
|
|
|
<el-card class="box-card">
|
|
|
<div id="chart" :style="{ width: `${dimensions.width}px`, height: `${dimensions.height}px` }"></div>
|
|
|
<div class="resize-handle" @mousedown.stop="startResize"></div> <!-- 添加调整大小控制柄 -->
|
|
|
</el-card>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from 'echarts';
|
|
|
import { CanvasRenderer } from 'echarts/renderers';
|
|
|
|
|
|
echarts.use([CanvasRenderer]);
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
|
data: Array,
|
|
|
title: String,
|
|
|
titleSize: Number,
|
|
|
titlePosition: String,
|
|
|
showAxis: Boolean,
|
|
|
showYAxis: Boolean,
|
|
|
barWidth: Number,
|
|
|
yXAxisMaxValue: Number,
|
|
|
chartType: String,
|
|
|
chartNum: Number,
|
|
|
wellParamData: {
|
|
|
type: Object // 提供一个默认值为一个空对象
|
|
|
},
|
|
|
reverseScatter: Boolean
|
|
|
},
|
|
|
data() {
|
|
|
// 初始化拖动和调整大小状态和偏移量
|
|
|
return {
|
|
|
position: { top: 150, left: 400 },
|
|
|
dragging: false,
|
|
|
offset: { x: 0, y: 0 },
|
|
|
dimensions: { width: 1000, height: 600 }, // 初始宽度和高度
|
|
|
resizing: false,
|
|
|
resizeStart: { x: 0, y: 0 }
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.initChart();
|
|
|
},
|
|
|
watch: {
|
|
|
data: {
|
|
|
handler: 'initChart',
|
|
|
deep: true,
|
|
|
},
|
|
|
title: 'initChart',
|
|
|
titleSize: 'initChart',
|
|
|
titlePosition: 'initChart',
|
|
|
showAxis: 'initChart',
|
|
|
showYAxis: 'initChart',
|
|
|
barWidth: 'initChart',
|
|
|
yXAxisMaxValue: 'initChart',
|
|
|
chartType: 'initChart',
|
|
|
wellParamData: {
|
|
|
handler: 'initChart',
|
|
|
deep: true
|
|
|
},
|
|
|
reverseScatter: {
|
|
|
handler: 'initChart',
|
|
|
deep: true // 启用深度监听
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
initChart() {
|
|
|
const chartDom = document.getElementById('chart');
|
|
|
if (!this.chart) {
|
|
|
this.chart = echarts.init(chartDom);
|
|
|
}
|
|
|
|
|
|
if (this.chartNum === 5) {
|
|
|
// 动态确定横坐标和纵坐标参数名称
|
|
|
const allParams = Object.values(this.wellParamData).flat(); // 展平所有数据
|
|
|
const paramNames = [...new Set(allParams.map(item => item.ParamName))]; // 获取唯一参数名称
|
|
|
|
|
|
if (paramNames.length !== 2) {
|
|
|
console.error("数据中的参数名称数量不是2个，无法绘制散点图！");
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
const shapes = ['circle', 'rect', 'triangle', 'diamond', 'pin', 'arrow'];
|
|
|
let shapeIndex = 0;
|
|
|
|
|
|
const [xParamName, yParamName] = this.reverseScatter ? paramNames : paramNames.reverse(); // 动态获取两个参数名称
|
|
|
let minXValue = 0;
|
|
|
let minYValue = 0;
|
|
|
const series = Object.entries(this.wellParamData).map(([key, paramList]) => {
|
|
|
const xValues = paramList
|
|
|
.filter(item => item.ParamName === xParamName)
|
|
|
.map(item => item.Point.Z); // 横坐标值 (垂直地应力)
|
|
|
if (xValues.length > 0) {
|
|
|
let thisMinXValue = Math.min(...xValues);
|
|
|
if (minXValue == 0 || minXValue > thisMinXValue) {
|
|
|
minXValue = thisMinXValue;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const yValues = paramList
|
|
|
.filter(item => item.ParamName === yParamName)
|
|
|
.map(item => item.Point.Z); // 纵坐标值 (加砂强度)
|
|
|
if (yValues.length > 0) {
|
|
|
let thisMinYValue = Math.min(...yValues);
|
|
|
if (minYValue == 0 || minYValue > thisMinYValue) {
|
|
|
minYValue = thisMinYValue;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 匹配阶段号
|
|
|
const stageNos = paramList
|
|
|
.filter(item => item.ParamName === xParamName)
|
|
|
.map(item => item.StageNo);
|
|
|
|
|
|
// 将每个阶段的横纵坐标配对
|
|
|
const scatterData = stageNos.map((stage, index) => [
|
|
|
xValues[index], // X 值
|
|
|
yValues[index], // Y 值
|
|
|
stage, // 阶段号，用于提示
|
|
|
]);
|
|
|
|
|
|
const symbol = shapes[shapeIndex % shapes.length];
|
|
|
shapeIndex++;
|
|
|
|
|
|
return {
|
|
|
name: key, // 当前 series 的名称 (井号)
|
|
|
type: "scatter",
|
|
|
data: scatterData,
|
|
|
itemStyle: {
|
|
|
color: this.getRandomColor(), // 设置每个 series 的随机颜色
|
|
|
},
|
|
|
symbol,
|
|
|
// 设置不同的形状
|
|
|
symbolSize: 10, // 控制形状大小
|
|
|
};
|
|
|
});
|
|
|
|
|
|
const scatterOption = {
|
|
|
title: {
|
|
|
text: this.title,
|
|
|
left: this.titlePosition,
|
|
|
textStyle: {
|
|
|
fontSize: this.titleSize,
|
|
|
},
|
|
|
top: 'bottom',
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: params => {
|
|
|
const stage = params.value[2];
|
|
|
return `${params.seriesName}<br>阶段号: ${stage}<br>${xParamName}: ${params.value[0]}<br>${yParamName}: ${params.value[1]}`;
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
show: true,
|
|
|
type: "scroll",
|
|
|
orient: "horizontal",
|
|
|
top: 10,
|
|
|
},
|
|
|
xAxis: {
|
|
|
name: xParamName,
|
|
|
type: "value",
|
|
|
min: Math.floor(minXValue * 10) / 10
|
|
|
},
|
|
|
yAxis: {
|
|
|
name: yParamName,
|
|
|
type: "value",
|
|
|
min: Math.floor(minYValue * 10) / 10
|
|
|
},
|
|
|
series, // 将生成的 series 数据放入配置
|
|
|
};
|
|
|
|
|
|
this.chart.clear();
|
|
|
this.chart.setOption(scatterOption);
|
|
|
}
|
|
|
else if (this.chartNum == 4) {
|
|
|
let xValueName = '';
|
|
|
let minXValue = 0;
|
|
|
let minYValue = 0
|
|
|
let yValueName = '';
|
|
|
const series = Object.entries(this.wellParamData).map(([JH, params]) => {
|
|
|
let xValue = 0;
|
|
|
let yValue = 0
|
|
|
if (this.reverseScatter) {
|
|
|
xValue = params[0]?.Point.Z;
|
|
|
xValueName = params[0]?.ParamName;
|
|
|
yValue = params[1]?.Point.Z;
|
|
|
yValueName = params[1]?.ParamName;
|
|
|
} else {
|
|
|
xValue = params[1]?.Point.Z;
|
|
|
xValueName = params[1]?.ParamName;
|
|
|
yValue = params[0]?.Point.Z;
|
|
|
yValueName = params[0]?.ParamName;
|
|
|
}
|
|
|
|
|
|
if (minXValue == 0 || minXValue > xValue) {
|
|
|
minXValue = Math.floor(xValue * 10) / 10;
|
|
|
}
|
|
|
if (minYValue == 0 || minYValue > yValue) {
|
|
|
minYValue = Math.floor(yValue * 10) / 10;
|
|
|
}
|
|
|
|
|
|
return {
|
|
|
name: JH,
|
|
|
type: "scatter",
|
|
|
data: [[xValue, yValue]],
|
|
|
itemStyle: {
|
|
|
color: this.getRandomColor()
|
|
|
}
|
|
|
};
|
|
|
});
|
|
|
|
|
|
const scatterOption = {
|
|
|
title: {
|
|
|
text: this.title,
|
|
|
left: this.titlePosition,
|
|
|
textStyle: {
|
|
|
fontSize: this.titleSize,
|
|
|
},
|
|
|
top: 'bottom',
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: params => {
|
|
|
return `${params.seriesName}<br>${xValueName}: ${params.value[0]}<br>${yValueName}: ${params.value[1]}`;
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
show: true,
|
|
|
type: "scroll",
|
|
|
orient: "horizontal",
|
|
|
top: 10
|
|
|
},
|
|
|
xAxis: {
|
|
|
name: xValueName,
|
|
|
type: "value",
|
|
|
min: minXValue
|
|
|
},
|
|
|
yAxis: {
|
|
|
name: yValueName,
|
|
|
type: "value",
|
|
|
min: minYValue
|
|
|
},
|
|
|
series
|
|
|
}
|
|
|
this.chart.clear();
|
|
|
if (scatterOption.series.length > 0) {
|
|
|
this.chart.setOption(scatterOption);
|
|
|
}
|
|
|
}
|
|
|
else {
|
|
|
const wells = Object.keys(this.wellParamData);
|
|
|
const maxLength = Math.max(...Object.values(this.wellParamData).map(arr => arr.length));
|
|
|
const xAxisData = Array.from({ length: maxLength }, (_, i) => `${i + 1}段`);
|
|
|
const seriesData = wells.map(well => {
|
|
|
const wellData = this.wellParamData[well]; // 获取某个井的数据
|
|
|
const colorItem = this.data.find(item => item.ParamName == wellData[0].ParamName); // 查找对应的 color 项
|
|
|
const color = colorItem ? colorItem.Color : 'gray';
|
|
|
const zValues = wellData.map(item => item.Point.Z);
|
|
|
return { color, zValues }; // 返回包含颜色和 z 值的对象
|
|
|
});
|
|
|
const firstSeriesData = seriesData.map(item => [item.color, item.zValues[0]]);
|
|
|
|
|
|
const option = {
|
|
|
title: {
|
|
|
text: this.title,
|
|
|
left: this.titlePosition,
|
|
|
textStyle: {
|
|
|
fontSize: this.titleSize,
|
|
|
},
|
|
|
top: 'bottom',
|
|
|
},
|
|
|
tooltip: {},
|
|
|
legend: {
|
|
|
data: wells
|
|
|
},
|
|
|
xAxis: this.chartType === 'pie' ? { show: false } : {
|
|
|
data: (this.chartNum == 0 || this.chartNum == 1 || this.chartNum == 4) ? xAxisData : wells,
|
|
|
show: this.showAxis,
|
|
|
axisLabel: {
|
|
|
rotate: 45 // 将标签旋转45度
|
|
|
}
|
|
|
},
|
|
|
yAxis: this.chartType === 'pie' ? { show: false } : {
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
},
|
|
|
max: this.yXAxisMaxValue,
|
|
|
show: this.showYAxis,
|
|
|
},
|
|
|
series: (this.chartNum == 0 || this.chartNum == 1) ? wells.map((well, index) => ({
|
|
|
name: well,
|
|
|
type: this.chartType,
|
|
|
data: seriesData[index].zValues,
|
|
|
color: this.chartNum == 0 ? this.getRandomColor() : seriesData[index].color,
|
|
|
barWidth: this.barWidth // 动态设置柱宽
|
|
|
})) : [
|
|
|
{
|
|
|
type: this.chartType,
|
|
|
data: firstSeriesData.map(item => ({
|
|
|
value: item[1],
|
|
|
itemStyle: {
|
|
|
color: item[0],
|
|
|
}
|
|
|
})),
|
|
|
barWidth: this.barWidth
|
|
|
}
|
|
|
],
|
|
|
};
|
|
|
|
|
|
this.chart.clear();
|
|
|
if (option.series.length > 0) {
|
|
|
this.chart.setOption(option);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
getRandomColor() {
|
|
|
const letters = '0123456789ABCDEF';
|
|
|
let color = '#';
|
|
|
for (let i = 0; i < 6; i++) {
|
|
|
color += letters[Math.floor(Math.random() * 16)];
|
|
|
}
|
|
|
return color;
|
|
|
},
|
|
|
startResize(event) {
|
|
|
this.resizing = true;
|
|
|
this.resizeStart = { x: event.clientX, y: event.clientY };
|
|
|
document.addEventListener('mousemove', this.onResize);
|
|
|
document.addEventListener('mouseup', this.stopResize);
|
|
|
},
|
|
|
onResize(event) {
|
|
|
if (this.resizing) {
|
|
|
const deltaX = event.clientX - this.resizeStart.x;
|
|
|
const deltaY = event.clientY - this.resizeStart.y;
|
|
|
this.dimensions.width += deltaX;
|
|
|
this.dimensions.height += deltaY;
|
|
|
this.resizeStart = { x: event.clientX, y: event.clientY };
|
|
|
this.chart.resize(); // 更新图表大小
|
|
|
}
|
|
|
},
|
|
|
stopResize() {
|
|
|
this.resizing = false;
|
|
|
document.removeEventListener('mousemove', this.onResize);
|
|
|
document.removeEventListener('mouseup', this.stopResize);
|
|
|
},
|
|
|
startDrag(event) {
|
|
|
this.dragging = true;
|
|
|
this.offset.x = event.clientX - this.position.left;
|
|
|
this.offset.y = event.clientY - this.position.top;
|
|
|
|
|
|
document.addEventListener('mousemove', this.onDrag);
|
|
|
document.addEventListener('mouseup', this.stopDrag);
|
|
|
},
|
|
|
onDrag(event) {
|
|
|
if (this.dragging) {
|
|
|
this.position.left = event.clientX - this.offset.x;
|
|
|
this.position.top = event.clientY - this.offset.y;
|
|
|
}
|
|
|
},
|
|
|
stopDrag() {
|
|
|
this.dragging = false;
|
|
|
document.removeEventListener('mousemove', this.onDrag);
|
|
|
document.removeEventListener('mouseup', this.stopDrag);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.box-card {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
.draggable-chart {
|
|
|
position: absolute;
|
|
|
cursor: move;
|
|
|
z-index: 1000;
|
|
|
}
|
|
|
|
|
|
.resize-handle {
|
|
|
position: absolute;
|
|
|
width: 0;
|
|
|
height: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
border-left: 10px solid transparent;
|
|
|
border-top: 10px solid transparent;
|
|
|
border-right: 10px solid #37e40b;
|
|
|
/* 控制柄颜色 */
|
|
|
cursor: se-resize;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
</style>
|