|
|
@@ -0,0 +1,544 @@
|
|
|
+<!--
|
|
|
+ * @Author: your name
|
|
|
+ * @Date: 2024-09-11 14:32:12
|
|
|
+ * @LastEditTime: 2025-03-14 18:39:44
|
|
|
+ * @LastEditors: bogon
|
|
|
+ * @Description: In User Settings Edit
|
|
|
+ * @FilePath: /performance-test/src/views/performance/components/chartsCom/powerMarkers2DCharts.vue
|
|
|
+-->
|
|
|
+<!-- <h1>逐月有功功率散点2D分析</h1>
|
|
|
+ <h1>偏航控制策略异常检测 2D</h1> 目前没找到这个分析模型-->
|
|
|
+<template>
|
|
|
+ <div style="min-height: 600px">
|
|
|
+ <!-- 2D散点图 -->
|
|
|
+ <template>
|
|
|
+ <div style="display: flex; align-items: center; margin-top: 20px">
|
|
|
+ <div style="margin-right: 20px; display: flex; align-items: center">
|
|
|
+ <el-select
|
|
|
+ size="small"
|
|
|
+ v-model="color1"
|
|
|
+ @change="updateChartColor"
|
|
|
+ placeholder="选择配色方案"
|
|
|
+ style="width: 200px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(scheme, index) in colorSchemes"
|
|
|
+ :key="index"
|
|
|
+ :label="scheme.label"
|
|
|
+ :value="scheme.colors"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ v-for="color in scheme.colors.slice(0, 8)"
|
|
|
+ :style="{
|
|
|
+ background: color,
|
|
|
+ width: '20px',
|
|
|
+ height: '20px',
|
|
|
+ display: 'inline-block',
|
|
|
+ }"
|
|
|
+ ></span>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 点大小控制 -->
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <!-- <span style="margin-right: 10px">点大小</span> -->
|
|
|
+ <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"
|
|
|
+ :ref="`plotlyChart-${index}`"
|
|
|
+ style="height: 500px"
|
|
|
+ >
|
|
|
+ <el-empty v-if="isError" description="请求失败"></el-empty>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Plotly from "plotly.js-dist";
|
|
|
+import axios from "axios";
|
|
|
+import { myMixin } from "@/mixins/chartRequestMixin";
|
|
|
+import { colorSchemes } from "@/views/overview/js/colors";
|
|
|
+import { mapState } from "vuex";
|
|
|
+export default {
|
|
|
+ mixins: [myMixin],
|
|
|
+ props: {
|
|
|
+ fileAddr: {
|
|
|
+ default: "",
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ index: {
|
|
|
+ type: String,
|
|
|
+ },
|
|
|
+ setUpImgData: {
|
|
|
+ default: () => [],
|
|
|
+ type: Array,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pointSize: 5, // 默认点大小
|
|
|
+ chartData: {},
|
|
|
+ chartType: "scatter", // 默认显示散点图
|
|
|
+ color1: colorSchemes[0].colors, // 默认颜色
|
|
|
+ selectedPoints: [],
|
|
|
+ originalColors: [],
|
|
|
+ originalSizes: [],
|
|
|
+ // 配色方案列表(每个方案是一个颜色数组)
|
|
|
+ colorSchemes: [...colorSchemes],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState("themes", {
|
|
|
+ themeColor: "themeColor",
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ themeColor: {
|
|
|
+ handler(newval) {
|
|
|
+ console.log(newval, "newval");
|
|
|
+ if (newval.length === 0) {
|
|
|
+ this.color1 = colorSchemes[0].colors;
|
|
|
+ } else {
|
|
|
+ this.color1 = newval;
|
|
|
+ }
|
|
|
+ this.updateChartColor();
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ setUpImgData: {
|
|
|
+ handler(newType) {
|
|
|
+ this.drawChart();
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ this.getData();
|
|
|
+ if (this.themeColor.length === 0) {
|
|
|
+ this.color1 = colorSchemes[0].colors;
|
|
|
+ } else {
|
|
|
+ this.color1 = this.themeColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log(this.color1, colorSchemes[0].colors, "color1");
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 根据配色方案设置每个选项的样式
|
|
|
+ getOptionStyle(scheme) {
|
|
|
+ return {
|
|
|
+ background: `linear-gradient(to right, ${scheme
|
|
|
+ .slice(0, 8)
|
|
|
+ .join(", ")})`,
|
|
|
+ color: "#fff",
|
|
|
+ height: "30px",
|
|
|
+ lineHeight: "30px",
|
|
|
+ borderRadius: "0px",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async getData() {
|
|
|
+ if (this.fileAddr !== "") {
|
|
|
+ try {
|
|
|
+ this.loading = true;
|
|
|
+ this.cancelToken = axios.CancelToken.source();
|
|
|
+
|
|
|
+ const resultChartsData = await axios.get(this.fileAddr, {
|
|
|
+ cancelToken: this.cancelToken.token,
|
|
|
+ });
|
|
|
+ this.chartData = resultChartsData.data;
|
|
|
+ this.drawChart();
|
|
|
+ this.isError = false;
|
|
|
+ this.loading = false;
|
|
|
+ } catch (error) {
|
|
|
+ this.isError = true;
|
|
|
+ this.loading = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ drawChart() {
|
|
|
+ // 提取散点数据和线数据
|
|
|
+ const data =
|
|
|
+ this.chartData.data &&
|
|
|
+ this.chartData.data.filter(
|
|
|
+ (item) => item.enginName !== "合同功率曲线"
|
|
|
+ )[0]; // 点数据
|
|
|
+
|
|
|
+ const lineData =
|
|
|
+ this.chartData.data &&
|
|
|
+ this.chartData.data.filter(
|
|
|
+ (item) => item.enginName === "合同功率曲线"
|
|
|
+ )[0]; // 线数据
|
|
|
+
|
|
|
+ // 提取唯一时间标签,并计算 tickvals 和 ticktext
|
|
|
+ const uniqueTimeLabels = data.colorbar
|
|
|
+ ? [...new Set(data.colorbar)]
|
|
|
+ : [...new Set(data.color)]; // 从 colorbar 中提取唯一的时间标签
|
|
|
+ // console.log(data.colorbar, "data.colorbar 1");
|
|
|
+ const tickvals = uniqueTimeLabels.map((label, index) => index + 1); // 根据时间标签生成 tickvals
|
|
|
+ const ticktext = uniqueTimeLabels.map((dateStr) => {
|
|
|
+ const date = new Date(dateStr);
|
|
|
+ return date.toLocaleDateString("en-CA", {
|
|
|
+ year: "numeric",
|
|
|
+ month: "2-digit",
|
|
|
+ }); // 格式化为 'yyyy-MM'
|
|
|
+ }); // 使用格式化后的时间作为 ticktext
|
|
|
+ const timeMapping = uniqueTimeLabels.reduce((acc, curr, index) => {
|
|
|
+ acc[curr] = index + 1;
|
|
|
+ return acc;
|
|
|
+ }, {});
|
|
|
+ // 获取 yData 的最小值和最大值来做比例值的计算
|
|
|
+ const minValue = Math.min(...tickvals);
|
|
|
+ const maxValue = Math.max(...tickvals);
|
|
|
+ // 计算比例值
|
|
|
+ const colors = ticktext.map((item, ind) => {
|
|
|
+ // 计算比例值(可以根据需要调整映射的数据范围)
|
|
|
+ const proportion = (tickvals[ind] - minValue) / (maxValue - minValue);
|
|
|
+ return [
|
|
|
+ proportion, // 比例值
|
|
|
+ this.color1[ind], // 对应的颜色
|
|
|
+ ];
|
|
|
+ });
|
|
|
+ // 将时间字符串映射为数字
|
|
|
+ let colorValues = [];
|
|
|
+ // data.colorbar.map((date, index) => timeMapping[date]);
|
|
|
+ if (data.colorbar) {
|
|
|
+ colorValues = data.colorbar.map((date, index) => timeMapping[date]);
|
|
|
+ } else {
|
|
|
+ colorValues = data.color.map((date, index) => timeMapping[date]);
|
|
|
+ }
|
|
|
+ // 仅取 this.color1 的前 4 种颜色进行渐变
|
|
|
+ // const colorStops = [
|
|
|
+ // this.color1[0],
|
|
|
+ // this.color1[4],
|
|
|
+ // this.color1[8],
|
|
|
+ // this.color1[12],
|
|
|
+ // ];
|
|
|
+
|
|
|
+ // // 计算渐变比例
|
|
|
+ // const colors = colorStops.map((color, index) => {
|
|
|
+ // const proportion = index / (colorStops.length - 1); // 计算比例值 (0, 1/3, 2/3, 1)
|
|
|
+ // return [proportion, color]; // 生成颜色映射
|
|
|
+ // });
|
|
|
+
|
|
|
+ // // 确保至少有 2 个颜色,否则使用默认颜色
|
|
|
+ // if (colors.length < 2) {
|
|
|
+ // colors.push([1, colorStops[colorStops.length - 1] || "#1B2973"]);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 计算颜色值映射
|
|
|
+ // let colorValues = [];
|
|
|
+ // if (data.colorbar) {
|
|
|
+ // colorValues = data.colorbar.map((date) => timeMapping[date]);
|
|
|
+ // } else {
|
|
|
+ // colorValues = data.color.map((date) => timeMapping[date]);
|
|
|
+ // }
|
|
|
+ let scatterTrace = {}; // 用于存放散点图的 trace
|
|
|
+ let lineTrace = {}; // 用于存放折线图的 trace
|
|
|
+
|
|
|
+ // 保存原始颜色和大小
|
|
|
+ this.originalColors = [...data.yData];
|
|
|
+ this.originalSizes = new Array(data.xData.length).fill(6); // 初始点大小
|
|
|
+
|
|
|
+ // 绘制散点图
|
|
|
+ if (this.chartType === "scatter") {
|
|
|
+ scatterTrace = {
|
|
|
+ x: data.xData,
|
|
|
+ y: data.yData,
|
|
|
+ mode: "markers", // 散点
|
|
|
+ type: "scattergl", // 使用散点图
|
|
|
+ text: data.engineName, // 提示文本
|
|
|
+ marker: {
|
|
|
+ color: colorValues, // 使用时间数据来映射颜色
|
|
|
+ colorscale: this.color1
|
|
|
+ ? [...colors]
|
|
|
+ : [
|
|
|
+ [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, // 色标标题
|
|
|
+ tickvals: tickvals, // 设置刻度值
|
|
|
+ ticktext: ticktext, // 设置刻度文本
|
|
|
+ tickmode: "array", // 使用数组模式
|
|
|
+ tickangle: -45, // 可选:调整刻度文本的角度
|
|
|
+ },
|
|
|
+ size: new Array(data.xData.length).fill(this.pointSize), // 点的大小
|
|
|
+ },
|
|
|
+ hovertemplate:
|
|
|
+ `${this.chartData.xaixs}:` +
|
|
|
+ ` %{x} <br> ` +
|
|
|
+ `${this.chartData.yaixs}:` +
|
|
|
+ "%{y} <br>" +
|
|
|
+ `时间: %{customdata}<extra></extra>`, // 在 hover 中显示格式化后的时间
|
|
|
+ customdata: data.colorbar || data.color, // 将格式化后的时间存入 customdata
|
|
|
+ };
|
|
|
+ }
|
|
|
+ if (lineData) {
|
|
|
+ // 绘制折线图
|
|
|
+ lineTrace = {
|
|
|
+ x: lineData.xData, // 线数据的 xData
|
|
|
+ y: lineData.yData, // 线数据的 yData
|
|
|
+ mode: "lines+markers", // 线和点同时显示
|
|
|
+ type: "scattergl", // 使用 scattergl 类型
|
|
|
+ text: lineData.engineName, // 提示文本
|
|
|
+ line: {
|
|
|
+ color: "red", // 线条颜色
|
|
|
+ },
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ // 图表布局
|
|
|
+ const layout = {
|
|
|
+ title: {
|
|
|
+ text: data.title,
|
|
|
+ font: {
|
|
|
+ size: 16, // 设置标题字体大小(默认 16)
|
|
|
+ weight: "bold",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xaxis: {
|
|
|
+ title: this.chartData.xaixs,
|
|
|
+ gridcolor: "rgb(255,255,255)", // 网格线颜色
|
|
|
+ tickcolor: "rgb(255,255,255)",
|
|
|
+ backgroundcolor: "#e5ecf6",
|
|
|
+ showbackground: true, // 显示背景
|
|
|
+ },
|
|
|
+ yaxis: {
|
|
|
+ title: this.chartData.yaixs,
|
|
|
+ gridcolor: "rgb(255,255,255)", // 网格线颜色
|
|
|
+ tickcolor: "rgb(255,255,255)",
|
|
|
+ backgroundcolor: "#e5ecf6",
|
|
|
+ showbackground: true, // 显示背景
|
|
|
+ },
|
|
|
+ showlegend: false,
|
|
|
+ plot_bgcolor: "#e5ecf6",
|
|
|
+ gridcolor: "#fff", // 设置网格线颜色
|
|
|
+ };
|
|
|
+ const getChartSetUp = (axisTitle) => {
|
|
|
+ return this.setUpImgData.find((item) => item.text.includes(axisTitle));
|
|
|
+ };
|
|
|
+
|
|
|
+ const xChartSetUp = getChartSetUp(layout.xaxis.title);
|
|
|
+ if (xChartSetUp) {
|
|
|
+ layout.xaxis.dtick = xChartSetUp.dtick;
|
|
|
+ layout.xaxis.range = [xChartSetUp.min, xChartSetUp.max];
|
|
|
+ }
|
|
|
+
|
|
|
+ const yChartSetUp = getChartSetUp(layout.yaxis.title);
|
|
|
+ if (yChartSetUp) {
|
|
|
+ layout.yaxis.dtick = yChartSetUp.dtick;
|
|
|
+ layout.yaxis.range = [yChartSetUp.min, yChartSetUp.max];
|
|
|
+ }
|
|
|
+ // 配置工具栏按钮
|
|
|
+ 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,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 合并散点和折线图的数据
|
|
|
+ const traces = [];
|
|
|
+ if (scatterTrace) traces.push(scatterTrace); // 如果有散点数据
|
|
|
+ if (lineTrace) traces.push(lineTrace); // 如果有线图数据
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 使用 Plotly 绘制图表
|
|
|
+ Plotly.react(
|
|
|
+ this.$refs[`plotlyChart-${this.index}`], // 这里是对 DOM 元素的引用
|
|
|
+ traces,
|
|
|
+ layout,
|
|
|
+ config
|
|
|
+ ).then(() => {
|
|
|
+ // 确保图表加载完成后设置工具栏按钮
|
|
|
+ const plotElement = this.$refs[`plotlyChart-${this.index}`];
|
|
|
+ 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],
|
|
|
+ });
|
|
|
+
|
|
|
+ // 确保选中的点在最上面
|
|
|
+ const scatterTrace = gd.data[0]; // 原来的散点数据
|
|
|
+ const selectedTrace = {
|
|
|
+ x: this.selectedPoints.map((p) => p.x),
|
|
|
+ y: this.selectedPoints.map((p) => p.y),
|
|
|
+ mode: "markers",
|
|
|
+ type: "scattergl",
|
|
|
+ marker: {
|
|
|
+ color: "red", // 选中点颜色
|
|
|
+ size: 10,
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ // 合并数据,并保证选中点在最后
|
|
|
+ const updatedTraces = [scatterTrace, selectedTrace]; // 选中的点 `selectedTrace` 放在最后
|
|
|
+
|
|
|
+ // 更新图表
|
|
|
+ Plotly.react(gd, updatedTraces, gd.layout);
|
|
|
+
|
|
|
+ // 处理选中的数据
|
|
|
+ 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);
|
|
|
+ },
|
|
|
+ updateChartColor(color) {
|
|
|
+ // 更新图表颜色
|
|
|
+ // this.color1 = color;
|
|
|
+ this.drawChart();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+/* 自定义样式 */
|
|
|
+</style>
|