duoji-frontend/src/views/3DPointCloud/pointCloud.vue

<template>
    <div
        style="width: 1000px;height:800px;"
        class="echar"
        ref="charts"
        id="main"
    ></div>
</template>

<script>
import * as echarts from "echarts/core";
import { DatasetComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import { Scatter3DChart } from "echarts-gl/charts";
import { Grid3DComponent } from "echarts-gl/components";

echarts.use([
    DatasetComponent,
    Grid3DComponent,
    Scatter3DChart,
    CanvasRenderer,
]);
export default {
    props: ["src"],
    name: "pointCloud",
    watch: {
        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
        src: function (newVal) {
            console.log(newVal);
            this.srcPath = newVal; //newVal即是visible
            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
        },
    },
    data() {
        return {
            dat: [],
            option: {},
            myChart: {},
            srcPath: "",
        };
    },
    methods: {
        getData(myChart, option) {
            let file_url = this.src;
            console.log(file_url);
            let xhr = new XMLHttpRequest();
            xhr.open("get", file_url, true);
            xhr.onload = function () {
                if (xhr.status == 200) {
                    // if (callback) {
                    // callback();
                    console.log(xhr.response);
                    var lines = xhr.response.split("\r\n").slice(12);
                    console.log(lines);
                    // 将每行以空格作为分隔符形成二维数组
                    var dataArray = lines.map(function (line) {
                        console.log();
                        var arry = line.trim()
                            .split(" ")
                            .map(function (value) {
                                return 1 * parseFloat(value);
                            });
                        if(arry[2]>3000){
                            console.log(arry);
                            return "";
                        }
                        if(arry[1]>1000 || arry[1]<-1000){
                            console.log(arry);
                            return "";
                        }
                        if(arry[0]>1000 ||arry[0]<-500){
                            console.log(arry);
                            return "";
                        }
                        arry[2] = arry[2]-1000;
                        return arry;
                    }).filter(item => item !== "");
                    option.dataset.source = dataArray;
                    console.log(option);
                    myChart.setOption(option);
                }
            };
            xhr.send();
            // 读取文件内容
        },
        myEcharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main"));

// x 轴的最小值和最大值
let minX = Math.min(...data.map(item => item[0]));
let maxX = Math.max(...data.map(item => item[0]));

// 定义颜色渐变范围
let colorMin = '#61dfff '; // 最小值的颜色
let colorMax = '#366fff'; // 最大值的颜色
            var symbolSize = 1.5;
            var option = {
                grid3D: {
                    viewControl: {
                        beta: -90,
                        alpha: 15,
                        distance: 75,
                    },
                },
                xAxis3D: {
                    min: 0,
                    max: 2000,
                },
                yAxis3D: {
                    min: -1000,
                    max: 1000,
                },
                zAxis3D: {
                    min: -1000,
                    max: 1000,
                },
                dataset: {
                    dimensions: ["z", "y", "x"],
                    source: this.dat,
                },
                series: [

                    {
                        itemStyle: {
    color: function (params) {
      // 计算当前点在 x 轴上的位置比例
      let ratio = (params.data[0] - minX) / (maxX - minX);
      // 根据比例计算对应的颜色
      let color = echarts.color.gradient(colorMin, colorMax)(ratio);

      return color;
    }
  },
                        type: "scatter3D",
                        symbolSize: symbolSize,
                        encode: {
                            x: "x",
                            y: "y",
                            z: "z",
                        },
                    },
                ],
            };

            this.getData(myChart, option);
        },
    },
    mounted() {
        this.myEcharts();
    },
};
</script>