<!--
 * @Author: zwq
 * @Date: 2022-01-21 14:43:06
 * @LastEditors: zhp
 * @LastEditTime: 2024-04-16 15:48:46
 * @Description:
-->
<template>
  <!-- <div> -->
    <!-- <div :id="id" :class="className" :style="{ height: '65%', width:width}" /> -->
    <div :id="id" class="epChart" :style="{  height: height, width: width }" />
  <!-- </div> -->
</template>

<script>
import * as echarts from 'echarts'
import 'echarts/theme/macarons' // echarts theme
import resize from '@/mixins/resize'

export default {
  name: 'OverviewBar',
  mixins: [resize],
  props: {
    id: {
      type: String,
      default: 'OverviewLine'
    },
    // className: {
    //   type: String,
    //   default: 'epChart'
    // },
    width: {
      type: String,
      default: '100%'
    },
    beilv: {
      type: Number,
      default: 1
    },
    height: {
      type: String,
      default: '550px'
    },
    legendPosition: {
      type: String,
      default: 'center'
    },
    showLegend: {
      type: Boolean,
      default: false
    },
    legendData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart()
    // })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      console.log(1111)
      this.chart = echarts.init(document.getElementById(this.id))
      console.log(document.querySelector(".app-container").style);
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        grid: { top: 60, right: 90, bottom: 10, left: 10, containLabel: true },
        legend: {
          data: ['废水', '废气', 'VOC'],
          right: '90px',
          top: '0%',
          icon: 'roundRect',
          itemGap: 40,
          itemWidth: 20,
          itemHeight: 2,
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '废水/t',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '废气/m³',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '废水',
            type: 'line',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' t';
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(40, 138, 255, 1)', //改变折线点的颜色
                lineStyle: {
                  color: 'rgba(40, 138, 255, 1)' //改变折线颜色
                }
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: '废气',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' m³';
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(99, 189, 255, 1)', //改变折线点的颜色
                lineStyle: {
                  color: 'rgba(99, 189, 255, 1)' //改变折线颜色
                }
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          },
          {
            name: 'VOC',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' m³';
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(255, 206, 106, 1)', //改变折线点的颜色
                lineStyle: {
                  color: 'rgba(255, 206, 106, 1)' //改变折线颜色
                }
              }
            },
            data: [33.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
/* .epChart {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 10px;
} */
</style>
