折线图完善布局

zhangshuaibao

2021-03-31 588438a8f2efcb5faabef6a034f0df2148436d5b

折线图完善布局

 src/assets/css/map/map-panel-style.less

@@ -191,3 +191,14 @@
.popper__arrow {
  display: none !important;
}

.el-tabs--card>.el-tabs__header .el-tabs__nav{
  border: none;
}

.el-tabs--card>.el-tabs__header .el-tabs__item{
  border: none;
  margin-left: 10px;
}



 src/components/BaseNav/PublicBounced/GasComponents/EchartsTab.vue

@@ -1,23 +1,15 @@
<template>
  <!-- 框 -->
  <div class="win">
    <div class="main">
      <div class="main-matter">
        <el-row type="flex" class="row-bg row-item-one" justify="space-around">
          <el-col :span="12">氮氧化物:{{ displayContent.Name }} 标准: 100</el-col>
          <el-col :span="12">二氧化硫:{{ displayContent.DeptSname }} 标准: 50</el-col>
          <el-col :span="12">烟尘:{{ displayContent.EmissTypeName }} 标准: 30</el-col>
          <el-col :span="12">废气流量:{{ displayContent.EmissTypeName }}</el-col>
        </el-row>
      </div>
    </div>
  </div>
        <div class="Infomation">
            <el-tag>氮氧化物: 29.93 标准: 100</el-tag>
            <el-tag>二氧化硫: 17.34标准: 50</el-tag>
            <el-tag>烟尘: 6.93标准: 30</el-tag>
            <el-tag>废气流量: 120343.18</el-tag>
        </div>
</template>

<script>
export default {
  name: 'EchartsTab',
  props: ['displayContent'],
  data () {
    return {}
  }
@@ -25,40 +17,16 @@
</script>

<style scoped lang="less">

.win {
  position: relative;
  margin-bottom: 13px;
  background-color: rgba(33, 41, 69,0.9);
}
.main {
  width: 100%;
  height: 100%;
  .main-matter{
    font-size: 13px;
    font-weight: normal;
    border: 1px solid #396d83;
    .row-item-one{
      margin-bottom: 7px;
    .Infomation{
        margin-left: 10px;
    }
    .el-row {
      width: 100%;
      color: #00d0f9;
      display: flex;
      font-size: 12px !important;
      .el-col{
        flex: 1;
        width: 100%;
        background-color: #243a55;;
        text-align: center;
        line-height: 28px;
        margin-left: 6px;
        border-radius: 4px;
        &:nth-child(1){
          margin-left:0;
        }
      }
    .el-tag{
        height: 25px;
        line-height: 25px;
        margin-right: 10px;
        font-size: 10px;
        background-color: rgba(0, 255, 246, 0.14);
        color: #00d0f9;
        border: none;
    }
  }
}
</style>

 src/components/BaseNav/PublicBounced/GasComponents/GasECharts.vue

@@ -1,7 +1,6 @@
<template>
    <div class="main">
        <div id="echarts" ref="main"></div>
      </div>
        <div id="echarts" ref="main">
        </div>
</template>

<script>
@@ -25,7 +24,32 @@
          }
        },
        legend: {
          data: ['氮氧化物', '二氧化硫', '烟尘', '废气流量']
          x: '200px',
          y: '30px',
          data: [{
            name: '氮氧化物',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '二氧化硫',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '烟尘',
            textStyle: {
              color: '#00d0f9'
            }
          },
          {
            name: '废气流量',
            textStyle: {
              color: '#00d0f9'
            }
          }]
          // pageTextStyle: {
          //   color: '#fff'
          // }
@@ -34,7 +58,7 @@
          left: '3%',
          right: '1%',
          bottom: '3%',
          top: '10%',
          // top: '1%',
          containLabel: true
        },
        toolbox: {
@@ -92,6 +116,7 @@
        // Y 轴的设置
        yAxis: [{
          type: 'value',
          // position: 'left', // 多 Y 轴使用
          // name: yname, // 后期图标Y轴显示单位
          name: '浓度(mg/m³)',
          axisLabel: {
@@ -150,14 +175,14 @@
</script>

<style scoped lang="less">
    .main{
        background: rgba(255, 255, 255, 0.1);
    }
    #echarts{
        width: 600px;
        width: 670px;
        height: 260px;
        position: relative;
        margin: 0;
        padding: 0;
        /*background-color: rgba(0, 0, 0, 0.6);*/
            border: 1px solid #396d83;
            margin: 10px 10px 10px 10px;
    }
</style>

 src/components/BaseNav/PublicBounced/GasComponents/GasTabs.vue

@@ -1,22 +1,82 @@
<template>
<div>
  <el-tabs v-model="activeName">
    <el-tab-pane label="实试数据" name="first">实试数据</el-tab-pane>
    <el-tab-pane label="日数据" name="second">日数据</el-tab-pane>
    <el-tab-pane label="月数据" name="third">月数据</el-tab-pane>
    <el-tab-pane label="人工数据" name="fourth">人工数据</el-tab-pane>
  </el-tabs>
<!--  <EchartsTab></EchartsTab>-->
<!--  <GasECharts></GasECharts>>-->
</div>
    <div class="win">
        <div class="border_corner border_corner_left_top"></div>
        <div class="border_corner border_corner_right_top"></div>
        <div class="border_corner border_corner_left_bottom"></div>
        <div class="border_corner border_corner_right_bottom"></div>
        <el-tabs type="card" v-model="activeName">
            <el-tab-pane label="实试数据" name="first">
                <EchartsTab></EchartsTab>
                <GasECharts></GasECharts>
            </el-tab-pane>
            <el-tab-pane label="日数据" name="second"><EchartsTab></EchartsTab><GasECharts></GasECharts></el-tab-pane>
            <el-tab-pane label="月数据" name="third"><EchartsTab></EchartsTab><GasECharts></GasECharts></el-tab-pane>
            <el-tab-pane label="人工数据" name="fourth"><EchartsTab></EchartsTab><GasECharts></GasECharts></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import GasECharts from './GasECharts'
import EchartsTab from './EchartsTab'

export default {
  name: 'GasTabs'
  name: 'GasTabs',
  components: {
    GasECharts,
    EchartsTab
  },
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}

</script>

<style scoped>

    .win {
        position: relative;
        margin-bottom: 13px;
        background-color: rgba(33, 41, 69,0.9);
        border: 0.8px solid #396d83;
    }
    .border_corner{
        z-index: 999;
        position: absolute;
        width: 10px;
        height: 10px;
        background: rgba(0,0,0,0);
        border: 1.5px solid #47d5ea;
    }
    .border_corner_left_top{
        top: 0;
        left: 0;
        border-right: none;
        border-bottom: none;
    }
    .border_corner_right_top{
        top: 0;
        right: 0;
        border-left: none;
        border-bottom: none;
    }
    .border_corner_left_bottom{
        bottom: 0;
        left: 0;
        border-right: none;
        border-top: none;
    }
    .border_corner_right_bottom{
        bottom: 0;
        right: 0;
        border-left: none;
        border-top: none;
    }
</style>

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -8,10 +8,10 @@
      <div class="public-bounced-content-left">
        <GasTab :displayContent="displayContent"></GasTab>
<!--        <PublicTable v-if="value === 'gufei'" :requestSolidWasteData="displayContent.StoragePlaceId"></PublicTable>-->
        <GasECharts></GasECharts>
<!--        <GasTabs></GasTabs>-->
<!--        <GasECharts></GasECharts>-->
        <GasTabs></GasTabs>
        <!--        <PublicTable></PublicTable>-->
        <!--        <GasECharts></GasECharts>-->
<!--                <GasECharts></GasECharts>-->
      </div>
      <div class="public-bounced-content-right">
        <GasVideo></GasVideo>
@@ -25,17 +25,17 @@
import '@/components/BaseNav/SolidWaste/directive/dir'
import GasTab from '@components/BaseNav/PublicBounced/GasComponents/GasTab'
// import PublicTable from '@components/BaseNav/PublicBounced/GasComponents/PublicTable'
import GasECharts from '@components/BaseNav/PublicBounced/GasComponents/GasECharts'
// import GasECharts from '@components/BaseNav/PublicBounced/GasComponents/GasECharts'
import GasVideo from '@components/BaseNav/PublicBounced/GasComponents/GasVideo'
// import GasTabs from './GasComponents/GasTabs'
import GasTabs from './GasComponents/GasTabs'

export default {
  name: 'PublicBounced',
  components: {
    // GasTabs,
    GasTabs,
    GasTab,
    // PublicTable,
    GasECharts,
    // GasECharts,
    GasVideo
  },
  data () {