kgraph-ui/src/views/maintenance/offLineDataAnalysis/Datavis.vue

<template>
    <div ref="Datavis" :style="{ width: '100%', height: '360px' }"></div>
</template>

<script>
import * as echarts from 'echarts';
import Papa from 'papaparse';
import { listManagement, getManagement, delManagement, addManagement, updateManagement,runairtopre ,getfilecontent} from "@/api/aircraft/management";
import axios from "axios";
export default {
 props: {
    aircraftdataview: {
      type: Object,
    },
    filepath:null,
    dataOption:[],
    openDatavis: {
      type: Boolean,
    },
  },
  data() {
    return {
      display: false,
      Datavis: null,
      chartData: [], // 定义空数组用于保存CSV数据
    };
  },
  computed: {
    selectedIds() {
      return this.dataOption.map((item) => item.id);
    },
  },
 
  methods: {
createDatavis() {
      const xAxisData = Array.from({ length: this.chartData.length - 1 }, (_, i) => i + 1); // 生成从1到chartData行数-1的数组作为横坐标数据
      const option = {
        animationDuration: 3000,
        legend: {
          textStyle: {
            color: 'white',
          },
        },
        yAxis: {
          axisLabel: {
            color: 'white',
          },
          nameTextStyle: {
            color: 'white',
          },
        },
        series: [],
        xAxis: {
          data: xAxisData,
        },
      };

      const usedColors = []; // 用于存储已使用的颜色
      // 将每一列数据都添加到折线图中

      if(this.chartData.length >0 ){
        for (let i = 0; i < this.chartData[0].length; i++) {
                const columnId = i; // 列id就是i
                if (!this.selectedIds.includes(columnId)) { // 如果当前列的id不在selectedIds中，则跳过该列
                  continue;
                }

                const seriesData = this.chartData.slice(1).map((row) => parseFloat(row[columnId])); // 获取y轴数据，从第二行开始的第i列的数据
                let color;
                do {
                  color = this.getRandomColor(); // 随机生成颜色
                } while (usedColors.includes(color)); // 如果生成的颜色已经被使用过，则重新生成
                usedColors.push(color); // 将颜色添加到已使用的颜色数组中
                
                option.series.push({
                  name: this.dataOption.find((item) => item.id === columnId).label, // 使用对应列的名称作为折线的名称
                  data: seriesData,
                  type: 'line',
                  itemStyle: {
                    color: color, // 随机生成折线的颜色
                  },
                  animationEasing: 'linear',
                  animationDelay: (idx) => idx * 8,
                });
              }
      }
  

     

      this.Datavis.setOption(option);
    },
getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
},
  async getresponse(){
    const response = await axios.get(process.env.VUE_APP_BASE_API + this.filepath, { responseType: 'text' });
    const csvData = response.data;

    const rows = csvData.split('\n');
    this.chartData = rows.map(row => row.split(','));

     this.createDatavis()
  },
},
  mounted() {
    
    this.Datavis = echarts.init(this.$refs.Datavis);
    this.getresponse()
   
  },
  watch: {
  dataOption(newValue) {
    this.Datavis.dispose();
    this.Datavis = echarts.init(this.$refs.Datavis);
    this.createDatavis();
  }
},
  beforeUnmount() {
    if (this.Datavis) {
      this.Datavis.dispose();
      this.Datavis = null;
    }
  },
};
</script>