123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254 |
- <template>
- <div>
- <!-- 配色方案选择和图表类型切换 -->
- <div style="display: flex; align-items: center; padding-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"
- :style="getOptionStyle(scheme.colors)"
- ></el-option>
- </el-select>
- </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 style="height: 600px">
- <div
- :id="`plotly-3d-chart-` + index"
- style="width: 100%; height: 600px"
- ></div>
- <div
- v-loading="loading"
- :id="`plotly-3d-chart-` + index"
- ref="plotlyChart"
- style="height: 600px"
- >
- <el-empty v-if="isError" description="请求失败"></el-empty>
- </div>
- </div>
- </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";
- export default {
- props: {
- fileAddr: {
- default: "",
- type: String,
- },
- index: {
- default: "",
- type: String,
- },
- },
- data() {
- return {
- color1: [
- "#DBEEBC",
- "#A8D7BE",
- "#8ECAC1",
- "#77BDC2",
- "#64ADC2",
- "#559ABE",
- "#4884B7",
- "#406DAB",
- "#3856A0",
- "#314291",
- "#28357A",
- "#1A285E",
- "#FF7F50",
- "#FFD700",
- "#90EE90",
- ], // 默认颜色
- chartData: {},
- chartType: "scatter", // 当前图表类型(默认是散点图)
- colorSchemes: [...colorSchemes],
- pointSize: 2, // 默认点大小
- };
- },
- mixins: [myMixin],
- async mounted() {
- this.getData();
- },
- methods: {
- 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,
- });
- if (typeof resultChartsData.data === "string") {
- let dataString = resultChartsData.data;
- dataString = dataString.trim(); // 去除前后空格
- dataString = dataString.replace(/Infinity/g, '"Infinity"'); // 替换 Infinity 为 "Infinity"
- try {
- const parsedData = JSON.parse(dataString);
- this.chartData = parsedData;
- } catch (error) {
- console.error("JSON 解析失败:", error);
- }
- } else {
- this.chartData = resultChartsData.data;
- }
- this.renderChart();
- this.isError = false;
- this.loading = false;
- } catch (error) {
- this.isError = true;
- this.loading = false;
- }
- }
- },
- // 更新配色方案
- updateChartColor() {
- this.renderChart(); // 当配色方案或点大小发生变化时重新渲染图表
- },
- // 切换图表类型
- setChartType(type) {
- this.chartType = type;
- this.renderChart(); // 切换图表类型时重新渲染图表
- },
- // 获取配色选项样式
- getOptionStyle(scheme) {
- return {
- background: `linear-gradient(to right, ${scheme.join(", ")})`,
- color: "#fff",
- height: "30px",
- lineHeight: "30px",
- borderRadius: "4px",
- };
- },
- renderChart() {
- const uniqueColors = [...new Set(this.chartData.data[0].color)];
- if (!this.color1) {
- this.color1 = colorSchemes[0].colors;
- }
- const traces = uniqueColors.map((color, idx) => {
- const colorData = this.chartData.data[0].color.map((c) =>
- c === color ? 1 : 0
- );
- const trace = {
- x: this.chartData.data[0].xData.filter((_, i) => colorData[i] === 1),
- y: this.chartData.data[0].yData.filter((_, i) => colorData[i] === 1),
- z: this.chartData.data[0].zData.filter((_, i) => colorData[i] === 1),
- mode: this.chartType === "scatter" ? "markers" : "lines", // 根据选择的图表类型来设置模式
- type: "scatter3d",
- marker: {
- size: this.pointSize, // 使用动态点大小
- color: this.color1[idx], // 使用配色方案
- colorscale: "YlGnBu",
- },
- name: ` ${color}`,
- legendgroup: `group-${idx}`,
- hovertemplate:
- `${this.chartData.xaixs}:` +
- ` %{x} <br> ` +
- `${this.chartData.yaixs}:` +
- "%{y} <br>" +
- `${this.chartData.zaixs}:` +
- "%{z} <br>",
- };
- return trace;
- });
- const layout = {
- title: this.chartData.data[0].title,
- scene: {
- 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,
- },
- zaxis: {
- title: this.chartData.zaixs,
- gridcolor: "rgb(255,255,255)",
- tickcolor: "rgb(255,255,255)",
- backgroundcolor: "#e5ecf6",
- showbackground: true,
- },
- // aspectratio: {
- // x: 1,
- // y: 3,
- // z: 1,
- // },
- plot_bgcolor: "#e5ecf6",
- gridcolor: "#fff",
- // camera: {
- // center: { x: 0, y: 0, z: 0 },
- // eye: { x: 0, y: 0, z: 2.5 },
- // up: { x: 0, y: 0, z: 1 },
- // },
- },
- margin: { t: 50, b: 50, l: 50, r: 50 },
- staticPlot: false,
- showlegend: true,
- legend: {
- marker: {
- size: 10, // 图例中点的大小
- },
- },
- };
- Plotly.newPlot(`plotly-3d-chart-` + this.index, traces, layout);
- },
- },
- };
- </script>
- <style scoped>
- /* 样式可以根据需求自定义 */
- #plotly-3d-chart {
- width: 100%;
- height: 500px;
- }
- ::v-deep canvas {
- /* height: 400px !important; */
- }
- </style>
|