|
|
@@ -88,10 +88,6 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
mixins: [myMixin],
|
|
|
- async mounted() {
|
|
|
- this.getData();
|
|
|
- this.color1 = this.themeColor;
|
|
|
- },
|
|
|
computed: {
|
|
|
...mapState("themes", {
|
|
|
themeColor: "themeColor",
|
|
|
@@ -99,8 +95,12 @@ export default {
|
|
|
},
|
|
|
watch: {
|
|
|
themeColor: {
|
|
|
- handler() {
|
|
|
- this.color1 = this.themeColor;
|
|
|
+ handler(newval) {
|
|
|
+ if (newval.length === 0) {
|
|
|
+ this.color1 = colorSchemes[0].colors;
|
|
|
+ } else {
|
|
|
+ this.color1 = newval;
|
|
|
+ }
|
|
|
this.updateChartColor();
|
|
|
},
|
|
|
deep: true,
|
|
|
@@ -112,6 +112,14 @@ export default {
|
|
|
deep: true,
|
|
|
},
|
|
|
},
|
|
|
+ async mounted() {
|
|
|
+ this.getData();
|
|
|
+ if (this.themeColor.length === 0) {
|
|
|
+ this.color1 = colorSchemes[0].colors;
|
|
|
+ } else {
|
|
|
+ this.color1 = this.themeColor;
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
async getData() {
|
|
|
if (this.fileAddr !== "") {
|
|
|
@@ -203,11 +211,27 @@ export default {
|
|
|
};
|
|
|
return trace;
|
|
|
});
|
|
|
- const yData = [...new Set(this.chartData.data[0].yData)]; // 获取机组编号
|
|
|
- const ticktext = yData;
|
|
|
- const tickvals = yData.map((_, index) => index + 1); // 让 tickvals 均匀分布
|
|
|
+ const yData = [...new Set(this.chartData.data[0].yData)]; // 获取唯一的yData
|
|
|
+ const totalTicks = 10; // 想要显示的刻度数量
|
|
|
|
|
|
- console.log(ticktext, "tickvals", tickvals);
|
|
|
+ // 保证第一个和最后一个刻度
|
|
|
+ const firstValue = yData[0];
|
|
|
+ const lastValue = yData[yData.length - 1];
|
|
|
+
|
|
|
+ // 计算中间部分的刻度值
|
|
|
+ const interval = Math.floor((yData.length - 1) / 8); // 总长度减去最初和最后一个，计算间隔
|
|
|
+
|
|
|
+ // 选择需要展示的刻度
|
|
|
+ const tickvals = [firstValue]; // 先将第一个值放入刻度数组
|
|
|
+
|
|
|
+ for (let i = 1; i < totalTicks - 1; i++) {
|
|
|
+ const index = i * interval;
|
|
|
+ tickvals.push(yData[index]);
|
|
|
+ }
|
|
|
+
|
|
|
+ tickvals.push(lastValue); // 最后将最后一个值放入刻度数组
|
|
|
+
|
|
|
+ const ticktext = tickvals;
|
|
|
const layout = {
|
|
|
title: {
|
|
|
text: this.chartData.data[0].title,
|
|
|
@@ -216,7 +240,6 @@ export default {
|
|
|
weight: "bold",
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
scene: {
|
|
|
xaxis: {
|
|
|
title: this.chartData.xaixs,
|
|
|
@@ -234,10 +257,11 @@ export default {
|
|
|
},
|
|
|
yaxis: {
|
|
|
title: this.chartData.yaixs,
|
|
|
- tickvals: [...new Set(this.chartData.data[0].yData)],
|
|
|
- ticktext: [...new Set(this.chartData.data[0].yData)],
|
|
|
type: "category", // 让 Y 轴按类别均匀分布
|
|
|
- categoryorder: "category ascending", // 按类别字母顺序排列
|
|
|
+ categoryorder: "array", // 自定义顺序，确保间隔均匀
|
|
|
+ categoryarray: [...new Set(this.chartData.data[0].yData)], // 以原始数据顺序排序
|
|
|
+ tickvals: tickvals,
|
|
|
+ ticktext: ticktext,
|
|
|
gridcolor: "rgb(255,255,255)",
|
|
|
tickcolor: "rgb(255,255,255)",
|
|
|
backgroundcolor: "#CFD4DC",
|
rui.jiang