Merge remote-tracking branch 'origin/master'

fuliqi

2024-03-07 1046f687b35cdcdbafab6e0bbb17cbb3d1982a8b

 src/views/home/data-chart/index.vue

New file
@@ -0,0 +1,219 @@
<template>
  <div class="data-chart-container">
    <el-card class="data-card" :body-style="{ height: '100%' }">
      <div class="card-content">
        <div class="title-container">
          <h1>运维监控报表</h1>
          <div class="select-container">
            <el-select v-model="company" placeholder="请选择运维公司" @change="companyChange">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="date-container">
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <div class="chart-container">
          <div id="chartContent" ref="chartContent"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts';
let lineChart = null;
let observer = null;
export default {
  name: 'DataChart',
  data() {
    return {
      dateRange: '',
      company: '',
      options: [
        { label: 'XX运维公司1', value: 'XX运维公司1' },
        { label: 'XX运维公司2', value: 'XX运维公司2' },
        { label: 'XX运维公司3', value: 'XX运维公司3' },
        { label: 'XX运维公司4', value: 'XX运维公司4' },
      ],
      dataList: [
        {
          name: 'XX运维公司1',
          state: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          state2: { '1月': 123, '2月': 213, '3月': 1412, '4月': 23, '5月': 123 }
        },
        {
          name: 'XX运维公司2',
          state: { '1月': 213, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          state2: { '1月': 123, '2月': 123, '3月': 1412, '4月': 23, '5月': 123 }
        },
        {
          name: 'XX运维公司3',
          state: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211, '6月': 1321 },
          state2: { '1月': 123, '2月': 213, '3月': 123, '4月': 23, '5月': 123 }
        },
        {
          name: 'XX运维公司4',
          state: { '1月': 1000, '2月': 2131, '3月': 1233, '4月': 2132, '5月': 3211 },
          state2: { '1月': 123, '2月': 613, '3月': 1412, '4月': 2336, '5月': 123 }
        },
        {
          name: 'XX运维公司5',
          state: { '1月': 1000, '2月': 433, '3月': 1233, '4月': 2132, '5月': 8886 },
          state2: { '1月': 123, '2月': 213, '3月': 1412, '4月': 23, '5月': 123 }
        },
      ],
    }
  },
  methods: {
    initChart() {
      const option = {
        legend: {
          right: '2%',
          top: '5%',
          icon: 'rect',
          data: [
            {

              name: '正常数',
              itemStyle: {
                color: 'rgba(62, 144, 247, 1)'
              }
            },
            {
              name: '异常数',
              itemStyle: {
                color: 'rgba(85, 192, 191, 1)'
              }
            },
          ],
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: '20%',
          containLabel: true
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: Object.keys(this.acitveData.state),
        },
        yAxis: {},
        series: [
          {
            name: '正常数',
            data: Object.entries(this.acitveData.state).map(([key, value]) => value),
            type: 'line',
            itemStyle: {
              color: 'rgba(62, 144, 247, 1)'
            }
          },
          {
            name: '异常数',
            data: Object.entries(this.acitveData.state2).map(([key, value]) => value),
            type: 'line',
            itemStyle: {
              color: 'rgba(85, 192, 191, 1)'
            }
          }
        ]
      };
      lineChart.setOption(option, true);
    },


    companyChange() {
      this.acitveData = this.dataList.find((item) => {
        return item.name === this.company;
      });
      if (this.acitveData) {
        this.initChart();
      }
    },

    // 监听变化
    observe() {
      if (!observer) {
        observer = new ResizeObserver(entries => {
          this.handleResize();
        })
      }
      observer.observe(this.$refs.chartContent);
    },
    // 窗口变换
    handleResize() {
      if (lineChart) {
        lineChart.resize();
      }
    }

  },
  mounted() {
    this.acitveData = this.dataList[0];
    this.company = this.acitveData.name;
    lineChart = echarts.init(this.$refs.chartContent);
    this.initChart();
    this.observe();
  },
  beforeDestroy() {
    if (lineChart) {
      lineChart.dispose();
      observer.unobserve(this.$refs.chartContent);
    }
  },
}
</script>

<style lang="scss" scoped>
.data-chart-container {
  height: 400px;
  margin-bottom: 20px;

  .data-card {
    height: 100%;

    .card-content {
      width: 100%;
      height: 100%;
      position: relative;
    }
  }
}

.title-container {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;


  .more-button {
    cursor: pointer;
    font-size: 16px;
    padding: 0 10px;
  }
}

.chart-container {

  width: 100%;
  height: 100%;

  #chartContent {
    width: 100%;
    height: 100%;
  }
}

.select-container {
  margin: 0 20px;
  width: 180px;
}
</style>