<template>
    <div>
        <div ref="myChart" style="width: 30rem;height:21rem; margin-left:3%;"></div>
    </div>
</template>
<script>
import conSoleVue from '../admin/conSole.vue';
let echarts = require('echarts/lib/echarts');
  require('echarts/lib/chart/bar');
//   require('echarts/lib/chart/pie');
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');
   window.addEventListener("resize", function() {
   myChart.resize();
  });
export default {
    name: "tasksChart",
    props: ['taskClass'],
    data() {
      return {
          title: this.taskClass + '任务数据统计',
          taskData: '',
          task_data: [],

      }
    },
    mounted() {
        this.jcStasticalTasks()
		},
    methods: {
        initCharts () {
        // let myChart = echarts.init(document.getElementById('myChart'));
        let myChart = echarts.init(this.$refs.myChart);
        // 绘制图表
        myChart.setOption({
        // 设置图标的标题
        title: { 
        text: this.title,
            left: 'center'
        },
        // 图表的提示框组件  trigger: ''（触发方式）axis item
        tooltip: {
            // 触发方式
            trigger: 'item'
        },
        grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        // 是否显示刻度标签 如果是true 就显示 否则反之
        containLabel: true
        },
        // 设置x轴相关配置
        xAxis: {
            type: "category",
            data: ["已发布","进行中","未完成","已完成"],
            axisTick: {
                alignWithLabel: true
            },
            axisLabel: {
                // color: "rgba(255,255,255,.6)",
                fontSize: 14,
                fontWeight: "bold"
            },
            axisLine: {
                lineStyle: {
                    // color: "rgba(90,90,90,.5)"
                }
            },
        },
        yAxis: {
            type: 'value',
            // name: 'y',
            splitLine: {show: true},
            axisLabel: {
                // color: "rgba(255,255,255,.6)",
                fontSize: 14,
                fontWeight: "bold"
            },
            axisLine: {
                show: true,
                lineStyle: {
                    // color: "rgba(95,95,95,.1)",
                    width:1,
                    type: "solid"
                }
         },
        },
        series: [{
        name: '任务数量',
        type: 'bar',
        data: this.task_data,
         // 修改柱子宽度
        barWidth: "35%",
        itemStyle: {
             // 修改柱子圆角
             barBorderRadius: 8
           }
        }]
        });
        },
        async jcStasticalTasks() {
        
        var that = this
		const result = await this.$http.post('JcStasticalTasks', {task_class: this.taskClass})
        console.log(result.data.data)
        that.taskData = result.data.data
        console.log(that.taskData)
        var td = []
        for(let key in that.taskData){
            td.push(that.taskData[key])
        }
        that.task_data = td
        this.initCharts()
      },
    } 
  }
</script>
<style lang="less" scoped>
    colgroup{
        color: rgb(116, 116, 116);
    }
</style>