fix:监测因子趋势相关性对比echarts样式修改

quanyawei

2023-09-19 19084af0e992b8ae20a8abe1c338f06edfd55eb0

 src/views/contrast/index.vue

@@ -1,22 +1,9 @@
+<template>
<template>
  <div style="width: 100%; height: 100%; margin:0 auto">
    <div class="topSelect">
      <el-cascader
        v-model="newMac"
        :options="options"
        clearable
        placeholder="选择设备"
        style="width: 354px"
      />
      <el-cascader
        v-model="value"
        :options="newSensor"
        :props="props"
        collapse-tags
        clearable
        placeholder="选择因子"
        style="margin-left: 20px"
      />
      <el-cascader v-model="newMac" :options="options" clearable placeholder="选择设备" style="width: 354px" />
      <el-cascader v-model="value" :options="newSensor" :props="props" collapse-tags clearable placeholder="选择因子"
        style="margin-left: 20px" />
      <!-- <el-select v-model="value" placeholder="选择因子">
        <el-option
          v-for="item in newSensor"
@@ -31,25 +18,12 @@
      <!-- <el-radio-button label="年报" />
        <el-radio-button label="自定义" /> -->
      <!-- </el-radio-group>  -->
      <el-select
        v-model="radio1"
        placeholder="请选择"
        style="margin-left: 20px"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
      <el-select v-model="radio1" placeholder="请选择" style="margin-left: 20px">
        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <component
        :is="dataType"
        class="select11"
        style="padding-left: 0; margin-left: 20px; width: 160px"
        @sendPickerChild="showPickerChild"
      />
      <component :is="dataType" class="select11" style="padding-left: 0; margin-left: 20px; width: 160px"
        @sendPickerChild="showPickerChild" />
      <!--查询按钮-->
      <el-button @click="selectData" class="btn1">查询</el-button>
    </div>
@@ -57,7 +31,7 @@
      <div style="position:absolute">(单位:ug/m³)</div>
      <div style="text-align: center;width: 100%;">{{ newData }}·{{ newMac?newMac[0]:'' }}·{{ newMac?newMac[newMac.length - 1][0]:'' }}·{{ value |sensorFilter }}·趋势图</div>
    </div> -->
    <LineChart :chart-data="lineChartData"  style="height: 40rem;"/>
    <LineChart :chart-data="lineChartData" style="height: 40rem;" />
  </div>
</template>

@@ -197,14 +171,14 @@
    this.getData()
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  mounted() { },
  beforeCreate() { }, // 生命周期 - 创建之前
  beforeMount() { }, // 生命周期 - 挂载之前
  beforeUpdate() { }, // 生命周期 - 更新之前
  updated() { }, // 生命周期 - 更新之后
  beforeDestroy() { }, // 生命周期 - 销毁之前
  destroyed() { }, // 生命周期 - 销毁完成
  activated() { },
  // 方法集合
  methods: {
    // 请求左侧设备数据
@@ -274,7 +248,7 @@
        series: [],
        xAxis: [],
        title: [],
        yAxis:[]
        yAxis: []
      }
      this.newXData = []
      this.$request({
@@ -300,12 +274,15 @@
            newLineChartData.xAxis.push(data[0].timeValueList[i].time)
          }
          for (var i = 0; i < data.length; i++) {
            newLineChartData.series.push({ data: [], name: '', type: 'line' ,yAxisIndex:data[i].code,lineStyle:{width:4}})
            newLineChartData.series.push({
              data: [], name: '', type: 'line', triggerLineEvent: true,
              emphasis: { focus: 'series' }, lineStyle: { width: 4 }
            })
            // newLineChartData.yAxis.push({})
            newLineChartData.series[i].name = data[i].name
            newLineChartData.title.push(data[i].name);
            for (var j = 0; j < data[i].timeValueList.length; j++) {
             newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
              newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
            }
          }
          this.lineChartData = newLineChartData
@@ -502,28 +479,34 @@
  display: flex;
  margin-bottom: 20px;
  padding: 20px 15px 0 15px;

  span:first-child {
    flex: 1;
  }

  div:last-child {
    width: 300px;
    line-height: 40px;
    padding-left: 6px;
  }
}

.topTitle {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 15px;
}

.btn1 {
  margin-left: 1%;
  height: 40px;
}

.select11 {
  width: 20% !important;
}

/deep/.el-date-editor .el-range-separator {
  width: 11%;
}