<template>
  <div class="body">
    <vTitle>月度节能情况</vTitle>
    <div class="con">
      <div class="bottom" id="nh2"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      options: {
        grid: {
          bottom: 20,
          right: 20,
        },
        legend: {
          data: ["同比增长", "均值（kwh）"],
          type: "plain",
          right: 0,
          top: 10,
          textStyle: {
            color: "#ffffff",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            color: "rgba(255,255,255,0.8)",
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          offset: 10,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#269F98",
            },
          },
          axisLabel: {
            formatter: "{value}",
            color: "rgba(255,255,255,0.8)",
          },
        },
        series: [
          {
            name: "同比增长",
            data: [160, 140, 160, 120, 100, 100, 90, 120, 80, 100, 140, 150],
            type: "bar",
            lineStyle: {
              color: "#269F98",
            },
            barWidth: 14,
            itemStyle: {
              borderRadius: [8, 8, 0, 0],
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(38, 159, 152, 1)",
                },
                {
                  offset: 0.2,
                  color: "rgba(38, 159, 152, 0.34)",
                },
                {
                  offset: 1,
                  color: "rgba(38, 159, 152, 0)",
                },
              ]),
            },
          },
          {
            name: "均值（kwh）",
            data: [100, 140, 100, 120, 100, 120, 90, 120, 80, 110, 130, 120],
            type: "line",
            smooth: 0.6,
            lineStyle: {
              color: "#E0B822",
            },
            symbol: "none",
          },
        ],
      },
    };
  },
  mounted() {
    var myChart = this.$echarts.init(document.getElementById("nh2"));
    myChart.setOption(this.options);
  },
};
</script>

<style lang="less" scoped>
.con {
  width: 100%;
  .top {
    font-size: 16px;
    margin-top: 14px;
  }
  .bottom {
    width: 100%;
    height: 220px;
  }
}
</style>
