<template>
<div>
    <div>
        <h2>监测任务统计</h2>
        <div id="monitor" style="width:100%;height:400px;" ref="liXing_ref">
    </div>
    </div>
    
    
</div>
      
</template>

<script>
export default {
    data(){
         return {
             monitorData:[],
             queryInfo:{
                 task_class:'例行监测'
             }
             
        }
    },
    created(){

    },
    mounted() {
        this.stasticalTasks();//调用接口函数

        this.myChart();
    },
    methods:{
        async stasticalTasks(){
            const result = await this.$http.post("stasticalTasks",this.queryInfo); 
            if (result.data.code == 0){
                this.monitorData = result.data.data
               var td = []
               for(let key in this.monitorData){
                   td.push(this.monitorData[key])
               }
            console.log(td)
            this.monitorData = td
             this.myChart();
            }else{
                this.$message({
                    type: 'error',
                    message: '获取图表失败!'
                });
            }
        },
        
         myChart () {
//第一步：实例化对象
            const monitorChart = this.$echarts.init(document.getElementById('monitor'))
//第二步：指定配置项和数据            
            const monitorData = {
                //工具提示
                tooltip: { 
                    trigger: 'axis',//触发：轴
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效（鼠标悬停时候的样式）
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                //网格样式
                grid: {
                    left: '15%',//左边距
                    right: '15%',//右边距
                    bottom: '3%',//底边距
                    containLabel: true//是否包含标签
                },
                //x轴
                xAxis: [ 
                {
                    type: 'category',
                    data: ['已完成', '未完成', '未发布', '已发布', '已废止'],
                    // data:this.xData,
                    axisTick: {
                        alignWithLabel: true //轴刻度 --与标签对齐
                    },
                    axisLabel:{
                        fontSize:15
                    },
                    //不显示x坐标轴线
                    axisLine:{
                        show: false,
                    }
                }
                ],
                //y轴
                yAxis: [  
                {
                    type: 'value',
                    name: '数量'
                }
                ],
                //
                series: [
                {
                    type: 'bar', // type值设置图表类型，bar为柱状图
                    barWidth: '30%', // 柱形的宽度
                    data:this.monitorData,
                    showBackground: true,//是否显示背景色
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
      }
                }
                ]
            }
//第三步：把配置项给实例对象(绘制)
      monitorChart.setOption(monitorData)
    }
    }
  

}
</script>
<style>
    h2{
        /* margin: 0 auto; */
        display: flex;
        justify-content: center;;
    }
</style>