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,7 +53,11 @@
    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;
@@ -72,7 +92,7 @@
}
.line-chart {
  width: 318px;
  height: 140px;
  /* height: 140px; */
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.329); */
}
</style>