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

<template>
  <div id="bottomLeft">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-bar"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">近30天能源消耗</span>
        </div>
      </div>
      <div>
        <!--渐变折线图-->
        <div id="monthEnergyChart" :style="{height:height,width:width}"></div>

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

<script>
import valveChart from "../dashboard/ValveChart";
require('echarts/theme/macarons') // echarts theme

import resize from "../dashboard/mixins/resize";
const animationDuration = 6000
export default {
  mixins: [resize],
  props: {
    monthData: {},
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '1.7rem'
    }
  },
  data() {
    return {
      /*config: {
        header: ["", "BCC", "SUB", "EU", "PGU/AEU"],
        data: [
          ["SS(HS)自产", "509", "132", "376", "1"],
          ["HHP", "46", "46", "", ""],
          ["HS", "-36", "161", "85", "41"],
          ["MS", "-44", "", "-69", "25"],
          ["LS", "-16", "", "-11", "-5"],
          ["TOTAL", "-49", "", "5", ""],
          ["总消耗", "459", "", "381", "62"]
          /!*["TOTAL", "-49", "<span  class='colorRed'>28</span>"],
          ["总消耗", "459", "<span  class='colorRed'>27</span>"]*!/
        ],
        rowNum: 6, //表格行数
        headerHeight: 35,
        headerBGC: "#0f1325", //表头
        oddRowBGC: "#0f1325", //奇数行
        evenRowBGC: "#171c33", //偶数行
        columnWidth: [110, 70, 70, 70, 90],
        align: ["center", "center", "center", "center", "center"]
      }*/

      chart: null
    };
  },
  components: {
    valveChart
  },
  mounted() {
    this.initChart()
  },
  methods: {
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('monthEnergyChart'))

      this.chart.setOption({
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        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']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 23, 147, 123],
            type: 'line',
            itemStyle: {
              color: 'rgb(78,109,60)'
            },
            symbol: "none",
            areaStyle: {
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(207,243,68)'
                },
                {
                  offset: 1,
                  color: 'rgb(119,189,74)'
                }
              ])
            },
          }
        ]
      })
    }
  }
};
</script>

<style lang="scss">
#bottomLeft {
  padding: 0.2rem 0.2rem 0;
  height: 2.9rem;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
    height: 2rem;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;
    .active-ring-name {
      padding-top: 0.125rem;
    }
  }
}
</style>