feat:图表选择过滤

ZhangXianQiang

2024-03-06 508ef83704ee188413d5606b30c6504fd2ca7d6c

feat:图表选择过滤

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

@@ -5,7 +5,7 @@
        <div class="title-container">
          <h1>运维监控报表</h1>
          <div class="select-container">
            <el-select v-model="company" placeholder="请选择运维公司">
            <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>
@@ -43,6 +43,26 @@
        {
          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 }
        },
      ],
@@ -106,6 +126,21 @@
      lineChart.setOption(option, true);
    },


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

    // 过滤
    filterData() {

    },
    // 窗口变换
    handleResize() {
      if (lineChart) {
        lineChart.resize()
@@ -115,6 +150,7 @@
  },
  mounted() {
    this.acitveData = this.dataList[0];
    this.company = this.acitveData.name;
    lineChart = echarts.init(this.$refs.chartContent);
    this.initChart();
    window.addEventListener('resize', this.handleResize)