Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

zhangshuaibao

2021-04-01 bbf61cf01df2752311d2fedc7c539b4e69b297f2

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

@@ -1,21 +1,5 @@
<template>
  <!-- 框 -->
  <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>
    <div class="main">
      <div class="ShowEcharts">
        <div id="echarts" ref="main"></div>
        <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>
      </div>
    </div>
  </div>
    <div style="width:670px;height:260px;" id="echarts" ref="main"></div>
</template>

<script>
@@ -39,15 +23,41 @@
          }
        },
        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'
          // }
        },
        grid: {
          left: '3%',
          right: '3%',
          right: '1%',
          bottom: '3%',
          // top: '1%',
          containLabel: true
        },
        toolbox: {
@@ -105,6 +115,7 @@
        // Y 轴的设置
        yAxis: [{
          type: 'value',
          // position: 'left', // 多 Y 轴使用
          // name: yname, // 后期图标Y轴显示单位
          name: '浓度(mg/m³)',
          axisLabel: {
@@ -163,58 +174,13 @@
</script>

<style scoped lang="less">
    .win {
        /*width: 100%;*/
        /*height: 100%;*/
        position: relative;
        //display: inline-block;
        background-color: rgba(33, 41, 69,0.9);
    }
    .ShowEcharts{
        position: relative;
        border: 1px solid #0B89B5;
        background: #243a55;
        margin: 10px;
    }
    .border_corner{
        z-index: 2500;
        position: absolute;
        width: 14px;
        height: 14px;
        background: rgba(0,0,0,0);
        border: 2px 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-bottom-left-radius: 4px;
    }
    .border_corner_right_bottom{
        bottom: 0;
        right: 0;
        border-left: none;
        border-top: none;
    }
  #echarts{
      width: 600px;
      height: 260px;
    width: 670px!important;
    height: 260px!important;
    //position: relative;
    margin: 0;
    padding: 0;
    border: 1px solid #396d83;
    margin: 10px 10px 10px 10px;
  }
.main {
  width: 100%;
  height: 100%;
}
</style>