echarts的数据显示功能

zhangshuaibao

2021-04-12 c77abda3614ba5c0a317b92eef29edbb39501d8f

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

@@ -1,126 +1,59 @@
<!--  小时数据  -->
<!--  日数据  -->
<template>
    <div id="Tab">
        <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>-->
          <el-row>
            <el-col :span="6"><div class="grid-content bg-purple">氮氧化物 : 29.93 标准 : 100</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">二氧化硫 : 17.34 标准 : 50</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">烟尘 : 6.93 标准 : 30</div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">废气流量 : 120343.18</div></el-col>
<!--            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>-->
          </el-row>
        </div>
        <div class="form-echrts">
            <!--    :title="this.$attrs.getWasteGasDetails[0].OnLineMonEmissPointName"      -->
            <div class="from-search">
<!--                <el-form :inline="true" :model="formInline" class="demo-form-inline">-->
<!--                    <el-form-item label="审批人">-->
<!--                        <el-input v-model="formInline.user" placeholder="审批人"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <div class="block">-->
<!--                        <el-date-picker-->
<!--                            size="'mini"-->
<!--                                class="date"-->
<!--                                v-model="value"-->
<!--                                type="datetimerange"-->
<!--                                range-separator="至"-->
<!--                                start-placeholder="开始日期"-->
<!--                                end-placeholder="结束日期">-->
<!--                        </el-date-picker>-->
<!--                    </div>-->
<!--                    <el-form-item label="采样点数" class="text-size">-->
<!--                        <el-select v-model="formInline.region" placeholder="0">-->
<!--                            <el-option label="0" value="shanghai"></el-option>-->
<!--                            <el-option label="25" value="beijing"></el-option>-->
<!--                            <el-option label="50" value="beijing"></el-option>-->
<!--                            <el-option label="75" value="beijing"></el-option>-->
<!--                            <el-option label="100" value="beijing"></el-option>-->
<!--                        </el-select>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item>-->
<!--                        <el-button type="primary" @click="onSubmit">查询</el-button>-->
<!--                    </el-form-item>-->

<!--                </el-form>-->
<!--              <input list="students">-->
<!--              <datalist id="students">-->
<!--                <option value="Lily">-->
<!--                <option value="Lucy">-->
<!--                <option value="Jim">-->
<!--                <option value="Lily">-->
<!--              </datalist>-->
              <el-row type="flex" :gutter="20">
                <el-col :span="14">
<!--                  <el-row>-->
<!--                    <el-col :span="12">-->
<!--                      <el-row type="flex" justify="space-between">-->
<!--                        <el-col class="pickerData">-->
<!--                          开始时间:-->
<!--                          <el-date-picker-->
<!--                              type="date">-->
<!--                          </el-date-picker>-->
<!--                        </el-col>-->
<!--                      </el-row>-->
<!--                    </el-col>-->
<!--                    <el-col :span="12" type="flex">-->
<!--                      <el-row type="flex" justify="center">-->
<!--                        <el-col>-->
<!--                          结束时间:-->
<!--                          <el-date-picker-->
<!--                              type="date"-->
<!--                          >-->
<!--                          </el-date-picker>-->
<!--                        </el-col>-->
<!--                      </el-row>-->
<!--                    </el-col>-->
<!--                  </el-row>-->
                </el-col>
                <el-col :span="5">
                  采样点数:
                  <input list="source" id="ipt" class="echatsInput">
                  <datalist id="source">
                    <option value="0" />
                    <option value="25" />
                    <option value="50" />
                    <option value="75" />
                    <option value="100" />
                  </datalist>
<!--                  <div data-tap-disabled="true">-->
<!--                    采样点数:-->
<!--                    <select id="source">-->
<!--                      <option value="1">0</option>-->
<!--                      <option value="2">25</option>-->
<!--                      <option value="3">50</option>-->
<!--                      <option value="4">75</option>-->
<!--                      <option value="5">100</option>-->
<!--                    </select>-->
<!--                  </div>-->
                </el-col>
                <el-col class="detailbtn" :span="2" @click="onSubmit">查询</el-col>
                <el-col :span="3">
                  <div class="detailbtn" @click="dialogVisible = true" >明细表</div>
                  <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>
                </el-col>
              </el-row>
            </div>
            <div style="width:600px;height:200px;" id="echarts" ref="main">
            </div>
        </div>
  <div id="Tab">
    <div class="animation">
      <div class="infomation">
        <span class="grid-content">氮氧化物 :<i>29.93</i>  标准 : 100</span>
        <span class="grid-content">二氧化硫 : <i>17.34</i> 标准 : 50</span>
        <span class="grid-content">烟尘 : <i>6.93</i> 标准 : 30</span>
        <span class="grid-content">废气流量 : <i>120343.18</i></span>
      </div>
    </div>
    <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="value1"></el-date-picker>
            </span>
          </div>
          <div class="pickerData">
            <span >结束时间:</span>
            <span class="pickerTable">
              <el-date-picker type="datetime"  v-model="value2"></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"  @click="onSubmit">查询</div>
        <div class="detailbtn" @click="dialogVisible = true" >明细表</div>
      </div>
      <div style="width:5rem;height:2rem;" id="echarts" ref="main">
      </div>
    </div>
    <!-- 明细弹框 -->
    <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>

<script>
@@ -133,6 +66,8 @@
  },
  data () {
    return {
      value1: '',
      value2: '',
      watchData: [],
      dialogVisible: false,
      myChar: null,
@@ -140,7 +75,8 @@
      formInline: {
        user: '',
        region: ''
      }
      },
      info: this.series
    }
  },
  methods: {
@@ -160,12 +96,12 @@
        this.myChart.resize()
      }
    },
    initOptions: function (dataDate, dataValue1, dataValue2, dataValue3) {
    initOptions: function (dateDate, series) {
      var options = {
        title: {
          // text: '折线图堆叠'
        },
        color: ['#5470c6', '#91CC75', '#EE6666', '#FF0087'],
        color: ['#446cdc', '#c4c916', '#c1187e'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
@@ -199,7 +135,7 @@
        },
        grid: {
          left: '3%',
          right: '6%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
@@ -213,7 +149,6 @@
          start: 0,
          end: 100,
          show: false,
          // handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          handleStyle: {
            color: '#fff',
@@ -226,8 +161,8 @@
        // x轴的设置
        xAxis: {
          type: 'category',
          boundaryGap: ['10%', '10%'],
          data: dataDate,
          boundaryGap: false,
          data: dateDate,
          axisLabel: { // x轴全部显示
            rotate: 20,
            interval: 0,
@@ -299,29 +234,7 @@
            }
          }
        }],
        series: [
          {
            name: 'COD',
            type: 'line',
            stack: '总量',
            data: dataValue1,
            yAxisIndex: 0
          },
          {
            name: '氨氮',
            type: 'line',
            stack: '总量',
            data: dataValue2,
            yAxisIndex: 0
          },
          {
            name: '废水流量',
            type: 'line',
            stack: '总量',
            data: dataValue3,
            yAxisIndex: 1
          }
        ]
        series: series
      }
      return options
    }
@@ -329,31 +242,33 @@
  mounted () {
    this.$nextTick(() => {
      this.drawChart()
      const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonData)).reverse()
      const dataWatch = JSON.parse(JSON.stringify(this.$attrs.getQueryOnlineMonDateData)).reverse()
      console.log(dataWatch)
      var dataValue1 = []
      var dataValue2 = []
      var dataValue3 = []
      var dataDate = []
      for (var i = 0; i < 24; i++) {
        if (i === 0 || i === 23) {
          dataDate.push(dataWatch[i].MonTimeStr.substring(0, 8))
        }
      }
      var dateDate = []
      // {COD:[3,4,5]}
      var data = {}
      for (var n = 0; n < dataWatch.length; n++) {
        if (dataWatch[n].PoltmtrlName === 'COD') {
          const valueData1 = []
          valueData1.push(dataWatch[n].MonQty)
        } else if (dataWatch[n].PoltmtrlName === '氨氮') {
          const valueData2 = []
          valueData2.push(dataWatch[n].MonQty)
          console.log(dataValue2)
        } else if (dataWatch[n].PoltmtrlName === '废水流量') {
          const valueData3 = []
          valueData3.push(dataWatch[n].MonQty)
        var d = dataWatch[n].MonTimeStr.substring(5, 9)
        if (dateDate.indexOf(d) < 0) {
          dateDate.push(d)
        }
        if (data[dataWatch[n].PoltmtrlName]) {
          data[dataWatch[n].PoltmtrlName].push(dataWatch[n].MonQty)
        } else {
          data[dataWatch[n].PoltmtrlName] = [dataWatch[n].MonQty]
        }
      }
      const opitons = this.initOptions(dataDate, dataValue1, dataValue2, dataValue3)
      var series = []
      for (var k in data) {
        series.push({
          name: k,
          type: 'line',
          yAxisIndex: k === '废水流量' ? 1 : 0,
          data: data[k]
        })
      }
      console.log(series)
      const opitons = this.initOptions(dateDate, series)
      this.myChart = this.$echarts.init(this.$refs.main)
      this.myChart.setOption(opitons)
    })
@@ -362,80 +277,114 @@
</script>

<style scoped lang="less">
.grid-content{
  font-size: 8px!important;
  background-color:#2e4967;
  text-align: center;
  margin: 0 2px 4px 2px;
  border-radius: 2px;
}
.Infomation {
  margin-left: 10px;
  height: 0.2rem;
}

.el-tag {
  height: 25px;
    width: 140px;
  line-height: 25px;
  margin-right: 10px;
  font-size: 10px;
  background-color: rgba(0, 255, 246, 0.14);
  color: #00d0f9;
  border: none;
  padding: 0 15px;
}

.form-echrts {
  width: 100%;
  height: 1rem;
  border-top: 1px solid #396d83;
  //margin: 10px 10px 10px 10px;
  .from-search{
    //display: flex;
    //justify-content: space-between;
    .pickerData{
      display: flex;
      justify-content: space-between;
    }
    /deep/.el-input__inner{
      width: 40px!important;
      height: 16px!important;
      background-color: #2e4967;
    }
    .echatsInput{
      color: #00ffff;
      background-color: #2e4967;
      border: none;
      border-radius: 6px;
      width: 40px;
    }
    .detailbtn{
      background-color:#2e4967;
      text-align: center;
      padding: 0 7px;
      line-height: 20px;
      border-radius: 4px;
      margin-right: 6px;
    }
//.animation{
//  padding: 0 1rem;
//  overflow: hidden;
//  //width: 1rem;
//  .infomation{
//    display: flex;
//    //margin: 0 1rem;
//    overflow: hidden;
//    animation: move 1s linear 0s infinite;
//    @keyframes move {
//      0% {
//      }
//      100% {
//        transform: translateX(-10%);
//      }
//    }
//    /* 鼠标经过marquee 就停止动画 */
//    &:hover {
//      //z-index: 9999999;
//      animation-play-state: paused;
//    }
//  }
//}
  .grid-content {
    font-size: 8px;
    background-color: #2e4967;
    text-align: center;
    border-radius: 2px;
    margin-right: 10px;
    padding:0 10px
  }
  .el-dialog-div {
    //height: 50vh!important;
    overflow: auto;
    //overflow: hidden;
.animation {
  //width: 600px;
  //height: 0.06rem;
  .infomation {
    padding: 5px 10px;
  }

        .from-search {
            background-color: red;
            .date{
                width: 200px;
                height: 30px;
                padding: 0;
                border: none;
                .el-icon-time{
                    line-height: 30px;
}
    .form-echrts {
        width: 100%;
        border-top: 1px solid #396d83;
        //margin: 10px 10px 10px 10px;
        .from-search{
          display: flex;
          padding:5px;
          >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:140px;
                background-color: #2e4967;
                color: #fff;
                font-size: 12px;
                height: 24px;
                padding: 0;
                border-color:#00fff6;
              text-align: center;
                //padding-left:20px ;
                //padding: 0!important;
            }
          /deep/.el-input__icon{
            display: block;
            width: 140px;
            height: 22px;
            line-height: 22px;
            cursor: pointer;
            font-size: 0;
          }
            .echatsInput{
              color: #00ffff;
              background-color: #2e4967;
              border: none;
              border-radius: 6px;
              width: 80px;
              height: 22px;
            }
          input::-webkit-calendar-picker-indicator {
            opacity: 100;
          }
            .detailbtn{
                background-color:#2e4967;
                text-align: center;
                padding: 0 7px;
                line-height: 20px;
                border-radius: 4px;
                margin-right: 6px;
            }
        }
        .el-dialog-div {
            //height: 50vh!important;
            overflow: auto;
            //overflow: hidden;
        }

        #echarts {