2025.7.18 动态溯源-测试版本

riku

2025-07-18 306ef09707d6bcf9ffa67de55f86ab6f4362deee

 src/components/chart/RealTimeLineChart.vue

@@ -1,11 +1,15 @@
<template>
  <div class="chart-wrap">
    <div ref="lineChart" class="line-chart"></div>
    <div
      ref="lineChart"
      class="line-chart"
      :style="'height:' + chartHeight + ';'"
    ></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { smallLineOption } from '@/utils/chart/chart-option';
import { smallLineOption, baseVisualMap } from '@/utils/chart/chart-option';

export default {
  props: {
@@ -17,7 +21,19 @@
      //     series: []
      //   };
      // }
    }
    },
    // 折线图展示高度
    chartHeight: {
      type: String,
      default: '140px'
    },
    // 折线图Y轴刻度间距
    yMinInterval: {
      type: Number,
      default: 1
    },
    // 异常数据索引范围集合，[[i1,i2], [i3,i4],...]
    exceptionIndexArr: Array
  },
  data() {
    return {
@@ -37,13 +53,18 @@
    refreshChart() {
      const { xAxis, series } = this.modelValue;
      if (!this.option) {
        this.option = smallLineOption(xAxis, series);
        this.option = smallLineOption(xAxis, series, this.yMinInterval);
        if (this.exceptionIndexArr) {
          const visualMap = baseVisualMap(this.exceptionIndexArr);
          this.option.visualMap = visualMap;
        }
      } else {
        this.option.xAxis[0].data = xAxis;
        this.option.series = series;
      }
      if (this.lineChart) {
        this.lineChart.setOption(this.option, { notMerge: true });
        // console.log('折线图生成：立即');
      } else {
        this.onChartCreated = () => {
          this.lineChart.setOption(this.option, { notMerge: true });
@@ -53,9 +74,13 @@
  },
  mounted() {
    this.lineChart = echarts.init(this.$refs.lineChart);
    if (typeof this.onChartCreated === 'function') {
      this.onChartCreated();
    }
    this.onChartCreated();
    // setTimeout(() => {
    //   if (typeof this.onChartCreated === 'function') {
    //     this.onChartCreated();
    //     // console.log('折线图生成：滞后');
    //   }
    // }, 500);
  }
};
</script>
@@ -66,8 +91,8 @@
  justify-content: center;
}
.line-chart {
  width: 300px;
  height: 140px;
  width: 318px;
  /* height: 140px; */
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.329); */
}
</style>