iot-front-ui/src/components/business/analysis/electric/BusinessElectricChart.vue

<template>
  <div>
    <div class="dashboardPortrait-select">
      <a-checkable-tag v-model="tagCheck.all" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('all')">
        <span class="dashboardPortrait-select-text">总体用电</span>
      </a-checkable-tag>
      <a-checkable-tag v-model="tagCheck.F15" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('F15')">
        <span class="dashboardPortrait-select-text">15F</span>
      </a-checkable-tag>
      <a-checkable-tag v-model="tagCheck.F20" color="white" class="dashboardPortrait-select-tag" @change="handleTagSelect('F20')">
        <span class="dashboardPortrait-select-text">20F</span>
      </a-checkable-tag>
    </div>
    <div class="myChart" ref="myChart" :style="{height: height+'px'}">

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

<script>
import apiOperationAnalysis from "@/api/operation/apiOperationAnalysis";

export default {
  data() {
    return {
      currCheck: '',
      tagCheck: {
        all: false,
        F15: false,
        F20: false,
      },
      option: {
        color: ['#80D4FF','#A6A6FF','#79F2E8','#FFDF80','#FF7C1F'],
        legend: {
          data: [
            '尖',
            '峰',
            '平',
            '谷',
          ]
        },
        grid: {
          left: '2%', //默认10%
          right: '2%', //默认10%
          bottom: '15%', //默认60
          top: '15%',
          containLabel: true
          //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: [
          {
            name: 'kwh',
            type: 'value',
            nameTextStyle: {
              padding: [10, 0, 10, -20]
            },
          },
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: '#fff',
            align: 'left',
            fontSize: 14
          },
          axisLine: {//x坐标轴轴线
            show: true,
            lineStyle: {//x坐标轴轴线样式
              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
            }
          },
          backgroundColor: 'rgba(0,0,0,0.8)',
        },
        series: [
          {
            name: '尖',
            data: [],
            type: 'bar',
            stack: 'A',
            barWidth: '30%',
            itemStyle: {
              color: '#3AA7E6'
            },
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          },
          {
            name: '峰',
            data: [],
            type: 'bar',
            stack: 'A',
            itemStyle: {
              color: '#9790F8'
            },
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          },
          {
            name: '平',
            data: [],
            type: 'bar',
            stack: 'A',
            itemStyle: {
              color: '#4ACFB8'
            },
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          },{
            name: '谷',
            data: [],
            type: 'bar',
            stack: 'A',
            itemStyle: {
              color: '#F4955F'
            },
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      },
    }
  },
  props: {
    height: Number
  },
  mounted() {
    this.init();
    this.handleTagSelect('all')
  },
  methods: {
    handleTagSelect(item) {
      for (const key in this.tagCheck) {
        this.tagCheck[key] = false;
      }
      this.currCheck = item;
      this.tagCheck[item] = true;
    },
    init() {
      let chart = this.$echarts.init(this.$refs.myChart)
      this.chart = chart;
      chart.setOption(this.option)
      this.getData()
    },
    getData() {
      apiOperationAnalysis.getEnergyTrendsAnalysePower({}).then(res=>{
        let data = this.$util.dataUtil.covertDataToEcharts(res, ['tip','seal','flat','valley'])
        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>