完成折线图相关功能的迁移

riku

2024-05-07 c4e9d054916c3f085329a67c7664b4c54f9137f9

 src/components/monitor/LineChart.vue

@@ -5,7 +5,10 @@
    </template>
    <template #footer>
      <!-- 单页数据量-->
      <SliderBar></SliderBar>
      <SliderBar
        @input="(e) => (progress = e)"
        @size-change="(e) => (pageSize = e)"
      ></SliderBar>
    </template>
  </BaseCard>
</template>
@@ -29,37 +32,38 @@
  },
  data() {
    return {
      lineChart: null,
      option: null
      allXAxis: [],
      allSeries: [],
      option: null,
      pageSize: 200,
      progress: 0
    };
  },
  watch: {
    factorDatas: {
      handler() {
        this.refreshChart();
        this.initData();
        this.changeChartRange();
      },
      deep: true
    },
    selectFactorType: {
      handler() {
        this.refreshChart();
      },
      deep: true
        this.changeChartSeries();
    }
  },
  computed: {
    /**
     * 获取横坐标
     */
    xAxis() {
      return this.factorDatas.times.map((v) => {
    progress() {
      this.changeChartRange();
    },
    pageSize() {
      this.changeChartRange();
    }
  },
  methods: {
    initData() {
      this.allXAxis = this.factorDatas.times.map((v) => {
        return v.split(' ')[1];
      });
    },
    /**
     * 获取监测数据纵坐标
     */
    allSeries() {
      const res = [];
      for (const key in this.factorDatas.factor) {
        if (Object.hasOwnProperty.call(this.factorDatas.factor, key)) {
@@ -68,6 +72,7 @@
            key: key,
            name: factorName[e.factorName],
            type: 'line',
            allData: e.datas.map((v) => v.factorData),
            data: e.datas.map((v) => v.factorData),
            showAllSymbol: true,
            animationDelay: function (idx) {
@@ -76,34 +81,62 @@
          });
        }
      }
      return res;
      this.allSeries = res;
    },
    showSeries() {
      return this.allSeries.filter((s) => {
    // 修改图表展示的折线图类型
    changeChartSeries() {
      this.option.series = this.getShowSeries();
      this.option.legend.data = this.getLegends(this.option.series);
      this.lineChart.setOption(this.option, { notMerge: true });
    },
    changeChartRange() {
      const { sIndex, eIndex, startPer, endPer } = this.getRange();
      const showSeries = this.getShowSeries(sIndex, eIndex);
      const xAxis = this.getShowXAxis(sIndex, eIndex);
      const legends = this.getLegends(showSeries);
      if (!this.option) {
        this.option = factorLineOption(xAxis, showSeries, legends);
      } else {
        this.option.xAxis.data = xAxis;
        this.option.series = showSeries;
        this.option.legend.data = legends;
      }
      // this.option.dataZoom[0].start = startPer;
      // this.option.dataZoom[0].end = endPer;
      this.lineChart.setOption(this.option);
    },
    getShowXAxis(sIndex, eIndex) {
      return this.allXAxis.slice(sIndex, eIndex);
    },
    getShowSeries(sIndex, eIndex) {
      const res = this.allSeries.filter((s) => {
        if (sIndex && eIndex) {
          s.data = s.allData.slice(sIndex, eIndex);
        }
        return this.selectFactorType.includes(s.key);
      });
      return res;
    },
    legends() {
      return this.showSeries.map((s) => {
    getRange() {
      let len = this.allXAxis.length - this.pageSize;
      len = len < 0 ? 0 : len;
      const sIndex = Math.round((len * this.progress) / 100);
      const eIndex = sIndex + this.pageSize;
      const startPer = (sIndex / this.allXAxis.length) * 100;
      const endPer = (eIndex / this.allXAxis.length) * 100;
      return { sIndex, eIndex, startPer, endPer };
    },
    getLegends(series) {
      return series.map((s) => {
        return s.name;
      });
    }
  },
  methods: {
    initChart() {
      this.lineChart = echarts.init(this.$refs.lineChart);
    },
    refreshChart() {
      const option = factorLineOption(
        this.xAxis,
        this.showSeries,
        this.legends
      );
      this.lineChart.setOption(option, { notMerge: true });
    }
  beforeUnmount() {
    // this.$refs.lineChart && this.$refs.lineChart.clear();
  },
  mounted() {
    this.initChart();
    this.lineChart = echarts.init(this.$refs.lineChart);
  }
};
</script>