<template> <div class="container"> <ve-line :data="chartData" :title="title" :extend="extend" :settings="chartSettings"/> </div> </template> <script> import { statisticsNum } from '@/api/energy' export default { name: 'EnergyNum', 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() { // statisticsNum().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', '一期主楼': '53128', '二期主楼': '13338', '录制楼': '28128', '1600平米演播厅': '8128'}, { month: '2022-02', '一期主楼': '63128', '二期主楼': '15338', '录制楼': '38128', '1600平米演播厅': '7128'}, { month: '2022-03', '一期主楼': '58128', '二期主楼': '23338', '录制楼': '32128', '1600平米演播厅': '9128'}, { month: '2022-04', '一期主楼': '53528', '二期主楼': '20338', '录制楼': '34128', '1600平米演播厅': '8128'}, { month: '2022-05', '一期主楼': '60128', '二期主楼': '19338', '录制楼': '30128', '1600平米演播厅': '8428'}, { month: '2022-06', '一期主楼': '58128', '二期主楼': '16338', '录制楼': '29128', '1600平米演播厅': '8928'}, ] } } } </script> <style lang="scss" scoped> .container{ } </style>