FlowActuarial/ruoyi-ui/src/views/analysis/water-time/chart.vue

<template>
  <div ref="chart" class="chart" :style="{height: '400px', width: '100%'}" />
</template>

<script>
import { listWaterLevel } from '@/api/analysis/achievement'
import * as echarts from "echarts";
require('echarts/theme/macarons') // echarts theme
import resize from '@/utils/resize'

export default {
  mixins: [resize],
  props: {
    queryParams: Object,
  },
  data() {
    return {
      pagination: {
        page: 1,
        size: 10000,
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.chart = echarts.init(this.$refs.chart, 'macarons');
      this.setOptions();
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    setOptions() {
      const { queryParams } = this;
      if (!queryParams.siteId) return;
      const params = {
        ...this.queryParams,
        ...this.pagination,
      };
      listWaterLevel(params).then((res) => {
        const chartData = res.data.records || [];
        chartData.reverse()
        const xAxisData = chartData.map(({ time }) => time);
        const seriesData = chartData.map(({ avgWaterlevel }) => avgWaterlevel);
        this.chart.setOption({
          xAxis: {
            name: '时间',
            boundaryGap: false,
            data: xAxisData,
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#54606C'
              }
            },
          },
          yAxis: [
            {
              name: '水位（m）',
              axisLine: {
                lineStyle: {
                  color: '#54606C'
                }
              },
              min: 'dataMin',
              max: 'dataMax',
            },
            {
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#FF8500'
                }
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
              },
            },
          ],
          grid: {
            left: 50,
            right: 50,
            bottom: 40,
            top: 40,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross'
            },
            padding: [5, 10]
          },
          series: [{
            name: '水位',
            itemStyle: {
              normal: {
                color: '#FF8500',
                lineStyle: {
                  color: '#FF8500',
                  width: 2
                }
              }
            },
            smooth: false,
            type: 'line',
            data: seriesData,
            animations: false,
          }]
        })
      })
    }
  },
  watch: {
    queryParams: {
      handler() {
        this.setOptions();
      },
      deep: true,
    },
  }
}
</script>

<style scoped>

</style>