图表部分修改

chenzeping

2021-04-20 86a3bf670a40559a8e72021925435492667f40d0

 src/components/BaseNav/PublicBounced/common/echarts/EChartsDate.vue

@@ -1,51 +1,51 @@
<!--  日数据  -->
<template>
  <div id="Tab">
<public-data-standard :dataStandard = "dataStandard"></public-data-standard>
    <public-data-standard :dataStandard="dataStandard"></public-data-standard>
    <div class="form-echrts">
      <div class="from-search">
        <div class="pickerMon">
          <div class="pickerData">
            <span> 开始时间:</span>
            <span class="pickerTable">
              <el-date-picker  type="datetime"   v-model="formInline.timeStart"></el-date-picker>
              <el-date-picker type="datetime" v-model="formInline.timeStart"></el-date-picker>
            </span>
          </div>
          <div class="pickerData">
            <span >结束时间:</span>
            <span>结束时间:</span>
            <span class="pickerTable">
              <el-date-picker type="datetime"  v-model="formInline.timeEnd"></el-date-picker>
              <el-date-picker type="datetime" v-model="formInline.timeEnd"></el-date-picker>
            </span>
          </div>
        </div>
<!--        <div>-->
<!--          采样点数:-->
<!--          <el-select v-model="formInline.region" placeholder="50">-->
<!--            <el-option label="0" value="0"></el-option>-->
<!--            <el-option label="25" value="25"></el-option>-->
<!--            <el-option label="50" value="50"></el-option>-->
<!--            <el-option label="75" value="75"></el-option>-->
<!--            <el-option label="100" value="100"></el-option>-->
<!--          </el-select>-->
<!--        </div>-->
        <div class="detailbtn hover-bottom"  @click="onSubmit">查询</div>
        <div class="detailbtn hover-bottom" @click="dialogVisible = true" >明细表</div>
        <!--        <div>-->
        <!--          采样点数:-->
        <!--          <el-select v-model="formInline.region" placeholder="50">-->
        <!--            <el-option label="0" value="0"></el-option>-->
        <!--            <el-option label="25" value="25"></el-option>-->
        <!--            <el-option label="50" value="50"></el-option>-->
        <!--            <el-option label="75" value="75"></el-option>-->
        <!--            <el-option label="100" value="100"></el-option>-->
        <!--          </el-select>-->
        <!--        </div>-->
        <div class="detailbtn hover-bottom" @click="onSubmit">查询</div>
        <div class="detailbtn hover-bottom" @click="dialogVisible = true">明细表</div>
      </div>
      <div style="width:5rem;height:1.5rem;" id="echarts" ref="main">
      </div>
    </div>
<!--    &lt;!&ndash; 明细弹框 &ndash;&gt;-->
<!--    <el-dialog :visible.sync="dialogVisible"-->
<!--               :append-to-body="true"-->
<!--               :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"-->
<!--               width="68%"-->
<!--               center-->
<!--               v-dialogDrag-->
<!--    >-->
<!--      <div class="el-dialog-div" style="height: 500px">-->
<!--        <public-detailed-list v-bind="$attrs"></public-detailed-list>-->
<!--      </div>-->
<!--    </el-dialog>-->
    <!--    &lt;!&ndash; 明细弹框 &ndash;&gt;-->
    <!--    <el-dialog :visible.sync="dialogVisible"-->
    <!--               :append-to-body="true"-->
    <!--               :title="this.$attrs.value==='feiqi'?this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName:this.$attrs.getWasteWaterMonitoringDetails[0].OnLineMonEmissPointName"-->
    <!--               width="68%"-->
    <!--               center-->
    <!--               v-dialogDrag-->
    <!--    >-->
    <!--      <div class="el-dialog-div" style="height: 500px">-->
    <!--        <public-detailed-list v-bind="$attrs"></public-detailed-list>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
  </div>
</template>

@@ -74,20 +74,44 @@
      },
      info: this.series,
      dataStandard: [{
        current: { name: '氮氧化物1', val: 29.93 },
        standard: { name: '标准', val: 100 }
        current: {
          name: '氮氧化物1',
          val: 29.93
        },
        standard: {
          name: '标准',
          val: 100
        }
      },
      {
        current: { name: '二氧化硫', val: 17.34 },
        standard: { name: '标准', val: 50 }
        current: {
          name: '二氧化硫',
          val: 17.34
        },
        standard: {
          name: '标准',
          val: 50
        }
      },
      {
        current: { name: '烟尘', val: 6.93 },
        standard: { name: '标准', val: 30 }
        current: {
          name: '烟尘',
          val: 6.93
        },
        standard: {
          name: '标准',
          val: 30
        }
      },
      {
        current: { name: '废气流量', val: 120343.18 },
        standard: { name: '', val: null }
        current: {
          name: '废气流量',
          val: 120343.18
        },
        standard: {
          name: '',
          val: null
        }
      }
      ],
      JsonDayCharts: {
@@ -136,8 +160,20 @@
        ],
        xdata: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'],
        ydatas: [
          { name: '氮氧化物', data: ['40.01', '44.38', '44.71', '40.43', '42.79', '46.00', '52.66', '48.75', '45.75', '49.24', '54.22', '52.25', '53.34', '65.72', '60.01', '54.20', '48.37', '45.56', '42.58', '40.96', '45.14', '49.31', '54.21', '57.89', '51.18', '60.21', '57.76', '60.33', '48.34', '45.66', '53.38'], zdcbcolor: 'red', zxcolor: '#00B0F0', bzz: 100 },
          { name: '二氧化硫', data: ['9.22', '8.07', '8.69', '9.16', '6.25', '5.78', '15.91', '3232992.75', '11.34', '13.63', '14.13', '11.47', '8.48', '9.46', '7.85', '5.91', '4.64', '4.77', '6.99', '5.82', '5.59', '5.30', '6.62', '9.00', '13.35', '2.68', '1.89', '0.70', '3.68', '6.25', '5.14'], zdcbcolor: 'red', zxcolor: '#fff21c', bzz: 50 },
          {
            name: '氮氧化物',
            data: ['40.01', '44.38', '44.71', '40.43', '42.79', '46.00', '52.66', '48.75', '45.75', '49.24', '54.22', '52.25', '53.34', '65.72', '60.01', '54.20', '48.37', '45.56', '42.58', '40.96', '45.14', '49.31', '54.21', '57.89', '51.18', '60.21', '57.76', '60.33', '48.34', '45.66', '53.38'],
            zdcbcolor: 'red',
            zxcolor: '#00B0F0',
            bzz: 100
          },
          {
            name: '二氧化硫',
            data: ['9.22', '8.07', '8.69', '9.16', '6.25', '5.78', '15.91', '3232992.75', '11.34', '13.63', '14.13', '11.47', '8.48', '9.46', '7.85', '5.91', '4.64', '4.77', '6.99', '5.82', '5.59', '5.30', '6.62', '9.00', '13.35', '2.68', '1.89', '0.70', '3.68', '6.25', '5.14'],
            zdcbcolor: 'red',
            zxcolor: '#fff21c',
            bzz: 50
          },
          {
            name: '废气流量',
            data: ['2827518.25', '2763525.75', '2776435.50', '2742003.50', '2856001.75', '2890287.00', '2832898.25', '2803715.50', '2513925.75', '2753303.50', '2749836.00', '2786188.50', '2738838.00', '2733660.25', '2815521.25', '2830217.25', '2798918.00', '2803543.50', '2770175.25', '2823321.25', '2856329.25', '2801588.00', '2798103.50', '2766343.00', '2750489.50', '2697786.25', '2796775.50', '2808028.50', '2813561.75', '2757129.25', '2720755.50'],
@@ -145,7 +181,13 @@
            zxcolor: '#9ACD32',
            bzz: null
          },
          { name: '烟尘', data: ['3.88', '3.48', '3.85', '3.99', '3.99', '4.48', '3.96', '3.36', '2.79', '4.65', '4.70', '5.08', '4.55', '4.90', '4.43', '3.10', '2.64', '2.84', '2.63', '2.69', '2.56', '2.32', '2.51', '3.29', '3.40', '3.06', '2.94', '2.90', '2.80', '3.07', '4.55'], zdcbcolor: 'red', zxcolor: '#f48183', bzz: 30 }
          {
            name: '烟尘',
            data: ['3.88', '3.48', '3.85', '3.99', '3.99', '4.48', '3.96', '3.36', '2.79', '4.65', '4.70', '5.08', '4.55', '4.90', '4.43', '3.10', '2.64', '2.84', '2.63', '2.69', '2.56', '2.32', '2.51', '3.29', '3.40', '3.06', '2.94', '2.90', '2.80', '3.07', '4.55'],
            zdcbcolor: 'red',
            zxcolor: '#f48183',
            bzz: 30
          }
        ],
        yname: ' 浓度(mg/m³)',
        // id:'mychartDay',
@@ -213,17 +255,17 @@
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                //   var biaozhuiz
                //   for (var i = 0; i < exhbzzList.length; i++) {
                //     if (exhbzzList[i].name == c.seriesName) {
                //       biaozhuiz = exhbzzList[i].bzhui
                //     }
                //   }
                //   if (c.value > 999999999999) {
                //     return zdcbcolor
                //   } else {
                //     return '#33c95f'
                //   }
                  //   var biaozhuiz
                  //   for (var i = 0; i < exhbzzList.length; i++) {
                  //     if (exhbzzList[i].name == c.seriesName) {
                  //       biaozhuiz = exhbzzList[i].bzhui
                  //     }
                  //   }
                  //   if (c.value > 999999999999) {
                  //     return zdcbcolor
                  //   } else {
                  //     return '#33c95f'
                  //   }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
@@ -247,19 +289,19 @@
            itemStyle: {
              normal: {
                color: function (c) { // 根据value 显示不同的折点颜色
                //   var biaozhuiz
                //   for (var i = 0; i < exhbzzList.length; i++) {
                //     if (exhbzzList[i].name == c.seriesName) {
                //       biaozhuiz = exhbzzList[i].bzhui
                //     }
                //   }
                //   if (c.value > biaozhuiz) {
                //     return zdcbcolor
                //   } else if (c.value > biaozhuiz * 0.9) {
                //     return '#FFA500'
                //   } else {
                //     return '#33c95f'
                //   }
                  //   var biaozhuiz
                  //   for (var i = 0; i < exhbzzList.length; i++) {
                  //     if (exhbzzList[i].name == c.seriesName) {
                  //       biaozhuiz = exhbzzList[i].bzhui
                  //     }
                  //   }
                  //   if (c.value > biaozhuiz) {
                  //     return zdcbcolor
                  //   } else if (c.value > biaozhuiz * 0.9) {
                  //     return '#FFA500'
                  //   } else {
                  //     return '#33c95f'
                  //   }
                },
                lineStyle: { // 折线的颜色
                  color: ydatas[i].zxcolor,
@@ -501,15 +543,15 @@
      // })

      /**
   * 解决mychartDay.on('click',function(){...})事件重复触发的问题
   * Date: 20200720
   */
       * 解决mychartDay.on('click',function(){...})事件重复触发的问题
       * Date: 20200720
       */
      this.mychartDay.off('click')

      /**
   *  图标点击事件
   *  20190426 add
   * */
       *  图标点击事件
       *  20190426 add
       * */
      // this.mychartDay.on('click', function (params) {
      //   // 获取当前时间，小时
      //   var nowHours = new Date().Format('hh')
@@ -707,73 +749,89 @@
</script>

<style scoped lang="less">
    .form-echrts {
        width: 100%;
        border-top: 1px solid #396d83;
        //margin: 10px 10px 10px 10px;
        .from-search{
          display: flex;
          padding:0.02rem;
          >div{margin-left: 10px}
            .pickerMon{
              display: flex;
              >div:first-child {
                margin-right: 10px;
              }
                .pickerData{
                    flex: 1;
                    display: flex;
                      >span{line-height: 22px}
                    .pickerTable {
                      margin-left: 3px;
                    }
                }
            }
            /deep/.el-date-editor--datetime{
                width: 100%;
            }
            /deep/.el-input__inner{
                position: relative;
                width:1rem;
                background-color: #2e4967;
                color: #fff;
                font-size: 0.08rem;
                height: 0.15rem;
                padding: 0;
                border:none;
                text-align: center;
              z-index: 9999;
                //padding-left:20px ;
                //padding: 0!important;
            }
          /deep/.el-input__icon{
            display: block;
            width:1rem;
            height: 0.15rem;
            line-height: 0.15rem;
            cursor: pointer;
            font-size: 0;
          }
.form-echrts {
  width: 100%;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .from-search {
    display: flex;
    padding: 0.02rem;

          input::-webkit-calendar-picker-indicator {
            opacity: 100;
          }
            .detailbtn{
                background-color:#2e4967;
                text-align: center;
                padding: 0 7px;
                height: 0.15rem;
                line-height: 0.15rem;
                border-radius: 4px;
                margin-right: 6px;
            }
        }
        .el-dialog-div {
            overflow: auto;
        }
        #echarts {
            margin: 0;
            padding: 0;
        }
    > div {
      margin-left: 10px
    }

    .pickerMon {
      display: flex;

      > div:first-child {
        margin-right: 10px;
      }

      .pickerData {
        flex: 1;
        display: flex;

        > span {
          line-height: 22px
        }

        .pickerTable {
          margin-left: 3px;
        }
      }
    }

    /deep/ .el-date-editor--datetime {
      width: 100%;
    }

    /deep/ .el-input__inner {
      position: relative;
      width: 1rem;
      background-color: #2e4967;
      color: #fff;
      font-size: 0.08rem;
      height: 0.15rem;
      padding: 0;
      border: none;
      text-align: center;
      z-index: 9999;
      //padding-left:20px ;
      //padding: 0!important;
    }

    /deep/ .el-input__icon {
      display: block;
      width: 1rem;
      height: 0.15rem;
      line-height: 0.15rem;
      cursor: pointer;
      font-size: 0;
    }

    input::-webkit-calendar-picker-indicator {
      opacity: 100;
    }

    .detailbtn {
      background-color: #2e4967;
      text-align: center;
      padding: 0 7px;
      height: 0.15rem;
      line-height: 0.15rem;
      border-radius: 4px;
      margin-right: 6px;
    }
  }

  .el-dialog-div {
    overflow: auto;
  }

  #echarts {
    margin: 0;
    padding: 0;
  }
}
</style>