|
@@ -28,20 +28,21 @@
|
|
|
</el-option>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
+ <!-- 点大小控制 -->
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <el-slider
|
|
|
+ v-model="pointSize"
|
|
|
+ :min="1"
|
|
|
+ :max="15"
|
|
|
+ :step="1"
|
|
|
+ label="点的大小"
|
|
|
+ show-stops
|
|
|
+ style="width: 150px"
|
|
|
+ @change="updateChartColor"
|
|
|
+ ></el-slider>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <!-- 点大小控制 -->
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
- <el-slider
|
|
|
- v-model="pointSize"
|
|
|
- :min="1"
|
|
|
- :max="15"
|
|
|
- :step="1"
|
|
|
- label="点的大小"
|
|
|
- show-stops
|
|
|
- style="width: 150px"
|
|
|
- @change="updateChartColor"
|
|
|
- ></el-slider>
|
|
|
- </div>
|
|
|
+
|
|
|
<div
|
|
|
v-loading="loading"
|
|
|
:id="`plotly-3d-chart-` + index"
|
|
@@ -204,12 +205,11 @@ export default {
|
|
|
|
|
|
return trace;
|
|
|
});
|
|
|
-
|
|
|
const layout = {
|
|
|
title: {
|
|
|
text: this.chartData.data[0].title,
|
|
|
font: {
|
|
|
- size: 16, // 设置标题字体大小(默认 16)
|
|
|
+ size: 16,
|
|
|
weight: "bold",
|
|
|
},
|
|
|
},
|
|
@@ -217,39 +217,37 @@ export default {
|
|
|
xaxis: {
|
|
|
title: {
|
|
|
text: this.chartData.xaixs,
|
|
|
- standoff: 100, // 调整标题与轴线之间的间距(单位:像素)
|
|
|
- }, // X 轴标题
|
|
|
+ standoff: 100,
|
|
|
+ },
|
|
|
gridcolor: "#fff",
|
|
|
backgroundcolor: "#CFD4DC",
|
|
|
showbackground: true,
|
|
|
- linewidth: 2, // 轴线宽度
|
|
|
- linecolor: "black", // 轴线颜色
|
|
|
- ticks: "outside", // 设置刻度线在轴线外
|
|
|
- tickwidth: 2,
|
|
|
- //刻度线长度
|
|
|
+ linecolor: "black",
|
|
|
+ ticks: "outside",
|
|
|
ticklen: 10,
|
|
|
tickcolor: "black",
|
|
|
- zeroline: false, // 显示 X 轴的中轴线
|
|
|
- // tickangle: 60, // 设置Z轴刻度值的角度
|
|
|
+ zeroline: false,
|
|
|
+ tickangle: -10,
|
|
|
},
|
|
|
+ // 对 Y 轴不显示默认标题,只保留 tick 标签,并适当加大 standoff 以防止标签挤在一起
|
|
|
yaxis: {
|
|
|
title: {
|
|
|
- text: this.chartData.yaixs,
|
|
|
- standoff: 20,
|
|
|
+ text: this.chartData.yaixs, // 隐藏默认标题
|
|
|
},
|
|
|
+ type: "category", // 让 Y 轴按类别均匀分布
|
|
|
+ categoryorder: "category ascending", // 按类别字母顺序排列
|
|
|
type: "date",
|
|
|
tickformat: "%Y-%m",
|
|
|
+ dtick: "M3",
|
|
|
gridcolor: "#fff",
|
|
|
tickcolor: "#e5ecf6",
|
|
|
backgroundcolor: "#CFD4DC",
|
|
|
showbackground: true,
|
|
|
- linewidth: 2, // 轴线宽度
|
|
|
- linecolor: "black", // 轴线颜色
|
|
|
- ticks: "outside", // 设置刻度线在轴线外
|
|
|
- tickwidth: 2,
|
|
|
+ linecolor: "black",
|
|
|
+ ticks: "outside",
|
|
|
tickcolor: "black",
|
|
|
- zeroline: false, // 显示 X 轴的中轴线
|
|
|
- // tickangle: -60, // 设置Z轴刻度值的角度
|
|
|
+ zeroline: false,
|
|
|
+ tickangle: 25,
|
|
|
},
|
|
|
zaxis: {
|
|
|
title: {
|
|
@@ -259,73 +257,69 @@ export default {
|
|
|
tickcolor: "#fff",
|
|
|
backgroundcolor: "#CFD4DC",
|
|
|
showbackground: true,
|
|
|
- linewidth: 2, // 轴线宽度
|
|
|
- linecolor: "black", // 轴线颜色
|
|
|
- ticks: "outside", // 设置刻度线在轴线外
|
|
|
- tickwidth: 2,
|
|
|
+ linecolor: "black",
|
|
|
+ ticks: "outside",
|
|
|
tickcolor: "black",
|
|
|
- zeroline: false, // 显示 X 轴的中轴线
|
|
|
- // tickangle: -70, // 设置Z轴刻度值的角度
|
|
|
+ zeroline: false,
|
|
|
+ tickangle: -90,
|
|
|
},
|
|
|
- bgcolor: "#e5ecf6", // 设置背景颜色
|
|
|
+ bgcolor: "#e5ecf6",
|
|
|
aspectratio: {
|
|
|
- x: 2.3,
|
|
|
- y: 1.8,
|
|
|
+ x: 2.2,
|
|
|
+ y: 1.7,
|
|
|
z: 1,
|
|
|
},
|
|
|
- aspectmode: "manual", // ✅ 让 XYZ 轴比例不同
|
|
|
+ aspectmode: "manual",
|
|
|
gridcolor: "#fff",
|
|
|
- camera:
|
|
|
- // {
|
|
|
- // up: {
|
|
|
- // x: 0.1844786403547818,
|
|
|
- // y: 0.25799580142092143,
|
|
|
- // z: 0.9483700742336969,
|
|
|
- // },
|
|
|
- // center: {
|
|
|
- // x: -0.06295317102243307,
|
|
|
- // y: 0.028475940086919383,
|
|
|
- // z: -0.05128519057088931,
|
|
|
- // },
|
|
|
- // eye: {
|
|
|
- // x: -2.2073041701824168,
|
|
|
- // y: -2.49385665138218,
|
|
|
- // z: 1.0520163618321585,
|
|
|
- // },
|
|
|
- // projection: {
|
|
|
- // type: "orthographic",
|
|
|
- // },
|
|
|
- // },
|
|
|
- {
|
|
|
- up: {
|
|
|
- x: 0.1404902084609593,
|
|
|
- y: 0.21761427477626,
|
|
|
- z: 0.9658708654577998,
|
|
|
- },
|
|
|
- center: {
|
|
|
- x: -0.1006727339672774,
|
|
|
- y: 0.0754471798006855,
|
|
|
- z: 0.005741722270889481,
|
|
|
- },
|
|
|
- eye: {
|
|
|
- x: -2.10865062403837,
|
|
|
- y: -2.6322931505097884,
|
|
|
- z: 0.9078749284640724,
|
|
|
- },
|
|
|
- projection: {
|
|
|
- type: "orthographic",
|
|
|
- },
|
|
|
+ camera: {
|
|
|
+ up: {
|
|
|
+ x: 0.200292643688136,
|
|
|
+ y: 0.2488259353493132,
|
|
|
+ z: 0.947612004346693,
|
|
|
},
|
|
|
+ center: {
|
|
|
+ x: -0.052807476121180814,
|
|
|
+ y: 0.02451796399554085,
|
|
|
+ z: -0.022911006648570736,
|
|
|
+ },
|
|
|
+ eye: {
|
|
|
+ x: -2.126379643342493,
|
|
|
+ y: -2.551422475965373,
|
|
|
+ z: 1.0917667684145647,
|
|
|
+ },
|
|
|
+ projection: {
|
|
|
+ type: "orthographic",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // 添加 annotation 模拟 Y 轴标题
|
|
|
+ // annotations: [
|
|
|
+ // {
|
|
|
+ // x: -0.15, // 让标题靠左
|
|
|
+ // y: 1, // 让标题在 Y 轴顶部
|
|
|
+ // xref: "paper",
|
|
|
+ // yref: "paper",
|
|
|
+ // text: this.chartData.xaixs, // Y 轴标题
|
|
|
+ // showarrow: false,
|
|
|
+ // textangle: 90, // 旋转 90°
|
|
|
+ // font: {
|
|
|
+ // size: 16,
|
|
|
+ // color: "black",
|
|
|
+ // },
|
|
|
+ // xanchor: "right",
|
|
|
+ // yanchor: "top", // 避免重叠
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
},
|
|
|
margin: { t: 50, b: 50, l: 50, r: 50 },
|
|
|
staticPlot: false,
|
|
|
showlegend: true,
|
|
|
legend: {
|
|
|
marker: {
|
|
|
- size: 10, // 图例中点的大小
|
|
|
+ size: 10,
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
+
|
|
|
const config = {
|
|
|
modeBarButtonsToAdd: [
|
|
|
{
|
|
@@ -384,19 +378,19 @@ export default {
|
|
|
Plotly.relayout(`plotly-3d-chart-` + this.index, {
|
|
|
"scene.camera": {
|
|
|
up: {
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- z: 1,
|
|
|
+ x: 0.200292643688136,
|
|
|
+ y: 0.2488259353493132,
|
|
|
+ z: 0.947612004346693,
|
|
|
},
|
|
|
center: {
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- z: 0,
|
|
|
+ x: -0.052807476121180814,
|
|
|
+ y: 0.02451796399554085,
|
|
|
+ z: -0.022911006648570736,
|
|
|
},
|
|
|
eye: {
|
|
|
- x: -1.9411806339437676,
|
|
|
- y: -1.0688695891896567,
|
|
|
- z: 0.47888991188707036,
|
|
|
+ x: -2.126379643342493,
|
|
|
+ y: -2.551422475965373,
|
|
|
+ z: 1.0917667684145647,
|
|
|
},
|
|
|
projection: {
|
|
|
type: "orthographic",
|
|
@@ -404,7 +398,7 @@ export default {
|
|
|
},
|
|
|
"scene.aspectratio": {
|
|
|
x: 2.2,
|
|
|
- y: 1.8,
|
|
|
+ y: 1.7,
|
|
|
z: 1,
|
|
|
},
|
|
|
});
|