Newer
Older
GDT_FRONT / src / views / energy / components / energyMonth.vue
[wangxitong] on 21 Jun 2022 2 KB first commit
<template>
  <div class="container">
    <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/>
  </div>
</template>

<script>
import { statisticsMonth } from '@/api/energy'
export default {
  name: 'EnergyMonth',
  data() {
    return {
      listQuery: {
        startTime: '',
        endTime: ''
      },
      title: {
        text: '环比统计'
      },
      chartSettings: {
        labelMap: {month:'月份'},
        metrics: [],
        dimension: ['month']
      },
      extend: {
        grid: {
          top: 120
        },
        yAxis: {
          name: '用电量(度)',
          position: 'left'
        },
        legend: {
          // type: 'scroll',
          top: '40px'
        }
      },
      chartData: {
        columns: [],
        rows: []
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    fetchData() {
      // statisticsMonth().then(response => {
      //   if(response.data.length>0){
      //     const arr = response.data.map((item)=> {
      //       const result = {month: item.month}
      //       for (let i = 0; i < item.data.length; i++) {
      //         result[item.data[i].name] = item.data[i].count
      //       }
      //       return result
      //     })
      //     const area = response.data[0].data.map(item=>item.name)
      //     this.chartData.columns = ['month', ...area]
      //     this.chartSettings.metrics = area
      //     this.chartSettings.labelMap = {'month':'月份'}
      //     this.chartData.rows = arr
      //   }
      // })
      this.chartData.columns = ['month', '一期主楼', '二期主楼', '录制楼', '1600平米演播厅']
      this.chartSettings.metrics = [ '一期主楼', '二期主楼', '录制楼', '1600平米演播厅']
      this.chartSettings.labelMap = {'month':'月份'}
      // 模拟数据
      this.chartData.rows = [
        { month: '2022-01',  '一期主楼': '1.1',  '二期主楼': '1.3',  '录制楼': '1.3',  '1600平米演播厅': '1.1'},
        { month: '2022-02',  '一期主楼': '0.9',  '二期主楼': '0.9',  '录制楼': '0.9',  '1600平米演播厅': '0.9'},
        { month: '2022-03',  '一期主楼': '1.4',  '二期主楼': '0.9',  '录制楼': '0.8',  '1600平米演播厅': '0.9'},
        { month: '2022-04',  '一期主楼': '0.9',  '二期主楼': '0.9',  '录制楼': '0.9',  '1600平米演播厅': '1.2'},
        { month: '2022-05',  '一期主楼': '1.0',  '二期主楼': '1.2',  '录制楼': '0.9',  '1600平米演播厅': '1.3'},
        { month: '2022-06',  '一期主楼': '0.9',  '二期主楼': '0.9',  '录制楼': '0.8',  '1600平米演播厅': '0.9'},
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
  .container{

  }
</style>