<template>
  <div class="app-container-Dangernum">
    <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: [310, 300, 330, 400, 300, 360, 300, 320, 370, 290, 350, 380],
              markPoint: {
                data: [
                  {type: 'max', name: this.$t('最大值')},
                  {type: 'min', name: this.$t('最小值')}
                ]
              },
            },
            {
              name: this.$t('关闭数量'),
              type: 'bar',
              data: [10, 18, 10, 20, 20, 10, 15, 10, 15, 20, 10, 10],
            }
          ]
        })
      }
    }
  }
</script>

<style scoped>

</style>
