<template>
  <div>
    <div :style="{ 'height': height - 50 + 'px', 'width': width - 50 + 'px' }" id="chart5"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import request from '../../utils/gw_ajax_request';
export default {
  props: ['width', 'height'],
  data() {
    return {
      chart5: null,
      echartsData: [],
    };
  },
  created() {},
  mounted() {
    if (this.width == undefined) {
      this.width = '250';
    }
    if (this.height == undefined) {
      this.height = '550';
    }
  },
  methods: {
    getEchartsData(planId, ptype, adCode, notCode) {
      if (planId) {
        const params = {
          planId,
          ptype,
          adCode,
          notCode,
        };
        const arr = [
          ['product', '督查对象总数', '已填问题对象', '完成督查对象数量'],
        ];
        request
          .post('/dc/insp/pblm/statistics/getNumByState', params)
          .then((res) => {
            if (res.success) {
              res.data.forEach((item) => {
                arr.push([
                  item.adName,
                  item.total,
                  item.underSupervision,
                  item.completed,
                ]);
              });
              this.getCharts(arr);
            } else {
              this.$message.error(res.message);
            }
          });
      }
    },
    getCharts(dataset) {
      const myChart = echarts.init(document.getElementById('chart5'));
      const option = {
        color: ['#3fa4ff', '#fd7c25', '#00eff9'],
        title: {
          text: '自查进展情况',
          left: 'center',
        },
        grid: {
          top: '15%',
          bottom: '5%',
          left: '5%',
          right: '5%',
          containLabel: true,
        },
        legend: {
          top: '8%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
          },
        },
        dataset: {
          source: dataset,
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            show: true,
            interval: 0,
            rotate: -45,
            textStyle: {
              color: 'black',
            },
          },
          axisLine: {
            lineStyle: {
              color: 'black',
            },
          },
        },
        yAxis: {
          name: '（个）',
          type: 'value',
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: 'black',
            },
          },
          axisLine: {
            lineStyle: {
              fontSize: 12,
              color: 'black',
            },
          },
        },
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
      };
      myChart.setOption(option, true);
    },
  },
};
</script>

<style lang='less' scoped>

</style>
