<template>
    <div @click="openSteamUsed">
      <div id="bottomRightChart1" style="width:100%;height:2.6rem;">
      </div>
      <el-dialog class="my-info-dialog" :visible.sync="openChart" title="天然气消耗情况" @open="open" width="1600px" destroy-on-close append-to-body>
        <div id="bottomRightChart1Dialog" style="width:100%;height:600px;"></div>
      </el-dialog>
    </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart:null,
      openChart: false,
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  methods: {
    openSteamUsed(){
      this.openChart = true
    },
    open(){
      this.$nextTick(() => {
        this.drawDialog()
      })
    },
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('bottomRightChart1'))
      let Option={
        color: ['#00DDFF', '#37A2FF'],
        tooltip: {
          trigger: 'axis',
          type: 'category',
        },
        /* 标识 */
        legend: {
          data: ['实际', '计划'],
          textStyle:{
            color: '#ffffff'//字体颜色
          }
        },
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
            axisLabel: {//x轴文字的配置
              show: true,
              textStyle: {
                color: '#ffffff',
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Units:(Nm³)',
            axisLabel: {
              textStyle: {
                fontSize: 10,
                color: '#ffffff',
                margin: 15
              },
            },
            axisLine: {
              lineStyle: {
                // 设置x轴颜色
                color: '#ffffff'
              }
            },
          }
        ],
        series: [
          {
            name: this.$t('实际'),
            type: 'bar',
            symbol: "none",
            data: [9,20, 32, 42, 57, 63, 77, 89, 90, 102, 114, 124, 135, 145, 151, 169, 179, 189, 192, 201, 210, 219, 224, 235, 247, 258, 260, 270, 289,299,304]
          },
          {
            name: this.$t('计划'),
            type: 'bar',
            symbol: "none",
            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280,290,300]
          },
        ]
      };
      this.chart.setOption(Option);
    },
    drawDialog() {
      // 基于准备好的dom，初始化echarts实例
      this.chart1 = this.echarts.init(document.getElementById('bottomRightChart1Dialog'))
      let Option={
        color: ['#00DDFF', '#37A2FF'],
        tooltip: {
          trigger: 'axis',
          type: 'category',
        },
        /* 标识 */
        legend: {
          data: ['实际', '计划'],
        },
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
            axisLabel: {//x轴文字的配置
              show: true,
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Units:(Nm³)',
            axisLabel: {
              textStyle: {
                fontSize: 10,
                margin: 15
              },
            }
          }
        ],
        series: [
          {
            name: this.$t('实际'),
            type: 'bar',
            symbol: "none",
            data: [9,20, 32, 42, 57, 63, 77, 89, 90, 102, 114, 124, 135, 145, 151, 169, 179, 189, 192, 201, 210, 219, 224, 235, 247, 258, 260, 270, 289,299,304]
          },
          {
            name: this.$t('计划'),
            type: 'bar',
            symbol: "none",
            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280,290,300]
          },
        ]
      };
      this.chart1.setOption(Option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};


</script>

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