<template>
  <div class="app-container-Dangerstatus">
    <div id="DangerstatusChart" :style="{height:height,width:width}"></div>
  </div>
</template>

<script>
  require('echarts/theme/macarons')

  const animationDuration = 6000

  export default {
    name: "DangerStatusChart",
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '330px'
      },
      year: {
        type: Number,
      }
    },
    mounted() {
      this.$nextTick(() => {
        /*this.queryParams.year = this.searchFormField.year;*/
        this.getList()
      })
    },
    methods: {
      getList() {
        this.initChart()
      },
      initChart() {
        // 基于准备好的dom，初始化echarts实例
        this.chart = this.echarts.init(document.getElementById('DangerstatusChart'))

        this.chart.setOption({
          color: ['#4a7cf9', '#6be5ea', '#fff4f4'],
          /* 周围边距 */
          grid: {
            left: '3%',
            right: '3%',
            bottom: '1%',
            top: '13%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: [this.$t('开项数量'),this.$t('关闭数量')],
            textStyle:{
              color: '#ffffff'//字体颜色
            },
          },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: [this.$t('1月'),this.$t('2月'),this.$t('3月'),this.$t('4月'),this.$t('5月'),this.$t('6月'),this.$t('7月'),this.$t('8月'),this.$t('9月'),this.$t('10月'),this.$t('11月'),this.$t('12月')]
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: this.$t('开项数量'),
              type: 'bar',
              data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162, 32.6, 20.0, 6.4, 3.3],
              markPoint: {
                data: [
                  {type: 'max', name: this.$t('最大值')},
                  {type: 'min', name: this.$t('最小值')}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: this.$t('平均值')}
                ]
              }
            },
            {
              name: this.$t('关闭数量'),
              type: 'bar',
              data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182, 48.7, 18.8, 6.0, 2.3],
              markPoint: {
                data: [
                  {name: this.$t('年最高'), value: 182.2, xAxis: 7, yAxis: 183},
                  {name: this.$t('年最低'), value: 2.3, xAxis: 11, yAxis: 3}
                ]
              },
              markLine: {
                data: [
                  {type: 'average', name: this.$t('平均值')}
                ]
              }
            }
          ]
        })
      }
    }
  }
</script>

<style scoped>

</style>
