<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import { fontSize } from '@/views/groupPage/util'
export default {
  name: 'statisticalReportingChart', //上报统计图表
  props: {
    chartData: {},
    type: { type: String, default: 'reporting' }
  },
  data() {
    return { myChart: null }
  },
  watch: {
    chartData(val) {
      this.$nextTick(() => {
        this.initialChart()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initialChart()
    })
    //图表大小自适应
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    destroyChart() {
      if (this.myChart != null) {
        this.myChart.dispose()
        this.myChart = null
      }
    },
    onResize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    initialChart() {
      let legend = []
      let lw = 0
      let lh = 0
      let yAxisName = ''
      let series = []
      if (this.type == 'reporting') {
        yAxisName = '单位：个'
        legend = ['累计上报', '累计完成']
        lw = 15
        lh = 10
        series = [
          {
            name: '累计上报',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 8,
            showSymbol: false,
            smooth: true,
            itemStyle: {
              color: '#FFD553'
            },
            lineStyle: {
              color: '#FFD553',
              width: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(7,44,90,0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(255, 213, 83, 1)'
                }
              ])
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '累计完成',
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: 8,
            showSymbol: false,
            smooth: true,
            itemStyle: {
              color: '#01E17A'
            },
            lineStyle: {
              color: '#01E17A',
              width: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(7,44,90,0.3)'
                },
                {
                  offset: 1,
                  color: 'rgba(1, 225, 122, 1)'
                }
              ])
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }
      if (this.type == 'rectify') {
        yAxisName = '单位：个'
        lw = 8
        lh = 8
        legend = ['上报', '整改']
        series = [
          {
            name: '上报',
            type: 'bar',
            barWidth: 8,
            itemStyle: {
              color: '#E6C14D'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '整改',
            type: 'bar',
            barWidth: 8,
            itemStyle: {
              color: '#139FF0'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }
      let option = {
        grid: {
          left: '5%',
          right: '5%',
          top: '20%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          show: true,
          confine: true,
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          },
          backgroundColor: 'rgba(50,50,50,0.7)',
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              type: 'solid',
              color: 'rgba(255, 255, 255, 0.3)'
            }
          }
        },
        legend: {
          show: true,
          x: 'right',
          y: '10',
          icon: 'inherit',
          itemWidth: lw,
          itemHeight: lh,
          textStyle: {
            color: '#FFFFFF'
          },
          data: legend
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              color: '#FFFFFF'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: ['09/15', '09/16', '09/17', '09/18', '09/19', '09/20', '09/21']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: yAxisName,
            nameTextStyle: {
              color: '#FFFFFF'
            },
            axisLabel: {
              color: '#FFFFFF'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.2)'
              }
            }
          }
        ],
        series
      }
      this.creatChart(option, this.$refs.chart)
    },
    creatChart(option, ref) {
      this.myChart = echarts.init(ref) //this.$refs.chart
      this.myChart.resize()
      this.myChart.setOption(option, {
        notMerge: true
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
    this.destroyChart()
  }
}
</script>

<style lang='scss' scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>