|
|
@@ -0,0 +1,358 @@
|
|
|
+<!--
|
|
|
+ * @Author: your name
|
|
|
+ * @Date: 2025-01-17 17:22:04
|
|
|
+ * @LastEditTime: 2025-01-17 17:23:46
|
|
|
+ * @LastEditors: bogon
|
|
|
+ * @Description: In User Settings Edit
|
|
|
+ * @FilePath: /performance-test/src/views/performance/components/chartsCom/NoColourBandTwoDMarkerChart.vue
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div style="min-height: 300px">
|
|
|
+ <div v-inview="handleDomInView"></div>
|
|
|
+ <!-- 2D散点图 没色带 -->
|
|
|
+ <template v-if="isShow === true">
|
|
|
+ <div style="display: flex; align-items: center; margin-top: 20px">
|
|
|
+ <div style="margin-right: 20px; display: flex; align-items: center">
|
|
|
+ <el-color-picker
|
|
|
+ size="small"
|
|
|
+ v-model="color1"
|
|
|
+ show-alpha
|
|
|
+ @change="updateChartColor"
|
|
|
+ ></el-color-picker>
|
|
|
+ <span style="margin-left: 10px">自定义颜色</span>
|
|
|
+ </div>
|
|
|
+ <!-- 图表类型切换按钮 -->
|
|
|
+ <div>
|
|
|
+ <el-button size="small" @click="setChartType('scatter')"
|
|
|
+ >散点图</el-button
|
|
|
+ >
|
|
|
+ <el-button size="small" @click="setChartType('line')"
|
|
|
+ >折线图</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-loading="$parent.requestRecord[index] === 'start'">
|
|
|
+ <el-empty
|
|
|
+ v-if="result[index] === 'error'"
|
|
|
+ description="请求失败"
|
|
|
+ ></el-empty>
|
|
|
+ <div v-else ref="plotlyChart" style="height: 400px"></div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Plotly from "plotly.js-dist";
|
|
|
+import axios from "axios";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ fileAddr: {
|
|
|
+ default: "",
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ index: {
|
|
|
+ type: Number,
|
|
|
+ },
|
|
|
+ result: {
|
|
|
+ type: Array,
|
|
|
+ default: [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ chartData: {},
|
|
|
+ chartType: "scatter", // 初始化为散点图 (scatter)
|
|
|
+ color1: "", // 默认颜色
|
|
|
+ selectedPoints: [],
|
|
|
+ originalColors: [],
|
|
|
+ originalSizes: [],
|
|
|
+ isShow: undefined,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ result: {
|
|
|
+ deep: true,
|
|
|
+ handler(v) {
|
|
|
+ console.log("-----------------------", v);
|
|
|
+ const startIndex = this.$parent.requestRecord.findIndex(
|
|
|
+ (item) => item === "start"
|
|
|
+ );
|
|
|
+ if (startIndex > -1) {
|
|
|
+ if (startIndex === this.index) {
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ if (this.index === 0) {
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleDomInView(isInView) {
|
|
|
+ if (isInView && this.isShow === undefined) {
|
|
|
+ this.isShow = isInView;
|
|
|
+ this.$emit("changeRequestNum", this.index);
|
|
|
+ }
|
|
|
+ console.log(this.isShow);
|
|
|
+ },
|
|
|
+ async getData() {
|
|
|
+ if (this.fileAddr !== "") {
|
|
|
+ try {
|
|
|
+ const resultChartsData = await axios.get(this.fileAddr);
|
|
|
+ this.chartData = resultChartsData.data;
|
|
|
+ this.drawChart();
|
|
|
+ this.$emit("getResult", { index: this.index, result: "success" });
|
|
|
+ } catch (error) {
|
|
|
+ this.$emit("getResult", { index: this.index, result: "error" });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ drawChart() {
|
|
|
+ const data = this.chartData.data && this.chartData.data[0];
|
|
|
+ let trace = {};
|
|
|
+ // 保存原始颜色和大小
|
|
|
+ this.originalColors = [...data.yData];
|
|
|
+ this.originalSizes = new Array(data.xData.length).fill(6); // 初始点大小
|
|
|
+ if (this.chartType === "scatter") {
|
|
|
+ // 绘制 2D 散点图
|
|
|
+ console.log("重新绘制图表", this.color1);
|
|
|
+ trace = {
|
|
|
+ x: data.xData,
|
|
|
+ y: data.yData,
|
|
|
+ mode: "markers",
|
|
|
+ type: "scattergl", // 这里改为 scattergl
|
|
|
+ text: data.engineName, // 提示文本
|
|
|
+ marker: {
|
|
|
+ color: data.yData, // 根据 yData 的值设置颜色
|
|
|
+ // colorscale: "Viridis", // 使用的颜色区间
|
|
|
+ colorscale: this.color1
|
|
|
+ ? [
|
|
|
+ [0, "#F9FDD2"], // 颜色从 this.color1 开始
|
|
|
+ [1, this.color1], // 结束颜色为其他颜色
|
|
|
+ ]
|
|
|
+ : [
|
|
|
+ [0, "#F9FDD2"],
|
|
|
+ [0.15, "#E9F6BD"],
|
|
|
+ [0.3, "#C2E3B9"],
|
|
|
+ [0.45, "#8AC8BE"],
|
|
|
+ [0.6, "#5CA8BF"],
|
|
|
+ [0.75, "#407DB3"],
|
|
|
+ [0.9, "#2E4C9A"],
|
|
|
+ [1, "#1B2973"],
|
|
|
+ ],
|
|
|
+ // colorbar: {
|
|
|
+ // title: data.colorbartitle, // 色标标题
|
|
|
+ // },
|
|
|
+ size: new Array(data.xData.length).fill(6), // 初始点大小
|
|
|
+ },
|
|
|
+ };
|
|
|
+ } else if (this.chartType === "line") {
|
|
|
+ // 折线图
|
|
|
+ trace = {
|
|
|
+ x: data.xData,
|
|
|
+ y: data.yData,
|
|
|
+ mode: "lines",
|
|
|
+ type: "scattergl", // 折线图
|
|
|
+ text: data.engineName,
|
|
|
+ line: {
|
|
|
+ color: this.color1, // 使用自定义颜色
|
|
|
+ },
|
|
|
+ };
|
|
|
+ } else if (this.chartType === "bar") {
|
|
|
+ // 柱状图
|
|
|
+ trace = {
|
|
|
+ x: data.xData,
|
|
|
+ y: data.yData,
|
|
|
+ type: "bar", // 柱状图
|
|
|
+ marker: {
|
|
|
+ color: this.color1, // 使用自定义颜色
|
|
|
+ },
|
|
|
+ };
|
|
|
+ }
|
|
|
+ // 图表布局;
|
|
|
+ const layout = {
|
|
|
+ title: data.title,
|
|
|
+ xaxis: {
|
|
|
+ title: this.chartData.xaixs,
|
|
|
+ },
|
|
|
+ yaxis: {
|
|
|
+ title: this.chartData.yaixs,
|
|
|
+ },
|
|
|
+ showlegend: false,
|
|
|
+ };
|
|
|
+ const config = {
|
|
|
+ modeBarButtonsToAdd: [
|
|
|
+ {
|
|
|
+ name: "选择",
|
|
|
+ icon: Plotly.Icons.pencil,
|
|
|
+ click: (gd) => this.handleSelectClick(gd),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "清除选中",
|
|
|
+ icon: Plotly.Icons.undo,
|
|
|
+ click: (gd) => this.handleClearSelect(gd),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "下载CSV文件",
|
|
|
+ icon: Plotly.Icons.disk,
|
|
|
+ click: (gd) => this.handleDownloadCSV(gd),
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ modeBarButtonsToRemove: [
|
|
|
+ // 移除不需要的工具按钮
|
|
|
+ "lasso2d",
|
|
|
+ ],
|
|
|
+ displaylogo: false,
|
|
|
+ editable: true,
|
|
|
+ scrollZoom: false,
|
|
|
+ };
|
|
|
+ // 使用 Plotly 绘制图表
|
|
|
+ Plotly.react(this.$refs.plotlyChart, [trace], layout, config).then(() => {
|
|
|
+ // 确保在图表加载完成后设置工具栏按钮
|
|
|
+ const plotElement = this.$refs.plotlyChart;
|
|
|
+ Plotly.relayout(plotElement, layout); // 使用 relayout 来确保自定义按钮应用
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handleSelectClick(gd) {
|
|
|
+ // 绑定 plotly_click 事件
|
|
|
+ gd.on("plotly_click", (data) => {
|
|
|
+ const pointIndex = data.points[0].pointIndex;
|
|
|
+ const xClick = data.points[0].x;
|
|
|
+ const yClick = data.points[0].y;
|
|
|
+
|
|
|
+ // 将点击的点添加到选中的点数组
|
|
|
+ this.selectedPoints.push({
|
|
|
+ x: xClick, // 点击点的 x 坐标
|
|
|
+ y: yClick, // 点击点的 y 坐标
|
|
|
+ index: pointIndex, // 点击点的索引
|
|
|
+ time: data.points[0].text, // 点击点的时间信息
|
|
|
+ });
|
|
|
+
|
|
|
+ // 初始化颜色和大小数组
|
|
|
+ let newColors = [...this.originalColors];
|
|
|
+ let newSize = [...this.originalSizes];
|
|
|
+
|
|
|
+ // 如果选中的点数大于等于3，进行多边形选择区域的处理
|
|
|
+ if (this.selectedPoints.length >= 3) {
|
|
|
+ const xv = this.selectedPoints.map((p) => p.x);
|
|
|
+ const yv = this.selectedPoints.map((p) => p.y);
|
|
|
+
|
|
|
+ // 判断点是否在多边形内
|
|
|
+ function inPolygon(x, y, xv, yv) {
|
|
|
+ let inside = false;
|
|
|
+ for (let i = 0, j = xv.length - 1; i < xv.length; j = i++) {
|
|
|
+ const intersect =
|
|
|
+ yv[i] > y !== yv[j] > y &&
|
|
|
+ x < ((xv[j] - xv[i]) * (y - yv[i])) / (yv[j] - yv[i]) + xv[i];
|
|
|
+ if (intersect) inside = !inside;
|
|
|
+ }
|
|
|
+ return inside;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 用于跟踪已添加的 (x, y) 组合
|
|
|
+ const addedPoints = {};
|
|
|
+
|
|
|
+ // 遍历图表数据中的所有点，检查是否在多边形内
|
|
|
+ gd.data[0].x.forEach((xVal, i) => {
|
|
|
+ const yVal = gd.data[0].y[i];
|
|
|
+ if (inPolygon(xVal, yVal, xv, yv)) {
|
|
|
+ const pointKey = `${xVal}-${yVal}`;
|
|
|
+ if (!addedPoints[pointKey]) {
|
|
|
+ this.selectedPoints.push({
|
|
|
+ x: gd.data[0].x[i],
|
|
|
+ y: gd.data[0].y[i],
|
|
|
+ time: gd.data[0].text[i],
|
|
|
+ });
|
|
|
+
|
|
|
+ newColors[i] = "red"; // 高亮选择的点
|
|
|
+ newSize[i] = 10; // 设置点的大小
|
|
|
+ addedPoints[pointKey] = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新选中点的颜色和大小
|
|
|
+ this.selectedPoints.forEach((point) => {
|
|
|
+ newColors[point.index] = "red";
|
|
|
+ newSize[point.index] = 10;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 使用 Plotly.restyle 更新颜色和大小
|
|
|
+ Plotly.restyle(gd, {
|
|
|
+ "marker.color": [newColors],
|
|
|
+ "marker.size": [newSize],
|
|
|
+ });
|
|
|
+
|
|
|
+ // 处理选中的数据
|
|
|
+ this.getSelectData(this.selectedPoints, gd.layout);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ handleClearSelect(gd) {
|
|
|
+ this.selectedPoints = [];
|
|
|
+ Plotly.restyle(gd, {
|
|
|
+ "marker.color": [this.originalColors],
|
|
|
+ "marker.size": [this.originalSizes],
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getSelectData(selectedPoints, layout) {
|
|
|
+ // 在这里处理选中的数据，您可以将其展示或导出等
|
|
|
+ console.log("选中的点数据：", selectedPoints);
|
|
|
+ console.log("布局信息：", layout);
|
|
|
+ },
|
|
|
+ handleDownloadCSV(gd) {
|
|
|
+ if (this.selectedPoints.length === 0) {
|
|
|
+ alert("没有选中的数据");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.downloadCSV();
|
|
|
+ },
|
|
|
+
|
|
|
+ downloadCSV() {
|
|
|
+ const headers = [this.chartData.xaixs, this.chartData.yaixs];
|
|
|
+ const csvRows = [headers]; // 保存标头
|
|
|
+ // 使用 Set 或 Map 去重
|
|
|
+ const uniquePoints = [];
|
|
|
+ this.selectedPoints.forEach((point) => {
|
|
|
+ if (!uniquePoints.some((p) => p.x === point.x && p.y === point.y)) {
|
|
|
+ uniquePoints.push(point);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 将去重后的点加入 CSV 数据
|
|
|
+ uniquePoints.forEach((point) => {
|
|
|
+ csvRows.push(`${point.x},${point.y}`);
|
|
|
+ });
|
|
|
+
|
|
|
+ const csvString = csvRows.join("\n");
|
|
|
+ const blob = new Blob([csvString], { type: "text/csv; charset=utf-8" });
|
|
|
+ const url = URL.createObjectURL(blob);
|
|
|
+ const a = document.createElement("a");
|
|
|
+ a.href = url;
|
|
|
+ a.download = "selected_data.csv";
|
|
|
+ a.click();
|
|
|
+ URL.revokeObjectURL(url);
|
|
|
+ },
|
|
|
+ setChartType(type) {
|
|
|
+ // 切换图表类型
|
|
|
+ this.chartType = type;
|
|
|
+ this.drawChart(); // 重新绘制图表
|
|
|
+ },
|
|
|
+
|
|
|
+ updateChartColor(color) {
|
|
|
+ // 更新图表颜色
|
|
|
+ this.color1 = color;
|
|
|
+ console.log(this.color1, "this.color1");
|
|
|
+ this.drawChart();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped></style>
|
liujiejie