<template>
  <el-row>
    <div id="index5" style="width:120%;height:20vh;margin:0px 0 0 -10%;"></div>
  </el-row>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: ["resData"],
  data() {
    return {};
  },
  watch: {
    resData() {
      this.getData();
    }
  },
  methods: {
    getData() {
      let chartDom = document.getElementById("index5");
      let myChart = echarts.init(chartDom);
      let data = this.resData;
      let totalNum = data.total;
      let dataList = [totalNum, data.checkCount, data.noCheckCount]
      let option = {
            grid: {
                top: '15%',
                right: '10%',
                bottom: '0%',
                left: '10%'
            },
            color: ['#6F99FA', '#EAF665', '#FF5801'],
            xAxis: [{
                show: false,
                max: totalNum ? totalNum : 100,
            }],
            yAxis: [{
                    axisTick: 'none',
                    axisLine: 'none',
                    axisLabel: {
                        verticalAlign: 'bottom',
                        align: 'left',
                        padding: [0, 0, 15, 5],
                        textStyle: {
                            color: '#000',
                        }
                    },
                    data: ['总报警数', '已处置数', '待处置数'],

                },
                {
                    //左侧柱状图的Y轴
                    axisTick: 'none',
                    axisLine: 'none',
                    // data: [1357, 1260, 36],
                    data: dataList,
                    axisLabel: {
                        show: true,
                        verticalAlign: 'bottom',
                        align: 'right',
                        padding: [0, 15, 15, 0],
                        textStyle: {
                            color: '#000',
                        },
                        formatter: function(value) {
                            return value + '个'
                        }
                    }
                },

            ],
            series: [{
                    type: 'bar',
                    // data: [1357, , ],
                    data: [totalNum,data.checkCount,data.noCheckCount, ],
                    barWidth: 10,
                    itemStyle: {},
                    z: 2
                }, {
                    type: 'bar',
                    // data: [, 1260, ],
                    data: [, dataList.is_handled, ],
                    barWidth: 10,
                    itemStyle: {},
                    z: 2
                }, {
                    type: 'bar',
                    // data: [, , 36],
                    data: [, , dataList.wait_handle],
                    barWidth: 10,
                    itemStyle: {},
                    z: 2
                },
                {
                    type: 'bar',
                    barGap: '-100%',
                    data: totalNum ? [totalNum, totalNum, totalNum] : [100, 100, 100],
                    barWidth: 10,
                    itemStyle: {
                        normal: {
                            color: '#ccc',
                            // barBorderRadius: 6,
                        }
                    },
                    z: 0
                },
            ]
        };
      option && myChart.setOption(option);
      setTimeout(function (){
          window.onresize = function () {
            myChart.resize();
          }
      },200)
    }
  }
};
</script>

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