newcpms/ui/src/views/monitor/elec/centerRight2.vue

<template>
  <div id="centreRight2">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="align-left"></icon>
        </span>
        <span class="fs-xl text mx-2">峰谷电量</span>
      </div>
      <div class="d-flex jc-center body-box" style=" margin-top: 0;">
        <div id="peakToValley" style="width:100%;height:2.5rem;"></div>
      </div>
      <div class="d-flex jc-center body-box" style=" margin-top: 0;height: 60px">
        <div class="fontElec"><p class="title-p">发电量</p><p class="title-p2">{{dashboardelecdata.ypg}}</p></div>
      </div>
      <div class="d-flex jc-center body-box" style=" margin-top: 0;height: 60px">
        <div class="fontElec"><p class="title-p">倒电量</p> <p class="title-p2">{{dashboardelecdata.daodianliang}}</p></div>

      </div>
      <div class="d-flex jc-center body-box" style=" margin-top: 0;height: 60px">
        <div class="fontElec"><p class="title-p">用电量</p><p class="title-p2">{{dashboardelecdata.eveLec}}</p>p</div>

      </div>
    </div>
  </div>
</template>

<script>
  import centreRight2Chart1 from "@/components/echart/centreRight2/centreRight2Chart1";

  export default {
    props: ['dashboardelecdata'],
    data() {
      return {
        config: {
          data: [
            {
              name: "A",
              value: 167
            },
            {
              name: "B",
              value: 67
            },
            {
              name: "C",
              value: 123
            },
            {
              name: "D",
              value: 55
            },
          ],
          showValue: true
        }
      };
    },
    components: { centreRight2Chart1 },
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        // 基于准备好的dom，初始化echarts实例
        this.chart = this.echarts.init(document.getElementById('peakToValley'))

        this.chart.setOption({
          /* 周围边距 */
          grid: {
            left: '3%',
            right: '3%',
            bottom: '1%',
            top: '20%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: [
            {
              type: 'category',
              data: ['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'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              barWidth: '60%',
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              data: [10, 52, 20, 33, 30, 30, -34, 10, 33, 20, 33, 30, 30, -13, 10, 12, 20, 33, 30, 30, -20, 10, 43, 20, 33, 30, 30, -20, 12, 45, -11]
            }
          ]
        })
      },
    }
  };
</script>

<style lang="scss">
  #centreRight2 {
    padding: 0.0625rem;
    height: 5rem;
    min-width: 3.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
      padding: 0.0625rem;
      height: 5.2rem;
      border-radius: 0.125rem;
    }
    .text {
      color: #c3cbde;
    }
    .body-box {
      border-radius: 0.125rem;
      overflow: hidden;
    }
  }
  .title-p{
    font-size: 16px;
    float: left;
  }
  .title-p2{
    margin-left: 0.3rem;
    width:100px;
    color: #cfe5ea;
    font:30px/15px 'ds-digitalbold';
    float: left;
  }
  .fontElec {
    //width:100px;
    //margin-left: 0.3rem;
    //padding-top: 0.25rem;
    //color: #cfe5ea;
    //font:30px/15px 'ds-digitalbold';
    //text-align:center;
  }
</style>