performance-test/src/views/health/components/timedomaincharts.vue

<template>
  <div>
    <div class="FD">
      <div v-if="TZshow" class="eigenvalue">
        <h5>特征值</h5>
        <p>有效值：{{ this.timeList.Xrms }}</p>
        <p>平均值：{{ this.timeList.mean_value }}</p>
        <p>最大值：{{ this.timeList.max_value }}</p>
        <p>最小值：{{ this.timeList.min_value }}</p>
        <p>峰值：{{ this.timeList.Xp }}</p>
        <p>峰峰值：{{ this.timeList.Xpp }}</p>
        <p>波形因子：{{ this.timeList.Sf }}</p>
        <p>脉冲指标：{{ this.timeList.If }}</p>
        <p>裕度指标：{{ this.timeList.Ce }}</p>
        <p>偏度指标：{{ this.timeList.Cw }}</p>
        <p>峭度指标：{{ this.timeList.Cq }}</p>
      </div>
    </div>
    <!-- ECharts 图表容器 -->

    <div class="line-chart" ref="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"; // 导入 echarts 库

export default {
  name: "TimedomainCharts", // 组件名称
  props: {
    currentIndex: {
      type: Number,
      default: 0,
    },
    timeList: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      chartInstance: null,
      option: null,
      TZshow: false,
    };
  },
  watch: {
    // 监听 chartData 和 chartLabels 的变化，重新绘制图表
    chartData(newData) {
      this.updateChart(newData, this.chartLabels);
    },
    chartLabels(newLabels) {
      this.updateChart(this.chartData, newLabels);
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.initializeChart();
    });
  },
  methods: {
    initializeChart() {
      // 获取图表容器
      const chartDom = this.$refs.chart;
      // 初始化图表实例
      this.chartInstance = echarts.init(chartDom);

      // 默认图表数据和配置
      const defaultData = this.timeList.y;
      const defaultLabels = this.timeList.x;
      this.updateChart(defaultData, defaultLabels);
    },
    // 更新图表数据
    updateChart(data, labels) {
      const option = {
        title: {
          text: this.timeList.title,
          left: "center",
        },
        toolbox: {
          feature: {
            dataZoom: { yAxisIndex: "none" },
            restore: {},
            saveAsImage: {},
            myCustomTool: {
              show: true,
              title: "上一条",
              icon: `image://${require("@/assets/analyse/08.png")}`,
              onclick: () => this.previousRow(),
            },
            myCustomTool2: {
              show: true,
              title: "下一条",
              icon: `image://${require("@/assets/analyse/09.png")}`,
              onclick: () => this.nextRow(),
            },
            myCustomTool3: {
              show: true,
              title: "特征值",
              icon: `image://${require("@/assets/analyse/10.png")}`,
              onclick: () => this.Show(),
            },
          },
        },
        xAxis: {
          type: "category",
          name: this.timeList.xaxis, // 设置X轴标题
          nameLocation: "center", // 标题位置：可选 "start" | "center" | "end"
          nameTextStyle: {
            fontSize: 14,
            color: "#333", // 标题颜色
            padding: [10, 0, 0, 0], // 上、右、下、左的间距
          },
          data: labels, // 横坐标数据
          boundaryGap: false, // 坐标轴是否留白
          position: "bottom", // 确保X轴在底部
        },

        yAxis: {
          type: "value",
          name: this.timeList.yaxis,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line", // 显示十字线
          },
        },
        series: [
          {
            name: "数据系列",
            type: "line", // 折线图
            data: data, // 数据
            symbol: "none", // 数据点的样式
            symbolSize: 8, // 数据点的大小
            lineStyle: {
              color: "rgb(75, 192, 192)", // 折线颜色
              width: 2, // 线条宽度
            },
            itemStyle: {
              color: "rgb(75, 192, 192)", // 数据点颜色
              borderColor: "#fff",
              borderWidth: 2,
            },
          },
        ],
      };

      // 使用更新的配置更新图表
      this.chartInstance.setOption(option);
    },

    previousRow() {
   
    },

    nextRow() {
     
    },
 

    Show() {
      this.TZshow = !this.TZshow;
    },
  },
};
</script>

<style lang="scss" scoped>
.line-chart {
  width: 100%;
  height: 250px;
}
.FD {
  width: 100%;
  height: 1px;
  position: relative;
}

.eigenvalue {
  position: absolute;
  top: 30px;
  right: 0;
  font-size: 10px;
  width: 100px;
  border: 1px solid black;
  padding: 5px;
  background: #fff;
  z-index: 99;
  h5 {
    line-height: 16px;
    height: 16px;
  }
}
</style>