newcpms/ui/src/views/front/energyConsumption.vue

<template>
  <div id="app-container-energy">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-area"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">能耗/加工损失率</span>
          <div class="decoration2">
            <dv-decoration-2 :reverse="true" style="width:5px;height:200px;" />
          </div>
        </div>
      </div>
      <div>
        <div id="LossrateChart" :style="transformdata ? 'transform: scale('+transformdata+') translate(0,0) !important;width:420px; height: 160px;margin: auto;' :'width:420px; height: 160px;margin: auto;'"></div>
      </div>
    </div>
  </div>
</template>

<script>
import resize from "../dashboard/mixins/resize";

export default {
  components: {},
  mixins: [resize],
  props: ['monthData','transformdata'],
  data() {
    return {
      chart: null
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.initChart();
    // 每隔秒请求一次数据
    window.setInterval(() => {
      setTimeout(() => {
        ///调取接口获取数据
        this.initChart();
      }, 0)
    }, 1000 * 10 * 6 * 60 * 6)
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('LossrateChart'))
      const dateDay = [];
      const dateNum = [];
      for (let i = 0; i < this.monthData.length; i++) {
        dateDay[i] = this.monthData[i].dateDay
        dateNum[i] = this.monthData[i].lossRate
      }

      this.chart.setOption({
        color: ['#37A2FF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '7%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dateDay,
          axisLabel: {
            textStyle: {
              color: '#ffffff'
            },
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#ffffff'
            },
            formatter: '{value}%'
          }
        },
        series: [
          {
            name: 'Lowest',
            type: 'line',
            data: dateNum,
            markPoint: {
              data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
            },
            markLine: {
              data: [
                { type: 'average', name: 'Avg' },
                [
                  {
                    symbol: 'none',
                    x: '90%',
                    yAxis: 'max',
                  },
                  {
                    symbol: 'circle',
                    label: {
                      position: 'start',
                      formatter: 'Max'
                    },
                    type: 'max',
                    name: '最高点'
                  }
                ]
              ],
              label: {
                normal: {
                  textStyle: {
                    color: 'white',//标注线终点文字颜色
                  }
                },
              },
            },
            areaStyle: {
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#37A2FF'
                },
                {
                  offset: 1,
                  color: 'rgba(55,162,255,0)'
                }
              ])
            },
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss">
  #app-container-energy {
    padding: 0.2rem 0.2rem 0;
    height: 240px;
    min-width: 3.75rem;
    border-radius: 0.0625rem;
    .bg-color-black {
      height: 90%;
      border-radius: 0.125rem;
    }
    .text {
      color: #c3cbde;
    }
    //下滑线动态
    .decoration2 {
      position: absolute;
      right: 0.125rem;
    }
  }
</style>