iot-front-ui/src/components/business/analysis/all/businessEnergyChart.vue

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

export default {
  data() {
    return {
      chart: null,
      option: {
        legend: {
          data: [
            '用电(kWh)',
            '用水(m³)',
            '用热(kWh)',
            '用冷(kWh)',
            '光伏(kWh)',
          ],
          selected: {
            '用电(kWh)': true,
            '用水(m³)': true,
            '用热(kWh)': false,
            '用冷(kWh)': false,
            '光伏(kWh)': true,
          }
        },
        grid: {
          left: "1%", //默认10%
          right: "1%", //默认10%
          bottom: "20px", //默认60
          top: "60px",
          containLabel: true,
          //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          data: [],
        },
        yAxis: [
          {
            type: "value",
            nameTextStyle: {
              padding: [10, 0, 10, -30],
            },
          },
        ],
        dataZoom: this.$constant.ECHARTS_OPTION_DATAZOOM,
        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: "用电(kWh)",
            data: [],
            type: "line",
            stack: "a",
            yAxisIndex: 0,
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: "#62CC97",
              width: 1,
            },
            itemStyle: {
              color: "#62CC97",
            },
            emphasis: {
              scale: 1.5,
            },
          },
          {
            name: "用水(m³)",
            data: [],
            type: "line",
            stack: "a",
            yAxisIndex: 0,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              color: "#3AA7E6",
            },
            lineStyle: {
              color: "#3AA7E6",
              width: 1,
            },
            emphasis: {
              scale: 1.5,
            },
          },
          {
            name: "用热(kWh)",
            data: [],
            type: "line",
            stack: "a",
            yAxisIndex: 0,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              color: "#4ACFB8",
            },
            lineStyle: {
              color: "#4ACFB8",
              width: 1,
            },
            emphasis: {
              scale: 1.5,
            },
          },
          {
            name: "用冷(kWh)",
            data: [],
            type: "line",
            stack: "a",
            yAxisIndex: 0,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              color: "#F4955F",
            },
            lineStyle: {
              color: "#F4955F",
              width: 1,
            },
            emphasis: {
              scale: 1.5,
            },
          },
          {
            name: "光伏(kWh)",
            data: [],
            type: "line",
            stack: "a",
            yAxisIndex: 0,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              color: "#F8797E",
            },
            lineStyle: {
              color: "#F8797E",
              width: 1,
            },
            emphasis: {
              scale: 1.5,
            },
          },
        ],
      },
    };
  },
  props: {
    height: Number,
    queryData: Object,
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      let chart = this.$echarts.init(this.$refs.myChart);
      this.chart = chart;
      this.$util.chartsResize(this.chart);
      chart.setOption(this.option);
      this.getData();
    },
    getData() {
      return apiOperationAnalysis
        .getEnergyTrendsTotal(this.queryData)
        .then((res) => {
          let data = this.$util.dataUtil.covertDataToEcharts(res, [
            "power",
            "water",
            "hot",
            "cold",
            "cpv",
          ]);
          this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data);
        });
    },
  },
};
</script>

<template>
  <div
    style="width: 100%"
    :style="{ height: height + 'px' }"
    ref="myChart"
  ></div>
</template>

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